import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
import { Space, Button, Divider, Table, Tooltip, message } from 'antd';
import { DeleteOutlined, EditTwoTone, PlusOutlined } from '@ant-design/icons';
import AddLimit from './AddLimit';

const ConfigTimeLimit = (props, ref) => {
  const { editMsg, nodeChage, afterNodes, limitFinshNodes } = props;

  const [viewModal, setViewModal] = useState(false); // 编辑模态框
  const [modalType, setModalType] = useState(''); // 模态框是编辑还是修改的状态
  const [viewMsg, setviewMsg] = useState({}); // 保存编辑的信息
  const [title, setTitle] = useState('');
  const [finishNodes, setFinishNodes] = useState([]);
  const [flowId, setFlowId] = useState('');
  const [flag, setFlag] = useState(0);
  const tableData = useRef([]); // 辅助视图对应的回显的表格
  useImperativeHandle(ref, () => ({ getParmar }));
  useEffect(() => {
    tableData.current = [];
    console.log(editMsg, 'editMsg');
    tableData.current = editMsg?.FlowTimerList?.map(item => ({ ...item, key: item.ID }));
    setFlag(flag + 1);
  }, [editMsg]);
  const getParmar = () => {};
  const toEdit = val => {
    setViewModal(true);
    setModalType('edit');
    setviewMsg(val);
  };
  const delRow = record => {
    let list = JSON.parse(JSON.stringify(tableData.current));
    list = list.filter(item => item.key !== record.key);
    tableData.current = list;
    nodeChage('FlowTimerList', tableData.current);
    setFlag(flag + 1);
  };
  // 辅助视图确定回调
  const saveView = (val, type) => {
    let list = JSON.parse(JSON.stringify(tableData.current));
    // eslint-disable-next-line prefer-spread
    let newKey = list.length > 0 ? Math.max.apply(Math, list.map(item => item.key)) + 1 : 0;

    if (type === 'add') {
      list.push({ ...val, key: newKey });
    } else {
      let edtiIndex = list.findIndex(item => item.key === val.key);

      list[edtiIndex] = val;
    }
    tableData.current = list;
    nodeChage('FlowTimerList', tableData.current);
    setViewModal(false);
  };
  // 定义表格
  const columns = [
    {
      title: '规则名称',
      dataIndex: 'Name',
      align: 'center',
    },
    {
      title: '操作',
      align: 'center',
      ellipsis: true,
      render: record => (
        <>
          <Space>
            {/* <Tooltip title="修改流程时限配置">
              <EditTwoTone
                onClick={() => toEdit(record)}
                style={{ fontSize: '16px', color: '#1890FF' }}
              />
            </Tooltip> */}
            {/* <Tooltip title="删除流程时限配置"> */}
            <DeleteOutlined
              onClick={() => delRow(record)}
              style={{ fontSize: '16px', color: '#e86060' }}
            />
            {/* </Tooltip> */}
          </Space>
        </>
      ),
    },
  ];
  return (
    <div>
      <Divider
        orientation="left"
        style={{
          borderTopColor: '#99bbe8',
          color: '#15428b',
          fontWeight: 700,
          marginTop: '0px',
        }}
      >
        时限配置
      </Divider>
      <div
        style={{
          widnt: '100%',
          marginBottom: '10px',
          display: 'flex',
          justifyContent: 'right',
        }}
      >
        <Button
          type="primary"
          onClick={() => {
            setViewModal(true);
            setModalType('add');
          }}
          style={{ display: 'flex', alignItems: 'center' }}
          icon={<PlusOutlined />}
        >
          时限配置
        </Button>
      </div>
      <Table
        dataSource={tableData.current}
        columns={columns}
        rowKey={record => record.key}
        bordered
        size="small"
        onRow={record => ({
          onDoubleClick: () => {
            toEdit(record);
          },
        })}
        pagination={false}
      />
      <AddLimit
        visible={viewModal}
        msg={viewMsg}
        title={title}
        flowId={flowId}
        nodeMsg={editMsg}
        modalType={modalType}
        handleCancel={() => setViewModal(false)}
        afterNodes={afterNodes}
        limitFinshNodes={limitFinshNodes}
        configList={tableData.current}
        onSubumit={saveView}
      />
    </div>
  );
};

export default forwardRef(ConfigTimeLimit);
