import React, { useEffect, useState } from 'react';
import { Input, Switch } from 'antd';
import { KCIMTable } from '@/components/KCIMTable';
import { createFromIconfontCN } from '@ant-design/icons';
import { getCheckData } from '../checkGroupMana/service';

import { ModalForm, ProColumns } from '@ant-design/pro-components';
// import { getData } from "../empMana/service";

// import './style.less';

interface TableSelecterProps {
  record: any;
}

const IconFont = createFromIconfontCN({
  scriptUrl: '',
});

const TableSelecter = ({
  tableSelecterType,
  record,
  open,
  title,
  onVisibleChange,
  rowKey = 'id',
  request,
  onFinish,
}: {
  record: any;
  open: boolean;
  title: string;
  onVisibleChange: (bool: boolean) => void;
  tableSelecterType: string;
  rowKey?: string;
  request?: (params: any) => Promise<any>;
  onFinish?: (selectedKeys: React.Key[], selectedRows: any[]) => void;
}) => {
  const Table = React.forwardRef(({}: TableSelecterProps, ref) => {
    const [datasource, set_datasource] = useState<any[]>([]);
    const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
    const [selectedRows, set_selectedRows] = useState<any[]>([]);
    const [showList, set_showList] = useState<any[]>([]);

    const empColumns: ProColumns[] = [
      {
        title: 'ID',
        dataIndex: 'id',
      },
      {
        title: '姓名',
        dataIndex: 'name',
      },
    ];
    const checkGroupColumns: ProColumns[] = [
      {
        title: 'ID',
        dataIndex: 'id',
      },
      {
        title: '查核组名',
        dataIndex: 'id',
      },
      {
        title: '是否查核组长',
        dataIndex: 'flag',
        renderText(flag, record, index, action) {
          return (
            <Switch
              size="small"
              checked={flag == '1'}
              onChange={(bool) => onSwitchChange(bool, record)}
            />
          );
        },
      },
    ];

    const onSwitchChange = (bool: boolean, record: any) => {
      const newData = datasource.map((item) => {
        if (item.id == record.id) {
          return {
            ...item,
            flag: bool,
          };
        } else {
          return item;
        }
      });
      const newShowList = showList.map((item) => {
        if (item.id == record.id) {
          return {
            ...item,
            flag: bool,
          };
        } else {
          return item;
        }
      });

      // console.log({newData,newShowList});
      set_datasource([...newData]);
      set_showList([...newShowList]);
    };

    const onSelectChange = (
      newSelectedRowKeys: React.Key[],
      selectedRows: any,
    ) => {
      setSelectedKeys([...newSelectedRowKeys]);
    };

    const saveHandle = async () => {
      onFinish && onFinish(selectedKeys, selectedRows);
    };

    const getTableData = async () => {
      // const resp = await getData({
      //     current: 1,
      //     pageSize: 500
      // });
      // if (resp) {
      //     set_showList(resp.list);
      //     set_datasource([...datasource, ...resp.list]);
      // }

      return Promise.resolve([]);
    };

    useEffect(() => {
      console.log({ record });
    }, [record]);

    useEffect(() => {
      getTableData();
    }, []);

    return (
      <div>
        <Input
          placeholder={'请输入名称'}
          allowClear
          suffix={<IconFont style={{ color: '#99A6BF' }} type="iconsousuo" />}
          style={{ marginBottom: 8 }}
          onChange={(e) => {
            if (e.target.value.length != 0) {
              const result = datasource.filter(
                (item) => item.name.indexOf(e.target.value) != -1,
              );
              set_showList(result);
            } else {
              set_showList(datasource);
            }
          }}
        />
        <KCIMTable
          columns={tableSelecterType == 'EMP' ? empColumns : checkGroupColumns}
          options={{
            density: true,
            setting: {
              listsHeight: 100,
            },
          }}
          rowKey={rowKey}
          scroll={{ y: 400 }}
          tableAlertRender={false}
          rowSelection={{
            // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
            // 注释该行则默认不显示下拉选项
            // selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
            onChange: onSelectChange,
          }}
          pagination={{ showTitle: false, showSizeChanger: true }}
          dataSource={showList}
        />
        <div className="footer">
          <span className="cancel" onClick={() => close()}>
            取消
          </span>
          <span className="ok" onClick={() => saveHandle()}>{`确认(${
            selectedKeys.length > 0 && selectedKeys.length
          })`}</span>
        </div>
      </div>
    );
  });

  const close = () => {
    onVisibleChange && onVisibleChange(false);
  };

  return (
    <ModalForm
      className="TableSelecter"
      title={title}
      width={600}
      submitter={{
        render: false,
      }}
      open={open}
      modalProps={{
        closable: false,
      }}
    >
      <Table
        // ref={tableSelecterRef}
        record={undefined}
      ></Table>
    </ModalForm>
  );
};

export default TableSelecter;
