/* eslint-disable prettier/prettier */
/* eslint-disable eqeqeq */
/* eslint-disable no-shadow */
/* eslint-disable no-unused-vars */
/* eslint-disable array-callback-return */
/* eslint-disable react-hooks/rules-of-hooks */
/* eslint-disable camelcase */
/* eslint-disable guard-for-in */
/* eslint-disable no-restricted-syntax */
import React, { useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import {
  Form,
  Card,
  Space,
  Table,
  Popconfirm,
  Spin,
  Tooltip,
  notification,
  Tree,
  Button,
} from 'antd';

import {
  DoubleLeftOutlined,
  DoubleRightOutlined,
  PlusSquareFilled,
  RightOutlined,
  EditTwoTone,
  DeleteOutlined,
  OrderedListOutlined,
  ApartmentOutlined,
  DesktopOutlined,
} from '@ant-design/icons';
import {
  GetCM_Event_LoadEventTable,
  CM_Event_RemoveEventTable,
  CM_Event_ReOrder,
  GetCM_Event_LoadEventTypeTable,
} from '@/services/standingBook/api';
import classnames from 'classnames';
import styles from './incident.less';
import AddModal from './AddModal';
import ProcessModal from './ProcessModal';
import SortModal from './SortModal';
import ViewModal from './ViewModal';

const incident = () => {
  const history = useHistory();
  const [treeLoading, setTreeLoading] = useState(false);
  const [treeVisible, setTreeVisible] = useState(true); // 左边列表是否可见
  const [treeData, setTreeData] = useState([]); // 事件表数据
  const [tableData, setTableData] = useState([]); // 事件表
  const [addVisible, setAddvisible] = useState(false);
  const [processVisible, setProcessVisible] = useState(false);
  const [sortVisible, setSortVisible] = useState(false);
  const [viewVisible, setViewVisible] = useState(false);
  const [isType, setIsType] = useState(''); // 弹窗类型
  const [formObj, setFormObj] = useState('');
  const [flag, setFlag] = useState(0);
  const [title1, setTitle1] = useState('');
  const [title2, setTitle2] = useState('');
  const [select, setSelect] = useState('');

  const [sortData, setSortData] = useState([]);
  const [rember, setRember] = useState(0);
  const [rember1, setRember1] = useState();

  const [maxLength, setMaxLength] = useState(0);
  const [pickItem, setPickItem] = useState('');
  const [hoverItemIndex, setHoverItemIndex] = useState(0); // hover流程索引
  const [keepIdValue, setKeepIdValue] = useState([]);

  const columns = [
    {
      title: '事件类型',
      dataIndex: 'name',
      key: 'name',
      width: 150,
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {record}
        </Tooltip>
      ),
    },
    {
      title: '事件主表',
      dataIndex: 'tableName',
      key: 'tableName',
      width: 200,
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {record}
        </Tooltip>
      ),
    },
    {
      title: '编码',
      dataIndex: 'code',
      key: 'code',
      width: 80,
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {record}
        </Tooltip>
      ),
    },
    // {
    //   title: '摘要字段',
    //   dataIndex: 'summaryFields',
    //   key: 'summaryFields',
    //   width: 100,
    //   render: record => (
    //     <Tooltip placement="topLeft" title={record}>
    //       {record}
    //     </Tooltip>
    //   ),
    // },
    {
      title: '权限',
      dataIndex: 'roles',
      key: 'roles',
      width: 80,
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {record}
        </Tooltip>
      ),
    },
    // {
    //   title: '流程',
    //   dataIndex: 'flowCount',
    //   key: 'flowCount',
    //   width: 80,
    //   render: record => (
    //     <Tooltip placement="topLeft" title={record}>
    //       {record}
    //     </Tooltip>
    //   ),
    // },
    {
      title: '上报',
      dataIndex: 'reportable',
      key: 'reportable',
      width: 50,
    },
    // {
    //   title: '上报字段',
    //   dataIndex: 'reportFields',
    //   key: 'reportFields',
    //   width: 80,
    // },
    // {
    //   title: '显示字段',
    //   dataIndex: 'displayFields',
    //   key: 'displayFields',
    //   width: 80,
    // },

    {
      title: '编辑',
      dataIndex: 'editable',
      key: 'editable',
      width: 50,
      render: item => (
        <span style={{ color: 'grey' }} key={item}>
          {item}
        </span>
      ),
    },
    {
      title: '编辑字段',
      dataIndex: 'editableFields',
      key: 'editableFields',
      width: 80,
      render: item => (
        <div
          ref={r => {
            if (r) {
              r.innerHTML = item;
            }
          }}
        />
      ),
    },
    {
      title: '外部字段',
      dataIndex: 'outFields',
      key: 'outFields',
      align: 'center',
      width: 80,
      render: text => (
        <span
          style={{
            display: 'inline-block',
            width: '60px',
            color: Number(text) > 0 ? 'red' : '',
            backgroundColor: Number(text) > 0 ? 'yellow' : '',
          }}
        >
          {text == 0 ? '(无)' : text}
        </span>
      ),
    },
    {
      title: '上报方式',
      dataIndex: 'createMode',
      key: 'createMode',
      width: 80,
    },
    {
      title: '流程数量',
      dataIndex: 'flowCount',
      key: 'flowCount',
      width: 80,
      render: (text, record) => (
        <>
          <span
            style={{
              display: 'inline-block',
              width: '60px',
              color:
                Number(text.split(' ')[0]) > 1 && record.createMode === '工单分派' ? 'red' : '',
            }}
          >
            {Number(text.split(' ')[0]) > 1 && record.createMode === '工单分派' ? (
              <Tooltip placement="topLeft" title="工单模型的流程数量不能大于1">
                {text}
              </Tooltip>
            ) : (
              text
            )}
          </span>
        </>
      ),
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      width: 150,
      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>
          <Tooltip title="受理流程">
            <ApartmentOutlined
              onClick={() => process1(record)}
              style={{ fontSize: '16px', color: '#1890FF' }}
            />
          </Tooltip>
          <Tooltip title="辅助视图">
            <DesktopOutlined
              onClick={() => auxiliaryView1(record)}
              style={{ fontSize: '16px', color: '#1890FF' }}
            />
          </Tooltip>
        </Space>
      ),
    },
  ];

  useEffect(() => {
    setTreeLoading(true);
    GetCM_Event_LoadEventTable().then(res => {
      setTreeLoading(false);
      if (res.code === 0) {
        console.log(res.data);
        setKeepIdValue(res.data);
        // setMaxLength(res.data.root.length + 1)
        let arr = formateArrDataA(res.data, 'businessType');
        console.log(arr);
        let newArr = [];
        let newapp = [];
        let newabb = [];
        let aa = [];
        let zz = [];
        Object.keys(arr).map((item, index) => {
          newArr.push(item);
        });
        console.log(arr);
        Object.values(arr).map((item, index) => {
          newapp.push(item);
        });
        console.log(newapp);
        newapp.map((item, index) => {
          console.log(item);
          item.map((item1, index) => {
            newabb.push(item1.root);
            console.log(item1.root);
          });
        });
        console.log(newabb);
        newabb.map((item, index) => {
          console.log(item);
          aa.push(item);
        });
        console.log(aa);
        aa.map((item, index) => {
          console.log(item);
          item.map((item1, index) => {
            console.log(item1);
            zz.push({ ...item1 });
          });
        });
        console.log(zz);
        let arrr = formateArrDataA(zz, 'businessType');
        console.log(arrr);
        setTableData(arrr);
        console.log(history.location.state);
        if (history.location.state) {
          console.log(history);
          console.log(history.location.state.rember);
          setPickItem(newArr[history.location.state.rember]);
          setRember(history.location.state.rember);
          setRember1(newArr[history.location.state.rember]);
        } else {
          setPickItem(newArr[rember]);
          setRember1(newArr[0]);
        }
        console.log(rember);
        console.log(newArr[rember]);
        console.log(newArr, 'newArr');
        setTreeData(newArr);
      } else {
        notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
        });
      }
    });
  }, [flag]);
  useEffect(() => {
    GetCM_Event_LoadEventTypeTable().then(res => {
      if (res.msg === 'Ok') {
        let arr = [];
        res.data.map((item, index) => {
          arr.push(item.text);
        });
        setSelect(arr);
      }
    });
  }, []);
  const formateArrDataA = (initialArr, name) => {
    console.log(initialArr);
    console.log(name);
    // 判定传参是否符合规则
    if (!(initialArr instanceof Array)) {
      return '请传入正确格式的数组';
    }
    if (!name) {
      return '请传入对象属性';
    }
    // 先获取一下这个数组中有多少个"name"
    let nameArr = [];
    for (let i in initialArr) {
      if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) {
        nameArr.push(initialArr[i][`${name}`]);
      }
    }
    // 新建一个包含多个list的结果对象
    let tempObj = {};
    // 根据不同的"name"生成多个数组
    for (let k in nameArr) {
      for (let j in initialArr) {
        if (initialArr[j][`${name}`] == nameArr[k]) {
          // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变
          tempObj[nameArr[k]] = tempObj[nameArr[k]] || [];
          tempObj[nameArr[k]].push(initialArr[j]);
        }
      }
    }
    for (let keys in tempObj) {
      let arr = [];
      tempObj[keys].map((item, index) => {
        tempObj[keys] = arr;
        item.key = index;
        arr.push(item);
      });
    }
    return tempObj;
  };
  // 添加事件
  const addIncident = () => {
    setAddvisible(true);
    setIsType('add');
  };
  // 修改事件类型
  const editEventType = record => {
    setFormObj(record);
    setIsType('edit');
    setAddvisible(true);
  };
  // 删除事件类型
  const deleteEventType = record => {
    CM_Event_RemoveEventTable(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 sort = () => {
    setSortVisible(true);
    console.log(tableData);
    console.log(pickItem);
    console.log(tableData[pickItem]);
    setSortData(tableData[pickItem]);
  };

  const process1 = record => {
    history.push({
      pathname: '/biz/workflow/eventFlow',
      state: { formObj: record, title1: record.name, rember },
    });
  };

  const auxiliaryView1 = record => {
    history.push({
      pathname: '/biz/workflow/eventView',
      state: { formObj: record, title2: record.name, rember },
    });
  };
  const onSubmit = () => {
    setAddvisible(false);
    setFlag(flag + 1);
  };
  const onOK = prop => {
    setSortVisible(false);
    let aa = prop.str.toString();
    console.log(aa);
    CM_Event_ReOrder(aa).then(res => {
      if (res.msg === 'Ok') {
        notification.success({
          message: '提示',
          duration: 3,
          description: '调整成功',
        });
        setFlag(flag + 1);
      } else {
        notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
        });
      }
    });
  };
  return (
    <div className={styles.incidentContainer}>
      <div className={styles.contentContainers}>
        {/* 左侧事件树 */}
        <Spin spinning={treeLoading} tip="loading...">
          <Card
            className={classnames({
              [styles.orgContainer]: true,
              [styles.orgContainerHide]: !treeVisible,
            })}
          >
            <div style={{ height: '100%', display: treeVisible ? 'block' : 'none' }}>
              <span
                style={{
                  fontSize: '15px ',
                  fontWeight: 'bold',
                  marginLeft: '14px',
                }}
              >
                事件列表
              </span>
              <Tooltip title="添加事件类型">
                <PlusSquareFilled
                  onClick={() => addIncident()}
                  style={{
                    color: '#1890FF',
                    fontSize: '25px',
                    verticalAlign: 'middle',
                    marginLeft: '51%',
                  }}
                />
              </Tooltip>
              <hr style={{ width: '100%', color: '#eeecec' }} />
              <div
                style={{
                  height: 'calc(100% - 60px)',
                  overflowY: 'scroll',
                }}
              >
                {treeData.length > 0 &&
                  treeData.map((item, index) => (
                    <div
                      className={classnames({
                        [styles.listItem]: true,
                        [styles.pickItem]: item === pickItem,
                        [styles.listHover]: item !== pickItem && item === hoverItemIndex,
                      })}
                      onClick={e => {
                        setPickItem(item);
                        setRember(index);
                        setRember1(item);
                      }}
                      onMouseEnter={() => {
                        setHoverItemIndex(item);
                      }}
                      onMouseLeave={() => {
                        setHoverItemIndex('');
                      }}
                      key={index}
                    >
                      <div
                        style={{
                          width: '130px',
                          overflow: 'hidden',
                          whiteSpace: 'nowrap',
                          textOverflow: 'ellipsis',
                        }}
                      >
                        <Tooltip placement="top" title={item}>
                          {item}
                        </Tooltip>
                      </div>
                      （{tableData[item] ? tableData[item].length : ''}）
                    </div>
                  ))}
              </div>
            </div>
            <div className={styles.switcher}>
              {treeVisible && (
                <Tooltip title="隐藏事件列表">
                  <DoubleLeftOutlined onClick={() => setTreeVisible(false)} />
                </Tooltip>
              )}
              {!treeVisible && (
                <Tooltip title="显示事件列表">
                  <DoubleRightOutlined onClick={() => setTreeVisible(true)} />
                </Tooltip>
              )}
            </div>
          </Card>
        </Spin>
        {/* 右侧 */}
        <div
          className={classnames({
            [styles.userContainer]: true,
            [styles.userContainerHide]: !treeVisible,
          })}
        >
          <div style={{ height: '50px' }}>
            <span style={{ float: 'right', marginRight: '10px' }}>
              <Button
                icon={<OrderedListOutlined className={styles.icon} />}
                onClick={sort}
                style={{
                  marginLeft: '30px',
                  verticalAlign: 'middle',
                  marginTop: '10px',
                }}
              >
                调序
              </Button>
            </span>
          </div>

          <Table
            size="small"
            rowKey="ID"
            bordered
            onRow={record => ({
              onDoubleClick: event => {
                event.stopPropagation();
                editEventType(record);
              }, // 双击
            })}
            columns={columns}
            dataSource={tableData[pickItem]}
            scroll={{ y: 'calc(100% - 50px)', x: 'max-content' }}
            pagination={{
              showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
              pageSizeOptions: [10, 20, 50, 100],
              defaultPageSize: 20,
              showQuickJumper: true,
              showSizeChanger: true,
            }}
          />
        </div>
        {/* Modal弹框 */}
        {/* 添加事件 */}
        <AddModal
          visible={addVisible}
          type={isType}
          formObj={formObj}
          rember1={rember1}
          maxLength={maxLength}
          onClose={() => setAddvisible(false)}
          treeData={treeData}
          selectData={select}
          callBackSubmit={onSubmit}
          placement="right"
        />
        <SortModal
          title="调整顺序"
          visible={sortVisible}
          sortData1={sortData}
          pickItem={pickItem}
          onCancel={() => setSortVisible(false)}
          callBackSubmit={onOK}
          keepIdValue={keepIdValue}
        />
      </div>
    </div>
  );
};

export default incident;
