import React, { useState, useEffect } from 'react';
import {
  Form,
  Modal,
  Space,
  Table,
  Button,
  Popconfirm,
  Spin,
  notification,
  Tooltip,
} from 'antd';
import {
  EditOutlined,
  DeleteOutlined,
  SortDescendingOutlined,
  PlusSquareOutlined,
  RollbackOutlined,
} from '@ant-design/icons';
import {
  reloadTableFields,
  removeFields,
  loadUnattachedTables,
} from '@/services/platform/bs';
import { useHistory } from 'react-router-dom';
import FieldEditor from './fieldEditor';
import styles from './index.less';
import AffiliateAdd from '../bsmanager/tablemanager/components/Field/affiliateAdd';
import LoadGroup from '../bsmanager/tablemanager/components/Field/loadGroupNew';
const AddModal = props => {
  const history = useHistory();
  const [allData, setAllData] = useState([]);
  const [tableList, setTableList] = useState([]);
  const [tableData, setTableData] = useState([]);
  const [treeLoading, setTreeLoading] = useState(false);
  const [formObj, setFormObj] = 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 editor = record => {
    setIsType('edit');
    setIsVisible(true);
    setItemData(record);
  };
  const Submit = prop => {
    setIsVisible(false);
    setFlag(flag + 1);
  };
  const getField = () => {
    loadUnattachedTables().then(res => {
      if (res.data.root && res.data.root.length) {
        setTableList(res.data.root);
      }
    });
  };
  // 处理表格特殊样式
  const styleConfig = record => {
    if (record.Type === 1) {
      return 'red';
    }
    if (record.Type === 2) {
      return 'grey';
    }
    return '000000D9';
  };
  const expandedRowRender = item => {
    const columns = [
      {
        title: '字段名',
        dataIndex: 'name',
        key: 'name',
        width: 190,
        align: 'left',
        render: (text, record) => (
          <div style={{ paddingLeft: '2rem', color: styleConfig(record) }}>
            {text}
          </div>
        ),
      },
      {
        title: '别名',
        dataIndex: 'alias',
        key: 'alias',
        align: 'center',
        width: 200,
        render: (text, record) => (
          <span style={{ color: styleConfig(record) }}>{text} </span>
        ),
      },
      {
        title: '字段类型',
        dataIndex: 'storeType',
        key: 'storeType',
        align: 'center',
        width: 200,
        render: (text, record) => (
          <span style={{ color: styleConfig(record) }}>{text} </span>
        ),
      },
      {
        title: '形态',
        dataIndex: 'shape',
        key: 'shape',
        align: 'center',
        width: 200,
        render: (text, record) => (
          <span style={{ color: styleConfig(record) }}>{text} </span>
        ),
      },
      {
        title: '配置',
        dataIndex: 'config',
        key: 'config',
        align: 'center',
        width: 200,
        render: (text, record) => (
          <span style={{ color: styleConfig(record) }}>{text} </span>
        ),
      },

      {
        title: '只读',
        dataIndex: 'readOnly',
        key: 'readOnly',
        align: 'center',
        width: 200,
        render: (text, record) => (
          <span style={{ color: styleConfig(record) }}>{text} </span>
        ),
      },
      {
        title: '同步',
        dataIndex: 'syncEvent',
        key: 'syncEvent',
        align: 'center',
        width: 200,
        render: (text, record) => (
          <span style={{ color: styleConfig(record) }}>{text} </span>
        ),
      },
      {
        title: '操作',
        width: 250,
        ellipsis: true,
        align: 'center',
        render: (text, record) => (
          <Space>
            <Tooltip title="修改">
              <EditOutlined
                style={{ fontSize: '16px', color: '#1890FF' }}
                onClick={() => {
                  editor(record);
                }}
              >
                编辑
              </EditOutlined>
            </Tooltip>
            <div onClick={e => e.stopPropagation()}>
              <Popconfirm
                title="是否删除该字段？"
                okText="确认"
                cancelText="取消"
                onConfirm={() => {
                  deleteChart(record);
                }}
              >
                <Tooltip title="删除">
                  <DeleteOutlined
                    style={{ fontSize: '16px', color: '#e86060' }}
                  >
                    删除
                  </DeleteOutlined>
                </Tooltip>
              </Popconfirm>
            </div>
          </Space>
        ),
      },
    ];

    return (
      <Table
        columns={columns}
        onRow={record => ({
          onDoubleClick: event => {
            event.stopPropagation();
            editor(record);
          },
          onClick: event => {
            event.stopPropagation();
            setSelectTableName(record);
          }, // 点击行
        })}
        bordered
        rowClassName={setRowClassName}
        showHeader={false}
        dataSource={allData[item.type]}
        pagination={false}
      />
    );
  };
  const setRowClassName = record =>
    Object.entries(record).toString() ===
    Object.entries(selectTableName).toString()
      ? styles.clickRowStyle
      : '';
  const columns = [
    {
      title: '字段名',
      dataIndex: 'type',
      key: 'type',
      align: 'left',
      width: 150,
      render: text => (
        <a>
          {text}(共{allData[text] ? allData[text].length : ''}条)
        </a>
      ),
    },
    {
      title: '别名',
      dataIndex: 'alias',
      key: 'alias',
      align: 'center',
      width: 200,
    },
    {
      title: '字段类型',
      dataIndex: 'storeType',
      key: 'storeType',
      align: 'center',
      width: 200,
    },
    {
      title: '形态',
      dataIndex: 'shape',
      key: 'shape',
      align: 'center',
      width: 200,
    },
    {
      title: '配置',
      dataIndex: 'config',
      key: 'config',
      align: 'center',
      width: 200,
    },

    {
      title: '只读',
      dataIndex: 'readOnly',
      key: 'readOnly',
      align: 'center',
      width: 200,
    },
    {
      title: '同步',
      dataIndex: 'syncEvent',
      key: 'syncEvent',
      align: 'center',
      width: 200,
    },
    {
      title: '操作',
      width: 250,
      ellipsis: true,
      key: 'title',
      align: 'center',
    },
  ];
  useEffect(() => {
    console.log(props);
    if (props.match.params.id) {
      setFormObj(props.match.params.id);
      setTreeLoading(true);
      reloadTableFields({
        tableName: props.match.params.id,
      }).then(res => {
        setTreeLoading(false);
        if (res.msg === 'Ok') {
          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);
          setTableData(newArr);
          setSelect(newArr);
        }
      });
      getField();
    }
  }, [flag]);
  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 deleteChart = record => {
    removeFields({ fieldIDs: record.ID }).then(res => {
      if (res.msg === 'Ok' || res.msg === '') {
        notification.success({
          message: '提示',
          duration: 3,
          description: '删除成功',
        });
        setFlag(flag + 1);
      } else {
        notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
        });
      }
    });
  };
  // 返回上一级
  const back = () => {
    let { template, tableScroll } = props.location.state;
    history.push({
      pathname: '/bsmanger/base/tablemanger',
      query: {
        template,
        tableScroll,
      },
    });
  };
  const onUnfold = (expanded, record) => {
    const data = [...select];
    let index = data.indexOf(record);
    if (expanded) {
      data.push(record);
    } else {
      data.splice(index, 1);
    }
    setSelect(data);
  };
  // 附加
  const add = record => {
    setPramFormObj(props.location.state.template);
    setType('affiliateAdd');
    setVisible(true);
  };
  // 分组与排序
  const sort = record => {
    setPramFormObj(props.location.state.template);
    setType('sort');
    setVisible(true);
  };
  const onSubmit = prop => {
    setVisible(false);
    setFlag(flag + 1);
  };
  return (
    <>
      <Spin tip="loading..." spinning={treeLoading}>
        <div className={styles.containerBox}>
          <div className={styles.config}>
            <div className={styles.title}>{formObj}(字段配置)</div>
            <div className={styles.btn}>
              <Button
                type="primary"
                icon={<PlusSquareOutlined />}
                onClick={add}
              >
                附加
              </Button>
              <Button
                type="primary"
                icon={<SortDescendingOutlined />}
                onClick={sort}
              >
                分组排序
              </Button>
              <Button type="primary" icon={<RollbackOutlined />} onClick={back}>
                返回
              </Button>
            </div>
          </div>

          <Table
            columns={columns}
            dataSource={tableData}
            expandable={{ expandedRowRender }}
            size="small"
            rowKey="id"
            expandedRowKeys={select.map(item => item.key)} // 展开的行
            expandRowByClick
            defaultExpandAllRows
            pagination={false}
            scroll={{ y: 'calc(100vh - 186px)' }}
            onExpand={onUnfold}
          />
        </div>
      </Spin>
      <FieldEditor
        isVisible={isVisible}
        isType={isType}
        itemData={itemData}
        formObj1={formObj}
        onCancel={() => setIsVisible(false)}
        callBackSubmit={Submit}
      />
      {visible && type === 'affiliateAdd' && (
        <AffiliateAdd
          visible={visible}
          tableList={tableList}
          type={type}
          onCancel={() => setVisible(false)}
          callBackSubmit={onSubmit}
          formObj={pramFormObj}
        />
      )}

      {visible && type === 'sort' && (
        <LoadGroup
          visible={visible}
          type={type}
          formObj={pramFormObj}
          onCancel={() => setVisible(false)}
          callBackSubmit={onSubmit}
        />
      )}
    </>
  );
};
export default AddModal;
