/* eslint-disable no-else-return */
/* eslint-disable prettier/prettier */
/* eslint-disable indent */
/* eslint-disable no-unused-expressions */
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 AddGIS from './AddGIS';
import { GetFlowNodeDataSource } from '@/services/flow/flow';

const ConfigGIS = (props, ref) => {
  const { editMsg, nodeChage, flowID } = props;

  const [viewModal, setViewModal] = useState(false); // GIS配置新政编辑模态框
  const [modalType, setModalType] = useState(''); // 模态框是编辑还是修改的状态
  const [viewMsg, setviewMsg] = useState({}); // 保存编辑的信息
  const [flag, setFlag] = useState(0);
  const tableData = useRef([]); // GIS配置对应的回显的表格
  const [tableField, setTableField] = useState([]);
  const jsonData = [
    {
      BackfillType: 'GIS',
      RuleName: 'dwe',
      Config: {
        type: 'GIS',
        mapping: [
          {
            fromData: {
              tableName: '事件_隐患整改事件表',
              filed: '上报站点',
            },
            toData: [
              {
                filed: '工程名称',
                mapServer: 'wlgcs',
                tableName: '阀门',
              },
            ],
          },
        ],
      },
    },
    {
      BackfillType: 'GIS',
      RuleName: 'eeef',
      Config: {
        type: 'GIS',
        mapping: [
          {
            fromData: {
              tableName: '事件_隐患整改事件表',
              filed: '上报人名称',
            },
            toData: [
              {
                filed: '分组类型',
                mapServer: 'wlgcs',
                tableName: '水质监测点',
              },
              {
                filed: '编号',
                mapServer: 'wlgcs',
                tableName: '测压点',
              },
            ],
          },
        ],
      },
    },
  ];
  useEffect(() => {
    tableData.current = [];
    // tableData.current = editMsg.FlowNodeBackfillConfigs?.map((item, index) => {
    //   return {
    //     ...item,
    //     key: index,
    //     ID: index,
    //   };
    // });
    tableData.current = editMsg.FlowNodeBackfillConfigs?.map((item, index) => {
      let obj = {};
      if (item.Config) {
        let newConfig = JSON.parse(item.Config);
        if (newConfig.mapping) {
          let users = [];
          newConfig.mapping[0].toData.map((x, y) => {
            obj[y] = { nodeName: x.tableName, nodeValue: x.filed };
          });
          obj.Fields = newConfig.mapping[0].fromData.filed;
          obj.ID = index;
          obj.RuleName = item.RuleName;
          obj.TableName = newConfig.mapping[0].fromData.tableName;
          obj.tableShape = newConfig.mapping[0].fromData.filedShape;
          obj.key = index;
          obj.nodeName1 = newConfig.mapping[0].toData[0].tableName;
          obj.nodeValue1 = newConfig.mapping[0].toData[0].filed;
          obj.schemeName = newConfig.mapping[0].toData[0].mapServer;
          obj.tableType = 'mapping';
          if (newConfig.mapping[0].toData.length > 1) {
            newConfig.mapping[0].toData.map((i, j) => {
              if (j !== 0) {
                users.push({ nodeName: i.tableName, nodeValue: i.filed });
              }
            });
            obj.users = users;
          }
        } else {
          let users = [];
          newConfig.relationFormMapping[0].toData.map((x, y) => {
            obj[y] = { nodeName: x.tableName, nodeValue: x.filed };
          });
          obj.Fields = newConfig.relationFormMapping[0].fromData.filed;
          obj.ID = index;
          obj.RuleName = item.RuleName;
          obj.TableName = newConfig.relationFormMapping[0].fromData.tableName;
          obj.tableShape = newConfig.relationFormMapping[0].fromData.filedShape;
          obj.key = index;
          obj.nodeName1 = newConfig.relationFormMapping[0].toData[0].tableName;
          obj.nodeValue1 = newConfig.relationFormMapping[0].toData[0].filed;
          obj.schemeName = newConfig.relationFormMapping[0].toData[0].mapServer;
          obj.tableType = 'relationFormMapping';
          if (newConfig.relationFormMapping[0].toData.length > 1) {
            newConfig.relationFormMapping[0].toData.map((i, j) => {
              if (j !== 0) {
                users.push({ nodeName: i.tableName, nodeValue: i.filed });
              }
            });
            obj.users = users;
          }
        }
        return {
          ...obj,
        };
      } else {
        return {
          ...item,
          key: index,
          ID: index,
        };
      }
    });
    setFlag(flag + 1);
    tableFields();
  }, [editMsg]);
  useImperativeHandle(ref, () => ({
    getParmar,
  }));
  const getParmar = () => ({ FlowNodeBackfillConfigs: tableData.current });

  const tableFields = () => {
    GetFlowNodeDataSource({
      flowId: flowID,
    }).then(res => {
      if (res.code === 0) {
        res.data.FromData.map(i => {
          i.type = '事件工单表';
          i.TableFields.map(j => {
            j.table = i.TableName;
            j.type = 'mapping';
          });
        });
        res.data.RelationFormData.map(i => {
          i.type = '关联表单';
          i.TableFields.map(j => {
            j.table = i.TableName;
            j.type = 'relationFormMapping';
          });
        });
        let arr = [...res.data.FromData, ...res.data.RelationFormData];
        setTableField(arr);
      }
    });
  };
  // 编辑GIS配置
  const toEdit = val => {
    setViewModal(true);
    setModalType('edit');
    setviewMsg(val);
  };
  // GIS配置确定回调
  const saveView = (val, type, tableType, TableName, tableShape) => {
    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, tableType, TableName, tableShape });
    } else {
      let edtiIndex = list.findIndex(item => item.key === val.key);

      list[edtiIndex] = { ...val, key: newKey, tableType, TableName, tableShape };
    }
    tableData.current = list;
    nodeChage('FlowNodeBackfillConfigs', tableData.current);
    setViewModal(false);
  };
  // 删除GIS配置
  const delRow = record => {
    let list = JSON.parse(JSON.stringify(tableData.current));
    list = list.filter(item => item.key !== record.key);
    list.map((item, index) => {
      item.ID = index;
      item.key = index;
    });
    tableData.current = list;
    nodeChage('FlowNodeBackfillConfigs', tableData.current);
    setFlag(flag + 1);
  };
  // 定义表格
  const columns = [
    {
      title: '规则名称',
      dataIndex: 'RuleName',
      align: 'center',
      render: (text, record) => {
        if (text === '(未配置)' || text === '(无)') {
          return <span style={{ color: 'grey' }}>{text}</span>;
        }
        return <span>{text || record.WebPage}</span>;
      },
    },
    {
      title: '源字段',
      dataIndex: 'Fields',
      align: 'center',
      render: (text, record) => {
        if (text === '(未配置)' || text === '(无)') {
          return <span style={{ color: 'grey' }}>{text}</span>;
        }
        return <span>{text || record.WebPage}</span>;
      },
    },
    {
      title: '操作',
      align: 'center',
      ellipsis: true,
      render: record => (
        <>
          <Space>
            <DeleteOutlined
              onClick={() => delRow(record)}
              style={{ fontSize: '16px', color: '#e86060' }}
            />
          </Space>
        </>
      ),
    },
  ];
  return (
    <div>
      <Divider
        orientation="left"
        style={{
          borderTopColor: '#99bbe8',
          color: '#15428b',
          fontWeight: 700,
        }}
      >
        GIS数据回填
      </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 />}
        >
          新增GIS配置
        </Button>
      </div>
      <Table
        dataSource={tableData.current}
        columns={columns}
        rowKey={record => record.key}
        bordered
        size="small"
        scroll={{ y: 'calc(100vh - 630px)' }}
        onRow={(record, index) => ({
          onDoubleClick: () => {
            toEdit(record, index);
          },
        })}
        pagination={false}
      />
      <AddGIS
        tableData={tableData.current}
        visible={viewModal}
        msg={viewMsg}
        modalType={modalType}
        handleCancel={() => setViewModal(false)}
        onSubumit={saveView}
        tableField={tableField}
        addIndex={tableData.current && tableData.current.length}
      />
    </div>
  );
};

export default forwardRef(ConfigGIS);
