/*
 * @Author: your name
 * @Date: 2022-01-19 14:53:37
 * @LastEditTime: 2022-07-07 09:20:34
 * @LastEditors: code4eat awesomedema@gmail.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /KC-MiddlePlatform/src/pages/platform/components/usersEditer/index.tsx
 */

import React, { useEffect, useState } from 'react';
import KCTable from '@/components/kcTable';
import { Input,Transfer } from 'antd';
import { getUsers } from '@/service/user';
import type { EditUsersDataType } from '@/service/user';
import { ProColumns } from '@ant-design/pro-table';
import { TableRequestParamsType } from '@/typings';
import './style.less';

import type { TransferDirection } from 'antd/es/transfer';

export interface UserEditerType {
  value?: React.Key[] | React.Key[];
  onChange?: (selectedRowKeys: React.Key[]) => {};
  noAction?: boolean;
  total?:[]
}


const UserEditer: React.FC<UserEditerType> = ({
  value = [],
  onChange,
  noAction = false,
  total = []
}) => {


  
  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
  const [keyword, setKeyword] = useState('');

  const [data, setData] = useState<EditUsersDataType[]>([]);
  const [targetKeys, setTargetKeys] = useState<React.Key[]>([]);

  //record: T, selected: boolean, selectedRows: T[], nativeEvent: Event
  const onSelectHandle = (
    record: EditUsersDataType,
    selected: boolean,
    selectedRows: EditUsersDataType[],
    nativeEvent: Event,
  ) => {
    // console.log({record,selected,selectedRows,nativeEvent});
    if (selected) {
      //保证每次选择能够保留之前选中的
      setSelectedKeys([...selectedKeys, record.id]);
    } else {
      const _selectedKeys = selectedKeys.filter((t) => t != record.id);
      setSelectedKeys([..._selectedKeys]);
    }
  };


  const onChangeHandle = (
    selectedRowKeys: React.Key[],
    selectedRows: any[],
  ) => {
    if (selectedRows.length == 0) {
      //取消选择时
      setSelectedKeys([]);
    }
  };

  const onSearchHandle = (
    e: React.ChangeEvent & { target: { value: string } },
  ) => {
    setKeyword(e.target.value);
  };



  const filterOption = (inputValue: string, option: EditUsersDataType) =>
  option.name&&option.name.indexOf(inputValue) > -1;

  const handleChange = (newTargetKeys: string[]) => {
    setTargetKeys(newTargetKeys);
    onChange&&onChange(newTargetKeys);
  };

  const handleSearch = (dir: TransferDirection, value: string) => {
   
  };




  useEffect(() => {
    onChange && onChange(selectedKeys);
  }, [selectedKeys]);

  useEffect(() => {
   setTargetKeys(value);
   setData(total)

  }, []);

  return (
    <div className="UserEditer">

      
    <Transfer
      dataSource={data}
      showSearch
      pagination={{pageSize:20}}
      rowKey={record => `${record.id}`}
      showSelectAll={true}
      // filterOption={filterOption}
      targetKeys={targetKeys as string[]}
      onChange={handleChange}
      onSearch={handleSearch}
      render={item => item.name?item.name:''}
    />



      {/* <div className="search">
        <span className="label">搜索人员：</span>
        <Input
          className="valueArea"
          onChange={onSearchHandle}
          allowClear={true}
          placeholder="请输入姓名、工号"
        />
      </div>
      <KCTable
        rowKey="id"
        columns={columns.filter((t) => (noAction ? t.title != '操作' : t))}
        request={getData}
        params={{ keyword: keyword }}
        options={false}
        search={false}
        rowSelection={{
          checkStrictly: false,
          selectedRowKeys: selectedKeys,
          onChange: onChangeHandle,
          onSelect: onSelectHandle,
        }}
      /> */}
    </div>
  );
};

export default UserEditer;
