import { Button, Input, Modal, Table } from "antd";
import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import styles from "./index.module.scss";
import { getGoodsListAllAPI } from "@/store/action/object4";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/store";
import ImageLazy from "@/components/ImageLazy";
import "../../Object3/AddObject3/GoodsAll.css";
import { MessageFu } from "@/utils/message";

type Props = {
  colsePage: any;
};
function GoodsAll({ colsePage }: Props) {
  const dispatch = useDispatch();

  // 进页面获取列表
  useEffect(() => {
    dispatch(getGoodsListAllAPI(""));
  }, [dispatch]);

  // 藏品名称
  const [name, setName] = useState("");
  const nameTime = useRef(-1);
  const nameChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      setName(e.target.value);
      clearTimeout(nameTime.current);
      nameTime.current = window.setTimeout(() => {
        dispatch(getGoodsListAllAPI(e.target.value));
      }, 500);
    },
    [dispatch]
  );

  // 有关表格
  const results = useSelector(
    (state: RootState) => state.object4Store.goodsAllList
  );

  // 已经选中的表格数据
  const resultsAc = useSelector(
    (state: RootState) => state.object4Store.goodsTableList
  );

  const columns = useMemo(() => {
    return [
      {
        title: "缩略图",
        render: (item: any) => (
          <ImageLazy width={120} height={70} src={item.thumb} />
        ),
      },
      {
        title: "藏品编号名称",
        dataIndex: "dictNum",
      },
      {
        title: "藏品编号",
        render: (item: any) => (item.num ? item.num : "-"),
      },
      {
        title: "藏品名称",
        dataIndex: "name",
      },
      {
        title: "类别",
        dataIndex: "dictGoodType",
      },
    ];
  }, []);

  // 选中的表格数据
  const [tableSelectList, setTableSelectList] = useState([]);
  // 表格的多选

  const rowSelection = useMemo(() => {
    return {
      onChange: (selectedRowKeys: any, selectedRows: any) => {
        setTableSelectList(selectedRows);
      },
      // 默认选中
      defaultSelectedRowKeys: resultsAc.map((v: any) => v.id),
    };
  }, [resultsAc]);

  // 点击确定
  const btnOkFu = useCallback(() => {
    dispatch({
      type: "object4/getGoodsTableList",
      payload: tableSelectList.map((v: any) => {
        return {
          ...v,
          outLocation: "",
        };
      }),
    });
    MessageFu.success("添加成功!");
    colsePage();
  }, [colsePage, dispatch, tableSelectList]);

  return (
    <div className={styles.GoodsAll}>
      <Modal
        open={true}
        destroyOnClose
        wrapClassName="GoodsAllModel"
        title="添加藏品"
        onCancel={colsePage}
        footer={
          [] // 设置footer为空，去掉 取消 确定默认按钮
        }
      >
        <div className="ObjectAddTit">
          <div className="topSearch">
            <span>藏品名称：</span>
            <Input
              value={name}
              maxLength={10}
              style={{ width: 300 }}
              placeholder="请输入"
              allowClear
              onChange={(e) => nameChange(e)}
            />
          </div>
        </div>
        <div className="tableBox">
          <Table
            size="small"
            scroll={{ y: 500 }}
            rowSelection={{
              type: "checkbox",
              ...rowSelection,
            }}
            dataSource={results}
            columns={columns}
            rowKey="id"
            pagination={false}
          />
        </div>
        <br />
        <div className="moveBtn">
          <Button
            type="primary"
            onClick={btnOkFu}
            disabled={tableSelectList.length === 0}
          >
            提交
          </Button>
        </div>
      </Modal>
    </div>
  );
}

const MemoGoodsAll = React.memo(GoodsAll);

export default MemoGoodsAll;
