import React, { useEffect, useState } from 'react';
import { Modal, Tooltip } from 'antd';
import {
  QuestionCircleOutlined
} from '@ant-design/icons';
import styles from './ChooseTableType.less';

const ChooseTableType = props => {
  const { defalutFields, visible, onCancel, onTableClick } = props;
  const [tableList, setTableList] = useState([]);
  const textObj = {
    '业务类': <div>
      <p>事件工单表：用于事件、工单流程配置，可统一使用事件工单表，调度模型中，事件所用表和流程所用表独立区分；工单模型中，使用同一个即可</p>
      <p>工单表：用于事件、工单流程配置，仅可用于调度模型，事件配置使用事件工单表，流程配置使用工单表。（如果流程配置使用的工单表，则调度模型不可更改为工单模型）</p>
    </div>,
    '台账类': <div>
      <p>台账表：用于资产台账配置，记录资产信息，比如供应商管理、材料管理等</p>
      <p>设备表：用于设备巡检维保系统，设备表不同于物联监控表，这里新建的设备表不具备数据监控功能，可独立于物联平台使用，基于设备表创建的台账，类型为设备，适用场景如水质采样点巡检、车间扫码巡检等</p>
    </div>,
    '反馈类': <div>
      <p>工单反馈表：用于工单流程中的关联表单配置，适用场景如维修材料清单等，与工单深度绑定，关联查询</p>
      <p>设备反馈表：用于设备巡检维保系统中的反馈配置，适用场景如水质采样点巡检反馈表单、扫码巡检反馈表等，记录设备表中设备的维保状态，可基于某个字段值联动发起工单</p>
      <p>GIS反馈表：用于管网巡检系统中的反馈配置，当GIS巡检到位后，可配置进行打卡反馈表单（按需配置），可基于某个字段值联动发起工单</p>
    </div>
  }
  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}
                  <Tooltip placement="top" title={textObj[item]} arrowPointAtCenter>
                    <span className={styles.serchIcon}><QuestionCircleOutlined /></span>
                  </Tooltip>
                </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;
