/* eslint-disable no-shadow */
/* eslint-disable react/jsx-boolean-value */
import React, { useState, useEffect, useRef } from 'react';
import {
  Form,
  Modal,
  Space,
  Table,
  Button,
  Popconfirm,
  Spin,
  notification,
  Tooltip,
  TreeSelect,
  Empty,
  Checkbox,
  Switch,
  Tag,
} from 'antd';
import {
  EditOutlined,
  DeleteOutlined,
  SortDescendingOutlined,
  PlusSquareOutlined,
  RollbackOutlined,
  ConsoleSqlOutlined,
  EyeOutlined,
  ArrowLeftOutlined,
  UploadOutlined,
  SnippetsOutlined,
} from '@ant-design/icons';
import {
  reloadTableFields,
  removeFields,
  loadUnattachedTables,
  LoadLedgers,
} from '@/services/tablemanager/tablemanager';
import { FormDesigner } from 'panda-xform';
import { useHistory } from 'react-router-dom';
import FieldEditor from './fieldEditor';
import AffiliateAdd from '../components/Field/affiliateAdd';
import LoadGroup from '../components/Field/loadGroupNew';
import styles from './index.less';
import clearSvg from '@/assets/font/omsfont/clear.svg';
// import PerviewPrase from './PerviewPrase';
import { LayerSetting } from '@/services/gis/gis';
const AddModal = props => {
  const history = useHistory();
  const [allData, setAllData] = useState([]);
  const [treeData, setTreeData] = useState([]);
  const [keepTreeFirst, setKeepTreeFirst] = useState([]);
  const [tableList, setTableList] = useState([]);
  const [tableData, setTableData] = useState([]);
  const [treeLoading, setTreeLoading] = useState(false);
  const [formObj, setFormObj] = useState('');
  const [formName, setFormName] = useState('');
  const [flag, setFlag] = useState(0); // 弹窗类型
  const [isVisible, setIsVisible] = useState(false); // 弹窗
  const [isType, setIsType] = useState(''); // 弹窗类型
  const [itemData, setItemData] = useState({});
  const [select, setSelect] = useState([]);
  const [selectTableName, setSelectTableName] = useState({});
  const [pramFormObj, setPramFormObj] = useState({});
  const [visible, setVisible] = useState(false); // 弹窗
  const [type, setType] = useState(''); // 弹窗类型
  const [chooseLine, setChooseLine] = useState('');
  const { TreeNode } = TreeSelect;
  const [treeSelectValue, setTreeSelectValue] = useState(undefined);
  const [selectTreeData, setSelectTreeData] = useState([]);
  const [selectDataFirst, setSelectDataFirst] = useState([]);
  const [multiOperate, setMultiOperate] = useState(true); // 是否禁用用户批量操作
  const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 已选字段配置数,机构改变时重置
  const [deleteUserVisible, setDeleteUserVisible] = useState(false); // 批量删除
  const [checkStrictly, setCheckStrictly] = useState(false);
  const [selectGroup, setSelectGroup] = useState([]);
  const [keepStandingBook, setKeepStandingBook] = useState([]);
  const [keepTreeData, setKeepTreeData] = useState([]);
  const [keepTree, setKeepTree] = useState([]); // 保存树字段名称
  const [perviewPrase, setPerViewPrase] = useState(false);
  const [tablesSchema, setTablesSchema] = useState(null); // 存储parseForm组件需要的数据格式

  const formRef = useRef(null);

  const getField = () => {
    loadUnattachedTables().then(res => {
      if (res.data.root && res.data.root.length) {
        setTableList(res.data.root);
      }
    });
  };

  useEffect(() => {
    LoadLedgers().then(res => {
      if (res.code === 0) {
        let data = [];
        res.data.root.map(i => {
          data.push(i.name);
        });
        setKeepStandingBook(res.data.root);
      }
    });
    LayerSetting({ client: 'sandbox' }).then(res => {
      let dataArea = res.data.find(i => i.layerType == 'PipenetLayer');
      console.log(res.data[0]);
      let ss = {
        layers: [dataArea],
      };
      let depart = { OID: 1017, code: '1-1016-1017', name: '管理员' };
      let userInfo = { OID: 1, fullName: '总经理', loginName: 'admin', depart };
      window.globalConfig = {
        ...window.globalConfig,
        mapsettings: ss,
        userInfo,
      };
    });
  }, []);

  useEffect(() => {
    if (props.tableInfo.id) {
      setSelectTreeData(props.tableInfo.keepData);
      setSelectDataFirst(props.tableInfo.keepTreeFirst);
      if (treeSelectValue) {
        let ss = treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@'));
        setFormObj(treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@')));
        setFormName(treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@')));
        reloadTableFields({
          tableName: treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@')),
        }).then(res => {
          setTreeLoading(false);
          if (res.msg === 'Ok') {
            console.log(res.data.root);
            let arrlist = [];
            let data = {};
            let listArr = [];
            res.data.root.map(i => {
              arrlist.push(i.name);
            });
            console.log(arrlist);
            setKeepTree(arrlist);
            data.TableFieldNames = arrlist;
            data.TableName = treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@'));
            listArr.push(data);
            setKeepTreeData(listArr);
            let arr = formateArrDataA(res.data.root, 'group');
            let newArr = [];
            Object.keys(arr).map((item, index) => {
              newArr.push({ type: item, key: index, id: index });
            });
            setAllData(arr);
            let aa = [];
            let bb = [];

            let list = {};
            let arrdata = [];
            let flowNodeMeta = {};
            Object.keys(arr).forEach((item, index) => {
              console.log(arr[item]);
              arr[item].map(i => {
                i.fieldName = i.name;
                i.configInfo = i.config;
                i.presetValue = i.preset == '(无)' ? '' : i.preset;
                i.showCss = props.tableInfo.template.tableStyle;
                i.tableName = ss;
                i.uiGroup = item;
                i.readOnly = i.readOnly == '是' ? 1 : 0;
                i.type = '文本';
                i.visible = 1;
                i.colSpan = i.rowSpan;
              });
              aa.push({ name: item, key: index, ID: index, children: arr[item] });
              arrdata.push({ groupName: item, schema: arr[item], visible: 1 });
              bb.push(item);
            });
            flowNodeMeta.groups = arrdata;
            list.flowNodeMeta = flowNodeMeta;
            list.showCss = props.tableInfo.template.tableStyle;
            console.log(list);

            let tablesSchema = {
              child: {},
              groups: list.flowNodeMeta.groups,
              values: [],
              modules: [],
              relationForm: {},
            };
            setTablesSchema(tablesSchema);

            console.log(arr);
            console.log(newArr);
            setKeepTreeFirst(bb);
            setTreeData(aa);
            setSelectGroup(newArr);
            setTableData(newArr);
            setSelect(newArr);
          }
        });
      } else {
        let ss = props.tableInfo.id;
        setFormObj(props.tableInfo.id);
        setFormName(props.tableInfo.name);
        reloadTableFields({
          tableName: props.tableInfo.id,
        }).then(res => {
          setTreeLoading(false);
          if (res.msg === 'Ok') {
            console.log(res.data.root);
            let result = {};
            // result.
            let arrlist = [];
            let data = {};
            let listArr = [];
            res.data.root.map(i => {
              arrlist.push(i.name);
            });
            console.log(arrlist);
            setKeepTree(arrlist);
            data.TableFieldNames = arrlist;
            data.TableName = props.tableInfo.id;
            listArr.push(data);
            setKeepTreeData(listArr);
            let arr = formateArrDataA(res.data.root, 'group');
            let newArr = [];
            Object.keys(arr).map((item, index) => {
              newArr.push({ type: item, key: index, id: index });
            });
            setAllData(arr);
            let aa = [];
            let bb = [];
            let list = {};
            let arrdata = [];
            let flowNodeMeta = {};
            Object.keys(arr).forEach((item, index) => {
              console.log(arr[item]);
              arr[item].map(i => {
                i.fieldName = i.name;
                i.configInfo = i.config;
                i.presetValue = i.preset == '(无)' ? '' : i.preset;
                i.showCss = props.tableInfo.template.tableStyle;
                i.tableName = ss;
                i.uiGroup = item;
                i.readOnly = i.readOnly == '是' ? 1 : 0;
                i.type = '文本';
                i.visible = 1;
                i.colSpan = i.rowSpan;
              });
              aa.push({ name: item, key: index, ID: index, children: arr[item] });
              arrdata.push({ groupName: item, schema: arr[item], visible: 1 });
              bb.push(item);
            });
            flowNodeMeta.groups = arrdata;
            list.flowNodeMeta = flowNodeMeta;
            list.showCss = props.tableInfo.template.tableStyle;
            console.log(list);

            let tablesSchema = {
              child: {},
              groups: list.flowNodeMeta.groups,
              values: [],
              modules: [],
              relationForm: {},
            };
            setTablesSchema(tablesSchema);
            console.log(aa, 'aaaaaaaaaaaaa');
            console.log(arr);
            console.log(newArr);
            setSelectGroup(newArr);
            setKeepTreeFirst(bb);
            setTreeData(aa);
            setTableData(newArr);
            setSelect(newArr);
          }
        });
      }
      setTreeLoading(true);
      getField();
    }
  }, [flag, props.tableInfo]);

  const formateArrDataA = (initialArr, name) => {
    // 判定传参是否符合规则
    if (!(initialArr instanceof Array)) {
      return '请传入正确格式的数组';
    }
    if (!name) {
      return '请传入对象属性';
    }
    // 先获取一下这个数组中有多少个"name"
    let nameArr = [];
    // eslint-disable-next-line no-restricted-syntax
    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 back = () => {
    console.log(props.tableInfo);
    let {
      template,
      tableScroll,
      keepValue,
      pickIndex,
      groupArr,
      searchValue,
      select,
    } = props.tableInfo;
    console.log(keepValue);
    console.log(pickIndex, groupArr, 'back');
    history.push({
      pathname: '/biz/account/table',
      query: {
        template,
        tableScroll,
        backIndex: pickIndex,
        group: groupArr,
        keepValue,
        searchV: searchValue,
        selectValue: select,
      },
    });
  };

  const treeSelectOnchange = e => {
    console.log(e);
    if (e) {
      setTreeLoading(true);
      console.log('切换');
      setSelectedRowKeys([]);
      setMultiOperate(true);
      setTreeSelectValue(e);
      console.log(e.substring(0, e.lastIndexOf('@')));
      let ss = e.substring(0, e.lastIndexOf('@'));
      setFormObj(e.substring(0, e.lastIndexOf('@')));
      reloadTableFields({
        tableName: e.substring(0, e.lastIndexOf('@')),
      }).then(res => {
        setTreeLoading(false);
        if (res.msg === 'Ok') {
          let arrlist = [];
          let data = {};
          let listArr = [];
          res.data.root.map(i => {
            arrlist.push(i.name);
          });
          console.log(arrlist);
          setKeepTree(arrlist);
          data.TableFieldNames = arrlist;
          data.TableName = e.substring(0, e.lastIndexOf('@'));
          listArr.push(data);
          setKeepTreeData(listArr);
          console.log(res.data.root);
          let arr = formateArrDataA(res.data.root, 'group');
          let newArr = [];
          Object.keys(arr).map((item, index) => {
            newArr.push({ type: item, key: index, id: index });
          });
          setAllData(arr);
          setSelectGroup(newArr);
          setTableData(newArr);
          let aa = [];
          let bb = [];
          let list = {};
          let arrdata = [];
          let flowNodeMeta = {};
          Object.keys(arr).forEach((item, index) => {
            arr[item].map(i => {
              i.fieldName = i.name;
              i.configInfo = i.config;
              i.presetValue = i.preset == '(无)' ? '' : i.preset;
              i.showCss = props.tableInfo.template.tableStyle;
              i.tableName = ss;
              i.uiGroup = item;
              i.readOnly = i.readOnly == '是' ? 1 : 0;
              i.type = '文本';
              i.visible = 1;
              i.colSpan = i.rowSpan;
            });
            aa.push({ name: item, key: index, ID: index, children: arr[item] });
            arrdata.push({ groupName: item, schema: arr[item], visible: 1 });
            bb.push(item);
          });
          flowNodeMeta.groups = arrdata;
          list.flowNodeMeta = flowNodeMeta;
          list.showCss = props.tableInfo.template.tableStyle;
          console.log(list);

          let tablesSchema = {
            child: {},
            groups: list.flowNodeMeta.groups,
            values: [],
            modules: [],
            relationForm: {},
          };
          setTablesSchema(tablesSchema);
          setKeepTreeFirst(bb);
          setTreeData(aa);
          setSelect(newArr);
        }
      });
    } else {
      setTreeSelectValue('');
    }
  };
  const mapTree = org => {
    const haveChildren = Array.isArray(org.children) && org.children.length > 0;
    return haveChildren ? (
      <TreeNode value={org.name} title={org.name} disabled>
        {org.children.map(item => mapTree(item))}
      </TreeNode>
    ) : (
      <TreeNode
        value={`${org.tableName}@${org.groupName}|${org.tableID}`}
        title={org.tableName}
        key={`${org.tableName}@${org.groupName}|${org.tableID}`}
      />
    );
  };

  // 附加
  const add = record => {
    if (treeSelectValue) {
      selectTreeData.map(i => {
        i.children.map(j => {
          if (j.tableName == treeSelectValue.substring(0, treeSelectValue.lastIndexOf('@'))) {
            setPramFormObj(j);
          }
        });
      });
    } else {
      setPramFormObj(props.tableInfo.template);
    }
    setType('affiliateAdd');
    setVisible(true);
  };

  const onSubmit = prop => {
    setVisible(false);
    setFlag(flag + 1);
  };
  return (
    <Modal
      title={
        <div className={styles.config}>
          {/* <ArrowLeftOutlined onClick={back} className={styles.goBack} /> */}
          <div className={styles.title}> 展示名称 【{formName}】</div>
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            {/* <div style={{ lineHeight: '32px', marginRight: '5px' }}>快速切换表:</div>
          <div style={{ width: '350px', marginRight: '10px' }}>
            <TreeSelect
              showSearch
              style={{ width: '100%' }}
              value={treeSelectValue}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              placeholder="请选择表名 "
              allowClear
              treeDefaultExpandAll
              showCheckedStrategy
              onChange={treeSelectOnchange}
            >
              {selectTreeData ? (
                selectTreeData.map(i => mapTree(i))
              ) : (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
              )}
            </TreeSelect>
          </div> */}
            <div className={styles.btn}>
              <Button
                type="primary"
                icon={<SnippetsOutlined />}
                ghost
                onClick={() => formRef.current.initLayout()}
              >
                一键布局
              </Button>
              <Button
                type="primary"
                // icon={<PlusSquareOutlined />}
                ghost
                onClick={() => formRef.current.clear()}
                style={{ marginLeft: '10px' }}
              >
                <img src={clearSvg} style={{ marginRight: '6px' }} alt="" />
                清空
              </Button>
              <Button
                type="primary"
                ghost
                icon={<EyeOutlined />}
                onClick={() => formRef.current.preview()}
                style={{ marginLeft: '10px' }}
              >
                预览
              </Button>
              <Button
                type="primary"
                icon={<UploadOutlined />}
                onClick={() => formRef.current.submit()}
                style={{ marginLeft: '10px' }}
              >
                提交
              </Button>
              {/* <Button type="primary" icon={<PlusSquareOutlined />} onClick={add}>
              附加
            </Button> */}
              {/* <Button
              type="primary"
              icon={<RollbackOutlined />}
              onClick={back}
              style={{ marginLeft: '30px' }}
            >
              返回
            </Button> */}
            </div>
          </div>
        </div>
      }
      visible={props.fieldConfigShow}
      // onOk={getNewGroup}
      onCancel={() => props.setFieldConfigShow(false)}
      footer={null}
      width="100vw"
      style={{
        maxWidth: '100vw',
        top: 0,
        paddingBottom: 0,
      }}
      bodyStyle={{
        height: 'calc(100vh - 55px)',
      }}
      getContainer={false}
    >
      {/* <Spin tip="loading..." spinning={treeLoading}> */}
      <div className={styles.containerBox}>
        <div style={{ width: '100%', height: 'calc(100% - 63px)', padding: '10px' }}>
          {formObj && <FormDesigner ref={formRef} tableName={formObj} />}
        </div>
      </div>
      {/* </Spin> */}
      {visible && type === 'affiliateAdd' && (
        <AffiliateAdd
          visible={visible}
          tableList={tableList}
          type={type}
          onCancel={() => setVisible(false)}
          callBackSubmit={onSubmit}
          formObj={pramFormObj}
        />
      )}
    </Modal>
  );
};
export default AddModal;