// @ts-ignore
import React, { useEffect, useState } from 'react';
import { SelectCustom, TreeSelectCustom, Option, OptGroup, SHOW_PARENT } from '../index';
import { HomeOutlined } from '@ant-design/icons';
import './index.less';

const Demo = (props) => {
  const onChange = (newValue) => {
    console.log(`selected ${newValue}`);
  };
  const treeData = [
    {
      value: '崇左水厂',
      title: '崇左水厂',
      children: [
        {
          value: '原水泵站',
          title: '原水泵站',
          children: [
            {
              value: '一期原水泵站',
              title: '一期原水泵站',
            },
            {
              value: '二期原水泵站',
              title: '二期原水泵站',
            },
          ],
        },
        {
          value: '沉淀池',
          title: '沉淀池',
          children: [
            {
              value: '一期沉淀池',
              title: '一期沉淀池',
            },
            {
              value: '二期沉淀池',
              title: '二期沉淀池',
            },
          ],
        },
      ],
    },
  ];
  return (
    <TreeSelectCustom
      showSearch
      style={{
        width: '100%',
        marginBottom: '10px',
      }}
      dropdownStyle={{
        maxHeight: 400,
        overflow: 'auto',
      }}
      placeholder="Please select"
      defaultValue={'二期原水泵站'}
      allowClear
      treeDefaultExpandAll
      onChange={onChange}
      treeData={treeData}
    />
  );
};

export default Demo;
