import { Button, Modal, Select, Table } from "antd";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import ImageLazy from "../ImageLazy";
import "./index.css";
import classNames from "classnames";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/store";
import { getInfoInAPI } from "@/store/action/object1";

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

function LookObjTable({ data, y }: Props) {
  const dispatch = useDispatch();

  // 点击表格里面的查看
  const lookGoods = useCallback(
    async (id: number) => {
      const res = await getInfoInAPI(id);
      const info = res.data.entity;
      const fileList = {
        img: [],
        video: [],
        audio: [],
        model: [],
        doc: [],
      } as any;
      res.data.file.forEach((v: any) => {
        fileList[v.type].push(v);
      });

      dispatch({
        type: "object1/getOneGoodsInfo",
        payload: { info, fileList },
      });
      setShow(true);
    },
    [dispatch]
  );

  // 外层表格格式
  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);
  // 选择商品信息还是附近（默认商品信息）
  const [titSelect, setTitSelect] = useState("tit1");

  // 附件类型下拉框
  const { info, fileList } = useSelector(
    (state: RootState) => state.objectStore.oneGoodsInfo
  );

  const fileSelectList = useMemo(() => {
    return [
      { id: 1, value: "img", label: "高清图片" },
      { id: 2, value: "video", label: "视频文件" },
      { id: 3, value: "audio", label: "音频文件" },
      { id: 4, value: "model", label: "三维模型" },
      { id: 5, value: "doc", label: "文档资料" },
    ];
  }, []);
  const [fileSelect, setFileSelect] = useState("img");
  const fileSelectChangeFu = (value: string) => {
    setFileSelect(value);
  };

  // 里面表格格式
  const columns2 = useMemo(() => {
    const tempArr = [
      {
        title: "附件名称",
        dataIndex: "name",
      },
      {
        title: "上传时间",
        dataIndex: "createTime",
      },
    ] as any;
    if (fileSelect === "img") {
      tempArr.unshift({
        title: "缩略图",
        render: (item: any) => (
          <ImageLazy width={120} height={70} src={item.filePath} />
        ),
      });
    }
    return tempArr;
  }, [fileSelect]);

  return (
    <div>
      <Table
        size="small"
        scroll={{ y }}
        dataSource={data}
        columns={columns}
        rowKey="id"
        pagination={false}
      />
      {/* 点击查看出来的对话框 */}
      <Modal
        wrapClassName="lookObjTable"
        destroyOnClose
        open={show}
        title="查看藏品"
        onCancel={() => setShow(false)}
        footer={
          [] // 设置footer为空，去掉 取消 确定默认按钮
        }
      >
        {/* 商品信息和附件切换 */}
        <div className="ObjectAddTit">
          <div
            onClick={() => setTitSelect("tit1")}
            className={classNames(titSelect === "tit1" ? "active" : "")}
          >
            藏品信息
          </div>
          <div
            onClick={() => setTitSelect("tit2")}
            className={classNames(
              "ObjectAddTitTow",
              titSelect === "tit2" ? "active" : ""
            )}
          >
            附件
          </div>
        </div>

        {/* 藏品信息 */}
        <div className="goodsInfo" hidden={titSelect !== "tit1"}>
          <div className="row">
            <div>
              <span>藏品名称：</span>
              <p>{info.formRow}</p>
            </div>
            <div>
              <span>原名：</span>
              <p>{info.namePrimitive}</p>
            </div>
          </div>
          <div className="row">
            <div>
              <span>藏品编号名称：</span>
              <p>{info.dictNum}</p>
            </div>
            <div>
              <span>藏品编号：</span>
              <p>{info.num?info.num:'-'}</p>
            </div>
          </div>
          <div className="row">
            <div>
              <span>年代：</span>
              <p>{info.dictAge}</p>
            </div>
            <div>
              <span>文物质地：</span>
              <p>{info.dictTexture}</p>
            </div>
          </div>
          <div className="row">
            <div>
              <span>具体年代：</span>
              <p>{info.ageSpecific?info.ageSpecific:'-'}</p>
            </div>
            <div>
              <span>文物类别：</span>
              <p>{info.dictGoodType}</p>
            </div>
          </div>

          <div className="row">
            <div>
              <span>实际数量：</span>
              <p>{info.pcs}</p>
            </div>
            <div>
              <span>文物级别：</span>
              <p>{info.dictLevel}</p>
            </div>
          </div>
          <div className="rowFull">
            <span>外形尺寸：</span>
            <p>{info.size}</p>
            {/* <p>（通长）66666666&emsp;（通宽）66666666&emsp;（通高）66666666</p> */}
          </div>
          <div className="rowFull">
            <span>具体尺寸：</span>
            <p>{info.sizeSpecific}</p>
          </div>

          <div className="row">
            <div>
              <span>质量范围：</span>
              <p>{info.dictQualityScope}</p>
            </div>
            <div>
              <span>具体质量：</span>
              <p>{info.quality?info.quality:'-'}</p>
            </div>
          </div>

          <div className="row">
            <div>
              <span>完残程度：</span>
              <p>{info.complete}</p>
            </div>
            <div>
              <span>保存状态：</span>
              <p>{info.repair?info.repair:'-'}</p>
            </div>
          </div>

          <div className="row">
            <div>
              <span>入藏时间范围：</span>
              <p>{info.dictCheckInScope}</p>
            </div>
            <div>
              <span>入藏年度：</span>
              <p>{info.checkInYear?info.checkInYear:'-'}</p>
            </div>
          </div>

          <div className="row">
            <div>
              <span>著者：</span>
              <p>{info.author?info.author:'-'}</p>
            </div>
            <div>
              <span>版本：</span>
              <p>{info.vision?info.vision:'-'}</p>
            </div>
          </div>

          <div className="rowFull">
            <span>存卷：</span>
            <p>{info.onFile?info.onFile:'-'}</p>
          </div>
          <div className="rowFull">
            <span>来源说明：</span>
            <p>{info.description?info.description:'-'}</p>
          </div>
        </div>

        <div className="goodsFile" hidden={titSelect !== "tit2"}>
          <div className="row">
            <div className="rowTit">藏品图片：</div>
            <div className="rowRr">
              <ImageLazy width={120} height={120} src={info.thumb} />
            </div>
          </div>

          <div className="row">
            <div className="rowTit">附件类型：</div>
            <div className="rowRr">
              <Select
                style={{ width: 150 }}
                value={fileSelect}
                onChange={fileSelectChangeFu}
                options={fileSelectList}
              />
            </div>
          </div>

          {/* 表格主体 */}
          <Table
            size="small"
            scroll={{ y: 300 }}
            dataSource={fileList[fileSelect]}
            columns={columns2}
            rowKey="id"
            pagination={false}
          />
        </div>

        {/* 确定按钮 */}
        <div className="goodsBtn">
          <Button type="primary" onClick={() => setShow(false)}>
            确定
          </Button>
        </div>
      </Modal>
    </div>
  );
}

const MemoLookObjTable = React.memo(LookObjTable);

export default MemoLookObjTable;
