import React, { useState } from 'react';
import { BoxSelectTree } from '@zhst/biz';
import { Button, Select, TreeProps } from 'antd';
import { FilterOutlined } from '@ant-design/icons';
import { treeData, boxDataSource } from './mock'

const { Option } = Select

const demo = () => {
  const [activeKey, setActiveKey] = useState('1')
  const [searchType, setSearchType] = useState('1')
  const [searchVal, setSearchVal] = useState('')
  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);

  const onTreeCheck: TreeProps['onCheck'] = (keys: any) => {
    setCheckedKeys(keys)
  }

  return (
    <div style={{ border: '1px solid #ccc', width: '340px', minHeight: '900px' }}>
      <BoxSelectTree
        data={activeKey === '1' ? treeData : boxDataSource}
        boxDataSource={boxDataSource}
        onSearch={e => console.log('搜索', e)}
        onItemCheck={onTreeCheck}
        onItemSelect={e => console.log('onItemSelect', e)}
        onTabChange={val => setActiveKey(val)}
        onBoxDelete={data => console.log('盒子删除', data)}
        showOptions={false}
        tabsProps={{
          activeKey,
        }}
        customImport={<Button type="text" icon={<FilterOutlined />} />}
        searchInputProps={{
          addonBefore: (
            <Select
              value={searchType}
              onChange={_type => {
                setSearchType(_type)
                setSearchVal('')
              }}
              style={{ width: '72px' }}
            >
              {[
                { value: '1', label: '盒子' },
                { value: '2', label: '盒子组' }
              ].map(item => (
                <Option value={item.value}>{item.label}</Option>
              ))}
            </Select>
          ),
          onChange: e => setSearchVal(e.target.value),
          value: searchVal
        }}
        treeProps={{
          checkedKeys
        }}
      />
    </div>
  );
};

export default demo;