import React, { useEffect, useState } from 'react';
import { Modal, Tooltip } from 'antd';
import styles from './ChooseTableType.less';

const ChooseTableType = props => {
  const { defalutFields, visible, onCancel, onTableClick } = props;
  const [tableList, setTableList] = useState([]);
  useEffect(() => {
    if (visible) {
      let list = new Map([]);
      defalutFields.forEach(item => {
        let groupChildren = list.get(item.groupName) || [];
        list.set(item.groupName, [...groupChildren, item]);
      });
      setTableList(Object.fromEntries(list.entries()));
    }
  }, [visible]);
  const onFinish = () => {};
  const createTable = val => {
    console.log(val);
    onCancel();
    onTableClick(val);
  };
  return (
    <div>
      <Modal
        visible={visible}
        title="选择表模型"
        width="400px"
        onOk={onFinish}
        onCancel={onCancel}
        maskClosable={false}
        footer={[]}
        destroyOnClose
        centered
      >
        <div className={styles.content}>
          {Object.keys(tableList).map(item => (
            <div className={styles.groupBox} key={item}>
              <div className={styles.headerBox}>
                <div className={styles.line} />
                <div className={styles.groupName}>{item}</div>
              </div>
              <div className={styles.tableContent}>
                {tableList[item].map(ele => (
                  <div
                    className={styles.tableBox}
                    key={ele.value}
                    onClick={() => createTable(ele.value)}
                  >
                    <div className={styles.imgBox}>
                      <img src={`${window.location.origin}/civmanage/${ele.icon}`} alt="" />
                    </div>
                    <div className={styles.title}>{ele.value}</div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </Modal>
    </div>
  );
};

export default ChooseTableType;
