// @ts-ignore
import React, { useEffect, useState } from 'react';
import request from 'umi-request';
import { UnorderedListOutlined, SearchOutlined } from '@ant-design/icons';
import PandaQuotaSelect from '../index';
import { service } from '@wisdom-utils/utils';
import { getMonitorConf } from '../apis';

const REQUEST_HTTP = 'http';
const REQUEST_METHOD_GET = 'get';
const REQUEST_METHOD_POST = 'post';

const GET_QUOTA_LIST =
  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/Device/GetQuotaList'; //获取指标列表
// '/api/Publish/GCK/Device/GetQuotaList'; //获取指标列表

const GET_DEVICE_CONF =
  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/MonitorConfig/GetMonitorConf'; //根据设备类型、方案名称、用户工号获取对应设备监控配置
// '/api/Publish/GCK/MonitorConfig/GetMonitorConf'; //根据设备类型、方案名称、用户工号获取对应设备监控配置

const UPDATE_DEVICE_CONF =
  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/MonitorConfig/AddOrUpdateMonitorConf'; //添加或修改设备监控配置
// '/api/Publish/GCK/MonitorConfig/AddOrUpdateMonitorConf'; //添加或修改设备监控配置

const quotaSelectService = {
  getQuotaList: {
    url: GET_QUOTA_LIST,
    method: REQUEST_METHOD_GET,
    type: REQUEST_HTTP,
  },
  getDeviceConf: {
    url: GET_DEVICE_CONF,
    method: REQUEST_METHOD_GET,
    type: REQUEST_HTTP,
  },
  updateDeviceConfService: {
    url: UPDATE_DEVICE_CONF,
    method: REQUEST_METHOD_POST,
    type: REQUEST_HTTP,
  },
};

const qsService = service(quotaSelectService);

const getQuotaList = qsService.getQuotaList;
const getDeviceConf = getMonitorConf;
const updateDeviceConfService = qsService.updateDeviceConfService;

const pointType = 'cardPoints';

const Demo = () => {
  const [deviceList, setDeviceList] = useState([]); // 设备列表
  const [confList, setConfList] = useState([]); // 设备配置列表

  const fetchData = () => {
    getDeviceConf({
      user: 'admin',
      showAll: true,
      deviceType: '二供泵房,二供机组',
    })
      .then(function (response) {
        if (response.code == '0') {
          let curData = response.data;
          DeviceList.forEach((item) => {
            curData.forEach((child) => {
              if (item.deviceType === child.deviceType) item.confList = child[pointType].split(',');
            });
          });
          setConfList(curData);
          setDeviceList(DeviceList);
        }
      })
      .catch(function (error) {
        console.log(error);
      });
  };

  useEffect(() => {
    fetchData();
  }, []);

  const onModalOk = () => {
    console.log('onModalOk');
  };

  const onModalClose = () => {
    console.log('onModalClose');
  };

  const onModalCancel = () => {
    console.log('onModalCancel');
  };

  const onSelect = ({ device, selectKey, selectList }) => {
    let list = [...deviceList];
    list.forEach((child) => {
      if (child.stationID === device.stationID) {
        child.confList = selectKey;
      }
    });
    setDeviceList(list);
  };

  return (
    <>
      <h3>无 user, 无“保存修改”按钮</h3>
      <PandaQuotaSelect
        buttonProps={{}}
        showQuotaName={true}
        // defaultSelect={'all'}
        deviceList={deviceList}
        pointType={pointType}
        onSelect={onSelect}
        // onModalCancel={onModalCancel}
        // onModalOk={onModalOk}
        // onModalClose={onModalClose}
        maximum={5}
      />
      <br />
      <h3>带 user, 有“保存修改”按钮</h3>
      <PandaQuotaSelect
        buttonProps={{}}
        deviceList={deviceList}
        confList={confList}
        pointType={pointType}
        onSelect={onSelect}
        onModalCancel={onModalCancel}
        onModalOk={onModalOk}
        onModalClose={onModalClose}
        maximum={5}
        user={'admin'}
      />
    </>
  );
};

export default Demo;

const DeviceList = [
  {
    deviceName: '001东北明珠',
    shortName: '001东北明珠',
    code: 'EGBF00000001',
    fatherCode: null,
    deviceType: '二供泵房',
    entryTime: '2020-03-29 04:20:49',
    deviceGroup: '箱式变频',
    pointAddressID: 4,
    children: [],
    stationID: 27,
  },
  {
    deviceName: '低区',
    shortName: '低区',
    code: 'EGJZ00000162',
    fatherCode: 'EGBF00000001',
    deviceType: '二供机组',
    entryTime: '2020-03-29 04:20:49',
    deviceGroup: '箱式变频',
    pointAddressID: 30,
    children: [],
    stationID: 28,
  },
  {
    deviceName: '002世元国际',
    shortName: '002世元国际',
    code: 'EGBF00000002',
    fatherCode: null,
    deviceType: '二供机组',
    entryTime: '2020-03-29 04:24:19',
    deviceGroup: '智慧标准泵房',
    pointAddressID: 4,
    children: [],
    stationID: 29,
  },
];
