import React, {useEffect, useState} from 'react';
import { Transfer } from 'antd';
import type { TransferDirection } from 'antd/es/transfer';
import {getAbleMember, getMemberPage, getRoleMember} from "@/services/role";
import './memberpage.css'

interface RecordType {
  key: string;
  title: string;
  description: string;
}

const mockData: RecordType[] = Array.from({ length: 20 }).map((_, i) => ({
  key: i.toString(),
  title: `content${i + 1}`,
  description: `description of content${i + 1}`,
}));

const initialTargetKeys = mockData.filter((item) => Number(item.key) > 10).map((item) => item.key);

console.log(initialTargetKeys,'+++++')


//

const MemberPage: React.FC = (props, context) => {

  // key
  const [targetKeys, setTargetKeys] = useState([]);
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);

  const [params,setParams] = useState<ROLE_API.RuleParmes>({
    page: 1,
    page_size: 10
  })

  const [dataSource,setDataSource] = useState()
  const [total, setTotal] = useState<number | undefined>(0)


  const init = () => {

    ( async ()=> {

      let recordData = props?.editInfo

      let {items, total} = await getAbleMember()
      setDataSource(items)
      setTotal(total)

      // 获取角色人员的配置信息
      let msg = await getRoleMember({r_id:recordData.id})
      setTargetKeys(msg?.union_ids || [])
      localStorage.setItem('targetSelectedKeys',JSON.stringify(msg?.union_ids || []))

    })()


  }

  useEffect(() => {
    // 初始化
    init()
  }, []);

// 存储值



  const onChange = (nextTargetKeys: string[], direction: TransferDirection, moveKeys: string[]) => {
    localStorage.setItem('targetSelectedKeys',JSON.stringify(nextTargetKeys))
    setTargetKeys(nextTargetKeys);
  };

  const onSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => {
    setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
  };

  const onScroll = (direction: TransferDirection, e: React.SyntheticEvent<HTMLUListElement>) => {
    console.log('direction:', direction);
    console.log('target:', e.target);
  };

  return (
    <Transfer
        // style={{width: '500px', height: '600px'}}
        // style={{height:'500px'}}
        listStyle={{
          height:'400px'
        }}
      dataSource={dataSource}
      showSearch
      titles={['成员', '目标成员']}
      targetKeys={targetKeys}
      rowKey={(record) => record?.unionId}
      selectedKeys={selectedKeys}
      onChange={onChange}
      onSelectChange={onSelectChange}
      onScroll={onScroll}
      render={(item) => item?.name}
    />
  );
};

export default MemberPage;
