/*
 * @Author: zhoujianlong
 * @Date: 2021-06-22 14:46:22
 * @Last Modified by: zhoujianlong
 * @Last Modified time: 2021-08-03 14:09:26
 */
import React, { useState } from 'react';
import { Modal, Button, message, Spin } from 'antd';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import { ApprovalProcess } from './service';

interface SeleApprovalProcessProps {
  modalVisible: boolean; //弹窗visible
  onCancel: () => void; //关闭弹窗方法回调
  data: Array<any>[]; //传入列表展示的数组
  annoId: any; //传入id
}
/**
 * 公告、变更公告、失败公告、邀请函、公示 选择审批流程
 */
const SeleApprovalProcess: React.FC<SeleApprovalProcessProps> = (props) => {
  const { modalVisible, onCancel, data, annoId } = props;
  const modalHeight = (window.innerHeight * 96) / 100;
  //loading
  const [loading, setLoading] = useState<boolean>(false);
  //发起审批操作
  const toApprove = async (record: any) => {
    setLoading(true);
    await ApprovalProcess(annoId, { ...record })
      .then((res) => {
        if (res?.code == 200 && res?.success == true) {
          message.success('操作成功');
          onCancel();
        }
      })
      .finally(() => {
        setLoading(false);
      });
  };

  const columns: ProColumns<any>[] = [
    {
      title: '序号',
      key: 'key',
      render: (_, record: any, index: any) => index + 1,
    },
    {
      title: '流程名称',
      dataIndex: 'workflowName',
      key: 'workflowName',
    },
    {
      title: '操作',
      dataIndex: 'options',
      key: 'options',
      render: (_: any, record: any) => (
        <Button type="text" key="sele_approve" onClick={() => toApprove(record)}>
          发起审批
        </Button>
      ),
    },
  ];

  return (
    <Modal
      destroyOnClose
      title="请选择审批流程"
      visible={modalVisible}
      width={'40%'}
      style={{ maxHeight: modalHeight }}
      bodyStyle={{ maxHeight: modalHeight - 107, overflowY: 'auto' }}
      centered
      onCancel={() => onCancel()}
      footer={null}
    >
      <Spin spinning={loading} delay={300} tip="正在发起审批，请稍等">
        <ProTable
          rowKey="id"
          pagination={false}
          search={false}
          options={false}
          columns={columns}
          dataSource={data}
          dateFormatter="string"
        />
      </Spin>
    </Modal>
  );
};

export default SeleApprovalProcess;