import { Tree } from 'antd'
import React, { useState } from 'react'



const treeData = [
  {
    title: '项目台账', key: '项目台账', children: [
      { title: '会签', key: '项目台账-会签' },
      { title: '编辑', key: '项目台账-编辑' },
      { title: '删除', key: '项目台账-删除' },
      {
        title: '开工条件', key: '项目台账-开工条件', children: [
          { title: '新增', key: '项目台账-开工条件-新增' },
          { title: '删除', key: '项目台账-开工条件-删除' },
        ]
      },
    ],
  },
  {
    title: '合同台账', key: '合同台账', children: [
      { title: '新增', key: '合同台账-新增' },
      { title: '删除', key: '合同台账-删除' },
      { title: '工程量', key: '合同台账-工程量' },
      { title: '评价', key: '合同台账-评价' },
    ],
  },
  { title: '承包商台账', key: '承包商台账', },
  { title: '供应商台账', key: '供应商台账', },
];

const MenuSelect: React.FC<{
  value?: string[];
  onChange?: (value: string[]) => void;
}> = ({ value, onChange }) => {
  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
  const [checkedKeys, setCheckedKeys] = useState<React.Key[] | { checked: React.Key[]; halfChecked: React.Key[]; }>([]);
  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);

  const onExpand = (expandedKeysValue: React.Key[]) => {
    console.log('onExpand', expandedKeysValue);
    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.
    setExpandedKeys(expandedKeysValue);
    setAutoExpandParent(false);
  };

  const onCheck = (checked: React.Key[] | { checked: React.Key[]; halfChecked: React.Key[]; }, info: any) => {
    console.log('onCheck', checked);
    setCheckedKeys(checked);
  };

  const onSelect = (selectedKeysValue: React.Key[], info: any) => {
    console.log('onSelect', info);
    setSelectedKeys(selectedKeysValue);
  };

  return (
    <div style={{ border: '1px solid #d9d9d9', padding: 16, height: 300, overflowY: 'auto' }}>
      <Tree
        checkable
        onExpand={onExpand}
        expandedKeys={expandedKeys}
        autoExpandParent={autoExpandParent}
        onCheck={onCheck}
        checkedKeys={checkedKeys}
        onSelect={onSelect}
        selectedKeys={selectedKeys}
        treeData={treeData}
      />
    </div>

  )
}

export default MenuSelect