// @ts-ignore
import React, { useEffect, useState } from 'react';
import PandaDeviceTree from '../index';
import request from 'umi-request';

const Demo = () => {
  const [treeData, setTreeData] = useState([]);
  const [expandedKeys, setExpandedKeys] = useState(null);
  const [checkedKeys, setCheckedKeys] = useState([]);
  const [selectedKeys, setSelectedKeys] = useState([]);
  const [autoExpandParent, setAutoExpandParent] = useState(true);

  const fetchData = (params = {}) => {
    // eslint-disable-next-line no-use-before-define
    request(`${baseUrl}/Publish/GCK/Device/DeviceTree`, {
      method: 'post',
      data: {
        pageIndex: 1,
        pageSize: 500,
        deviceTypes: '二供泵房,二供机组',
        getChild: true,
        userID: 1,
        queryInfo: params.queryInfo || '',
        sortFields: '',
        direction: '',
        isTop: true,
      },
    }).then(function (response) {
      // eslint-disable-next-line no-nested-ternary
      const data = response.data
        ? response.data.list && response.data.list.length > 0
          ? response.data.list[0].deviceList
          : []
        : [];
      // eslint-disable-next-line no-use-before-define
      setTreeData(handleData(data));
    });
  };

  const handleData = (data) => {
    // eslint-disable-next-line array-callback-return
    data.map((item) => {
      // eslint-disable-next-line no-param-reassign
      item.title = item.deviceName;
      // eslint-disable-next-line no-param-reassign
      item.key = item.stationID;
      // eslint-disable-next-line no-param-reassign
      item.children = handleData(item.children);
    });
    return data;
  };

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

  const onExpand = (expandedKeysValue) => {
    console.log('onExpand', expandedKeysValue);
    setExpandedKeys(expandedKeysValue);
    setAutoExpandParent(false);
  };

  const onCheck = (checkedKeysValue) => {
    console.log('onCheck', checkedKeysValue);
    setCheckedKeys(checkedKeysValue);
  };

  const onSelect = (selectedKeysValue, info) => {
    console.log('onSelect', info);
    setSelectedKeys(selectedKeysValue);
  };

  const onSearch = (e) => {
    if (e.type == 'keydown') {
      fetchData({ queryInfo: e.target.value });
    }
    console.log(e.type, 'e.type');
    console.log(e.target.value, 'e.target.value');
  };

  return (
    <div style={{ width: '200px', height: '400px', border: '1px solid #eee' }}>
      <PandaDeviceTree
        onSearch={onSearch}
        checkable
        onExpand={onExpand}
        expandedKeys={expandedKeys}
        autoExpandParent={autoExpandParent}
        onCheck={onCheck}
        checkedKeys={checkedKeys}
        onSelect={onSelect}
        selectedKeys={selectedKeys}
        treeData={treeData}
      />
    </div>
  );
};

export default Demo;

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