/* eslint-disable react-hooks/rules-of-hooks */
/* eslint-disable camelcase */
import React, { useEffect, useState } from 'react';
import { Modal, Table, Tooltip, notification, Space, Popconfirm, Spin, Button } from 'antd';
import {
  PlusSquareFilled,
  EditTwoTone,
  DeleteOutlined,
  PlusSquareOutlined,
  RollbackOutlined,
} from '@ant-design/icons';
import { useHistory } from 'react-router-dom';
import styles from './incident.less';
import { GetCM_Event_LoadEvenFlows, CM_Event_RemoveEvenFlow } from '@/services/standingBook/api';
import AddFlowsModal from './AddFlowsModal';
const incidentFlow = props => {
  const [tableData, setTableData] = useState([]);
  const history = useHistory();
  const [addVisible, setAddVisible] = useState(false);
  const [treeLoading, setTreeLoading] = 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: 250,
      ellipsis: true,
    },
    {
      title: () => <span style={{ fontWeight: 'bold' }}>受理权限</span>,
      dataIndex: 'FlowRoles',
      key: 'FlowRoles',
      ellipsis: true,
    },
    {
      title: () => <span style={{ fontWeight: 'bold' }}>操作</span>,
      key: 'action',
      width: 150,
      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(() => {
    console.log(props);
    console.log(props.location.state.formObj);
    setTreeLoading(true);
    GetCM_Event_LoadEvenFlows({
      eventTypeId: props.location.state.formObj.ID,
    }).then(res => {
      setTreeLoading(false);
      if (res.msg === 'Ok') {
        console.log(res.data);
        setTableData(res.data);
      }
    });
  }, [flag]);
  const addIncident = () => {
    console.log(props.location.state.formObj.ID);
    setObj(props.location.state.formObj.ID);
    setAddVisible(true);
    setIsType('add');
  };
  const editEventType = record => {
    setObj(props.location.state.formObj.ID);
    setRecord1(record);
    setIsType('edit');
    setAddVisible(true);
  };
  const back = () => {
    let { rember } = props.location.state;
    history.push({
      pathname: '/biz/workflow/event',
      state: { rember },
    });
  };
  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: props.location.state.formObj.ID,
    }).then(res => {
      if (res.msg === 'Ok') {
        console.log(res.data);
        setTableData(res.data);
      }
    });
  };

  return (
    <>
      <Spin tip="loading..." spinning={treeLoading}>
        <div className={styles.containerBox}>
          <div className={styles.config}>
            <div className={styles.title}>{`${props.location.state.title1}受理流程和权限`}</div>
            <div className={styles.btn}>
              <Button
                disabled={
                  props.location.state.formObj.createMode === '工单分派' && tableData.length >= 1
                }
                type="primary"
                icon={<PlusSquareOutlined />}
                onClick={() => addIncident()}
              >
                新增
              </Button>

              <Button type="primary" icon={<RollbackOutlined />} onClick={() => back()}>
                返回
              </Button>
            </div>
          </div>

          <Table
            size="small"
            rowKey="ID"
            bordered
            style={{ overflowY: 'scroll' }}
            onRow={record => ({
              onDoubleClick: event => {
                event.stopPropagation();
                editEventType(record);
              }, // 双击
            })}
            columns={columns}
            dataSource={tableData}
            pagination={false}
          />
        </div>
      </Spin>
      <AddFlowsModal
        visible={addVisible}
        obj={obj}
        formObj={props.location.state.formObj}
        type={isType}
        record={record1}
        // maxLength={maxLength}
        onClose={() => setAddVisible(false)}
        callBackSubmit={onOK}
        placement="right"
      />
    </>
  );
};
export default incidentFlow;
