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 => {
                  if (!ele.hidden) {
                    return (
                      <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;
