import React, { useEffect, useState } from 'react';
import { Modal, Table, Tooltip, notification, Space, Popconfirm } from 'antd';
import { PlusSquareFilled, EditTwoTone, DeleteOutlined } from '@ant-design/icons';
import styles from './incident.less';
import { GetCM_Event_LoadEvenFlows, CM_Event_RemoveEvenFlow } from '@/services/standingBook/api';
import AddFlowsModal from './AddFlowsModal';
const ProcessModal = props => {
  const { callBackSubmit = () => {}, title1, visible, onCancel, formObj, maxLength } = props;
  const [tableData, setTableData] = useState([]);
  const [addVisible, setAddVisible] = useState(false);
  const [isType, setIsType] = useState(''); // 弹窗类型
  const [record1, setRecord1] = useState('');
  const [obj, setObj] = useState('');
  const [flag, setFlag] = useState(0);

  const columns = [
    {
      title: () => <span style={{ fontWeight: 'bold' }}>流程名称</span>,
      dataIndex: 'FlowName',
      key: 'FlowName',
      width: 150,
      ellipsis: true,
      // render: item => (
      //     <div
      //         ref={r => {
      //             if (r) {
      //                 r.innerHTML = item;
      //             }
      //         }}
      //     />
      // )
    },
    {
      title: () => <span style={{ fontWeight: 'bold' }}>受理权限</span>,
      dataIndex: 'FlowRoles',
      key: 'FlowRoles',
      width: 400,
      ellipsis: true,
      // render: item => (
      //     <div
      //         ref={r => {
      //             if (r) {
      //                 r.innerHTML = item;
      //             }
      //         }}
      //     />
      // )
    },
    {
      title: () => <span style={{ fontWeight: 'bold' }}>操作</span>,
      key: 'action',
      aligin: 'center',
      render: record => (
        <Space size="middle">
          <Tooltip title="编辑用户">
            <EditTwoTone onClick={() => editEventType(record)} style={{ fontSize: '16px' }} />
          </Tooltip>
          <Tooltip title="删除">
            <Popconfirm
              placement="bottomRight"
              title={<p>即将删除事件流程，是否确认删除？</p>}
              okText="确认"
              cancelText="取消"
              onConfirm={() => deleteEventType(record)}
            >
              <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
            </Popconfirm>
          </Tooltip>
        </Space>
      ),
    },
  ];

  useEffect(() => {
    GetCM_Event_LoadEvenFlows({ eventTypeId: formObj.ID }).then(res => {
      if (res.msg === 'Ok') {
        console.log(res.data);
        setTableData(res.data);
      }
    });
  }, [visible, flag]);
  const addIncident = () => {
    console.log(formObj.ID);
    setObj(formObj.ID);
    setAddVisible(true);
    setIsType('add');
  };
  const editEventType = record => {
    setObj(formObj.ID);
    setRecord1(record);
    setIsType('edit');
    setAddVisible(true);
  };
  const deleteEventType = record => {
    console.log(record);
    CM_Event_RemoveEvenFlow({ eventFlowIds: record.ID }).then(res => {
      if (res.msg === '') {
        notification.success({
          message: '提示',
          duration: 3,
          description: '删除成功',
        });
        setFlag(flag + 1);
      } else {
        notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
        });
      }
    });
  };
  const onOK = () => {
    setAddVisible(false);
    GetCM_Event_LoadEvenFlows({ eventTypeId: formObj.ID }).then(res => {
      if (res.msg === 'Ok') {
        console.log(res.data);
        setTableData(res.data);
      }
    });
  };
  const onSumbit = () => {
    callBackSubmit();
  };
  return (
    <Modal
      title={`${title1}受理流程和权限`}
      visible={visible}
      width="800px"
      onCancel={onCancel}
      onOk={onSumbit}
    >
      <Tooltip title="添加事件类型">
        <PlusSquareFilled
          onClick={() => addIncident()}
          style={{
            color: '#1890FF',
            fontSize: '25px',
            verticalAlign: 'middle',
            marginLeft: '25px',
            marginBottom: '10px',
          }}
        />
      </Tooltip>
      <Table
        size="small"
        rowKey="ID"
        bordered
        style={{ height: '15rem', overflowY: 'scroll', width: '700px', marginLeft: '25px' }}
        onRow={record => ({
          onDoubleClick: event => {
            event.stopPropagation();
            editEventType(record);
          }, // 双击
        })}
        columns={columns}
        dataSource={tableData}
        pagination={false}
      />
      <AddFlowsModal
        visible={addVisible}
        obj={obj}
        formObj={formObj}
        type={isType}
        record={record1}
        maxLength={maxLength}
        onClose={() => setAddVisible(false)}
        callBackSubmit={onOK}
        placement="right"
      />
    </Modal>
  );
};
export default ProcessModal;
