import React, { useState } from 'react';
import { TreeTransfer } from '@zhst/biz';
import { TreeDataNode } from 'antd';
import { TreeProps } from 'antd/lib';
import { boxDataSource } from './mock'

const App: React.FC = () => {
  const [targetItems, setTargetItems] = useState<TreeDataNode[]>([]);
  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);

  const onTreeCheck: TreeProps['onCheck'] = (keys: any, info) => {
    let _targetItems: TreeDataNode[] = []
    setCheckedKeys(keys)
    info.checkedNodes.forEach(o => {
      o.isLeaf && _targetItems.push(o)
    })
    setTargetItems(_targetItems)
  }

  /**
   * 删除
   * @param key
   * @param param1
   */
  const onItemDelete = (key: any, { keys = [] }: any) => {
    setCheckedKeys(pre => {
      const newKeys = pre.filter(_key => _key !== key)
      console.log('newKeys', newKeys, keys)
      return newKeys
    })
    setTargetItems(pre => pre.filter(o => o.key !== key))
  }

  const onOk = (data: any) => {
    console.log('data', data)
  }

  const onReset = () => {
    setCheckedKeys([])
    setTargetItems([])
  }

  return (
    <TreeTransfer
      leftPanelWidth={800}
      rightPanelWidth={500}
      showLeftPanelFooter
      dataSource={boxDataSource}
      targetItems={targetItems}
      checkedKeys={checkedKeys}
      onTreeCheck={onTreeCheck}
      leftPanelFooterRender={(
        <div style={{ padding: '6px', color: 'red' }}>
          自定义脚部dom
        </div>
      )}
      onItemDelete={onItemDelete}
      onOk={onOk}
      onReset={onReset}
      searchInputProps={{
        onChange: e => console.log('123123')
      }}
    />
  )
};

export default App;