// @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 = [
    {
      title: '平台研发部',
      value: '平台研发部',
      key: '0-0',
      children: [
        {
          title: '研发一部',
          value: '研发一部',
          key: '0-0-0',
        },
        {
          title: '研发二部',
          value: '研发二部',
          key: '0-0-1',
        },
        {
          title: '研发三部',
          value: '研发三部',
          key: '0-0-2',
        },
        {
          title: '研发四部',
          value: '研发四部',
          key: '0-0-3',
        },
      ],
    },
    {
      title: '平台实施部',
      value: '平台实施部',
      key: '0-1',
      children: [
        {
          title: '项目管理组',
          value: '项目管理组',
          key: '0-1-0',
        },
        {
          title: '项目支持组',
          value: '项目支持组',
          key: '0-1-1',
        },
      ],
    },
  ];
  return (
    <TreeSelectCustom
      treeData={treeData}
      onChange={onChange}
      treeCheckable={true}
      defaultValue={['研发一部', '研发三部']}
      // showCheckedStrategy SHOW_PARENT
      placeholder="Please select"
      treeDefaultExpandAll
      style={{
        width: '100%',
      }}
    />
  );
};

export default Demo;