import React, { useEffect, useState } from 'react';
import { Input } from 'antd';
import { KCIMTable } from '@/components/KCIMTable';
import { createFromIconfontCN } from '@ant-design/icons';
import { getCheckData } from '../checkGroupMana/service';
import { getData } from '@/pages/setting/qualitativeOptionsMana/service';
import { ModalForm } from '@ant-design/pro-components';

// import './style.less';

interface TableSelecterProps {
  tableSelecterColumn: any[];
  record: any;
}

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

const TableSelecter = ({
  tableSelecterColumn,
  record,
  open,
  title,
  onVisibleChange,
  rowKey = 'id',
  request,
  onFinish,
}: {
  tableSelecterColumn: any[];
  record: any;
  open: boolean;
  title: string;
  onVisibleChange: (bool: boolean) => void;
  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 onSelectChange = (
      newSelectedRowKeys: React.Key[],
      selectedRows: any,
    ) => {
      setSelectedKeys([...newSelectedRowKeys]);
    };

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

    return (
      <div>
        <Input
          placeholder={'请输入项目名称'}
          allowClear
          autoComplete="off"
          suffix={<IconFont style={{ color: '#99A6BF' }} type="iconsousuo" />}
          style={{ marginBottom: 8 }}
          onChange={(e) => {
            if (e.target.value.length != 0) {
              const result = datasource.filter(
                (item) => item.indicatorName.indexOf(e.target.value) != -1,
              );
              set_showList(result);
            } else {
              set_showList(datasource);
            }
          }}
        />
        <KCIMTable
          columns={tableSelecterColumn}
          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}
          request={request ? async (params) => request(params) : undefined}
        />
        <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}
        tableSelecterColumn={tableSelecterColumn}
      ></Table>
    </ModalForm>
  );
};

export default TableSelecter;
