/* 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,
  Modal,
  Input,
  message,
  Tag,
  Upload,
} from 'antd';

import {
  DoubleLeftOutlined,
  DoubleRightOutlined,
  PlusSquareFilled,
  RightOutlined,
  EditTwoTone,
  DeleteOutlined,
  OrderedListOutlined,
  ApartmentOutlined,
  DesktopOutlined,
  FormOutlined,
  ImportOutlined,
  ExportOutlined,
} from '@ant-design/icons';
import {
  GetCM_Event_LoadEventTable,
  CM_Event_RemoveEventTable,
  CM_Event_ReOrder,
  GetCM_Event_LoadEventTypeTable,
  CM_Event_EditBusinessType,
  CheckImportEventConfig,
  ImportEventConfig,
  ExportEventConfig,
} 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 { Search } = Input;

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 [editBusinessVisible, setEditBusinessVisible] = useState(false);
  const [searchValue, setSearchValue] = useState('');
  const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式
  const [addForm] = Form.useForm();
  const [file, setFile] = useState(); // 上传文件信息

  const columns = [
    {
      title: '事件名称',
      dataIndex: 'name',
      key: 'name',
      width: 150,
      render: (text, record) => (
        <Tooltip placement="topLeft" title={text}>
          {searchStyle(text)}
        </Tooltip>
      ),
    },
    {
      title: '事件主表',
      dataIndex: 'tableName',
      key: 'tableName',
      width: 200,
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {searchStyle(record)}
        </Tooltip>
      ),
    },
    {
      title: '编码',
      dataIndex: 'code',
      key: 'code',
      width: 80,
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {record}
        </Tooltip>
      ),
    },
    {
      title: '权限',
      dataIndex: 'roles',
      key: 'roles',
      width: 80,
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          <span style={{ color: record == '(无)' ? 'grey' : 'black' }}>{record}</span>
        </Tooltip>
      ),
    },
    {
      title: '外部字段',
      dataIndex: 'outFields',
      key: 'outFields',
      align: 'center',
      width: 80,
      render: text => (
        <span
          style={{
            display: 'inline-block',
            width: '60px',
            color: Number(text) > 0 ? 'red' : 'grey',
            backgroundColor: Number(text) > 0 ? 'yellow' : '',
          }}
        >
          {text == 0 ? '(无)' : text}
        </span>
      ),
    },
    {
      title: '上报方式',
      dataIndex: 'reportable',
      key: 'reportable',
      width: 80,
      render: item => {
        if (item === '均可') {
          return (
            <span>
              <Tag color="processing">前端</Tag>
              <Tag color="processing">手持</Tag>
            </span>
          );
        }
        if (item === '' || item === '否') {
          return <Tag color="warning">内置</Tag>;
        }
        if (item === '是') {
          return <span style={{ color: 'grey' }}>（无）</span>;
        }
        return (
          <span>
            <Tag color="processing">{item}</Tag>
          </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="受理流程">
            <ApartmentOutlined
              onClick={() => process1(record)}
              style={{ fontSize: '16px', color: '#1890FF' }}
            />
          </Tooltip>
          <Tooltip title="导出事件">
            <ExportOutlined
              onClick={() => hadelExport(record)}
              style={{ fontSize: '16px', color: '#1890FF' }}
            />
          </Tooltip>
          <Tooltip title="删除事件">
            <Popconfirm
              placement="bottomRight"
              title={<p>即将删除事件类型表，是否确认删除？</p>}
              okText="确认"
              cancelText="取消"
              onConfirm={() => deleteEventType(record)}
            >
              <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
            </Popconfirm>
          </Tooltip>
        </Space>
      ),
    },
  ];

  useEffect(() => {
    setTreeLoading(true);
    GetCM_Event_LoadEventTable({
      filter: searchValue,
    }).then(res => {
      setTreeLoading(false);
      if (res.code === 0) {
        setKeepIdValue(res.data);
        let arr = formateArrDataA(res.data, 'businessType');
        let newArr = [];
        let newapp = [];
        let newabb = [];
        let aa = [];
        let zz = [];
        Object.keys(arr).map((item, index) => {
          newArr.push(item);
        });
        Object.values(arr).map((item, index) => {
          newapp.push(item);
        });
        newapp.map((item, index) => {
          item.map((item1, index) => {
            newabb.push(item1.root);
          });
        });
        newabb.map((item, index) => {
          aa.push(item);
        });
        aa.map((item, index) => {
          item.map((item1, index) => {
            zz.push({ ...item1 });
          });
        });
        let arrr = formateArrDataA(zz, 'businessType');
        setTableData(arrr);
        if (history.location.state) {
          setPickItem(newArr[history.location.state.rember]);
          setRember(history.location.state.rember);
          setRember1(newArr[history.location.state.rember]);
        } else {
          setPickItem(newArr[rember]);
          setRember1(newArr[0]);
        }
        if (!newArr[rember]) {
          setRember(0);
          setPickItem(newArr[0]);
          setRember1(newArr[0]);
        }
        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 beforeUpload = val => {
    setFile(val);
    const formData = new FormData();
    formData.append('_files', val);
    CheckImportEventConfig(formData).then(res => {
      if (res.code === 0) {
        Modal.confirm({
          title: '提示',
          icon: '',
          content: <div style={{ whiteSpace: 'pre-wrap' }}>{res.data}</div>,
          onOk() {
            console.log('OK');
            ImportEventConfig(formData).then(response => {
              if (response.code === 0) {
                setFlag(flag + 1);
                message.success('导入成功');
              } else {
                message.error(response.msg);
              }
            });
          },
          okText: '确认导入',
          cancelText: '我再想想',
        });
      } else {
        message.error(res.msg);
      }
    });
    return false;
  };
  // 导出
  const hadelExport = record => {
    window.location.href = ExportEventConfig({
      eventTypeId: record.ID,
    });
  };
  const formateArrDataA = (initialArr, 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);
    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();
    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,
        });
      }
    });
  };

  const editBusiness = () => {
    setEditBusinessVisible(true);
    addForm.setFieldsValue({ newBusinessType: pickItem });
  };

  const editOk = () => {
    let aa = addForm.getFieldsValue().newBusinessType;
    CM_Event_EditBusinessType({
      oldBusinessType: pickItem,
      newBusinessType: aa,
    })
      .then(res => {
        if (res.code === 0) {
          setEditBusinessVisible(false);
          setFlag(flag + 1);
          notification.success({
            message: '提示',
            duration: 3,
            description: '编辑成功',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: res.msg || '编辑失败',
          });
        }
      })
      .catch(err => {
        message.error(err);
      });
  };

  // 搜索
  const handleSearch = text => {
    setFlag(flag + 1);
    setShowSearchStyle(true);
  };
  // 搜索框改变时存储输入的值
  const handleChange = e => {
    setSearchValue(e.target.value);
  };

  // 模糊查询匹配的样式
  const searchStyle = val => {
    let n;
    if (showSearchStyle) {
      const escapedSearchValue = searchValue.replace(/\\/g, '\\\\');
      const regex = new RegExp(escapedSearchValue, 'g');
      n = val.replace(
        regex,
        `<span style='color:red'>${searchValue}</span>`
      );
    } else {
      n = val;
    }
    return <div dangerouslySetInnerHTML={{ __html: n }} />;
  };

  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',
                }}
              >
                事件列表
              </span>
              <Tooltip title="添加事件">
                <PlusSquareFilled
                  onClick={() => addIncident()}
                  style={{
                    color: '#1890FF',
                    fontSize: '25px',
                    marginLeft: '123px',
                  }}
                />
              </Tooltip>
              <hr style={{ width: '97%', color: '#eeecec', marginLeft: '0px' }} />
              <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', lineHeight: '50px' }}>
            {pickItem ? (
              <span>
                <span className={styles.titleName}>【{pickItem}】</span>
                <span>
                  <Tooltip title="编辑业务类型名称">
                    <FormOutlined className={styles.iconSize} onClick={editBusiness} />
                  </Tooltip>
                </span>
              </span>
            ) : null}
            <span>
              <span style={{ marginLeft: '20px', marginRight: '5px' }}>快速检索</span>
              <Search
                allowClear
                placeholder="请输入事件类型或事件主表"
                onSearch={handleSearch}
                onChange={handleChange}
                value={searchValue}
                enterButton
                style={{ width: '300px', marginTop: '10px' }}
              />
            </span>
            <span className={styles.buttonList}>
              <Upload showUploadList={false} accept=".json" beforeUpload={beforeUpload}>
                <Button style={{ marginLeft: '10px' }} type="primary" ghost>
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <ImportOutlined style={{ marginRight: '5px' }} />
                    <div>导入</div>
                  </div>
                </Button>
              </Upload>
              <Button
                icon={<OrderedListOutlined className={styles.icon} />}
                onClick={sort}
                style={{
                  marginLeft: '10px',
                  verticalAlign: 'middle',
                }}
              >
                调序
              </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}
        />
        <Modal
          title="编辑业务类型名称"
          visible={editBusinessVisible}
          onCancel={() => setEditBusinessVisible(false)}
          onOk={() => editOk()}
        >
          <Form form={addForm} labelCol={{ span: 3 }}>
            <Form.Item
              name="newBusinessType"
              label="名称"
              rules={[{ required: true, message: '不能为空' }]}
            >
              <Input placeholder="请输入名称" style={{ width: '95%' }} allowClear />
            </Form.Item>
            <Form.Item name="newBusinessType" label="名称" style={{ display: 'none' }}>
              <Input placeholder="请输入名称" style={{ width: '95%' }} />
            </Form.Item>
          </Form>
        </Modal>
      </div>
    </div>
  );
};

export default incident;
