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

const Demo = () => {
  const [quotaList, setQuotaList] = useState([]);
  const [selectData, setSelectData] = useState([]);

  const fetchData = () => {
    request(baseUrl + '/Publish/GCK/Device/GetQuotaList', {
      method: 'get',
      params: {
        accountName: '二供泵房',
        addrSchemeID: '',
      },
    })
      .then(function (response) {
        if (response.code == '0') {
          let curData = response.data;
          setQuotaList(curData);
        }
      })
      .catch(function (error) {
        console.log(error);
      });
  };

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

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

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

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

  const onCheckboxChange = ({ selectList }) => {
    setSelectData(selectList);
    console.log(selectList, 'onCheckboxChange');
  };

  const onCancelSelect = ({ selectList }) => {
    setSelectData(selectList);
    console.log(selectList, 'onCancelSelect');
  };

  const onTreeDrop = ({ selectList }) => {
    setSelectData(selectList);
    console.log(selectList, 'onTreeDrop');
  };

  return (
    <PandaQuotaSelect
      buttonProps={{
        icon: <UnorderedListOutlined />,
        children: `指标选择(${selectData.length})`,
      }}
      onModalCancel={onModalCancel}
      onModalOk={onModalOk}
      onModalClose={onModalClose}
      maximum={3}
      dataSource={quotaList}
      selectData={selectData}
      onCheckboxChange={onCheckboxChange}
      onCancelSelect={onCancelSelect}
      onTreeDrop={onTreeDrop}
    />
  );
};

export default Demo;

const baseUrl = 'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api';