import { Button, Table } from "antd";
import React, { useCallback, useMemo, useRef, useState } from "react";
import ImageLazy from "../ImageLazy";
import LookModal from "./LookModal";

type Props = {
  data: any;
  y: number;
};

function LookObjTable({ data, y }: Props) {
  const lookIdRef = useRef(-1);

  // 点击表格里面的查看
  const lookGoods = useCallback((id: number) => {
    lookIdRef.current = id;
    setShow(true);
  }, []);

  // 外层表格格式
  const columns = useMemo(() => {
    const tempArr = [
      {
        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",
      },
      {
        title: "完残程度",
        dataIndex: "complete",
      },
      {
        title: "年代",
        dataIndex: "dictAge",
      },
      {
        title: "操作",
        render: (item: any) => (
          <>
            <Button type="text" danger onClick={() => lookGoods(item.id)}>
              查看
            </Button>
          </>
        ),
      },
    ];

    return tempArr;
  }, [lookGoods]);

  // 控制弹窗的显示隐藏
  const [show, setShow] = useState(false);

  return (
    <div>
      <Table
        size="small"
        scroll={{ y }}
        dataSource={data}
        columns={columns}
        rowKey="id"
        pagination={false}
      />
      {/* 点击查看出来的对话框 */}
      {show ? (
        <LookModal
          id={lookIdRef.current}
          show={show}
          closeShow={() => setShow(false)}
        />
      ) : null}
    </div>
  );
}

const MemoLookObjTable = React.memo(LookObjTable);

export default MemoLookObjTable;
