import BreadTit from "@/components/BreadTit";
import ImageLazy from "@/components/ImageLazy";
import LookModal from "@/components/LookObjTable/LookModal";
import { RootState } from "@/store";
import { object5infoOutAPI } from "@/store/action/object5";
import { goodsChangeObj, statusObj } from "@/utils/dataChange";
import history, { urlParameter } from "@/utils/history";
import { Button, Table } from "antd";
import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { useDispatch, useSelector } from "react-redux";
import { useLocation } from "react-router-dom";
import styles from "./index.module.scss";

function LookObject5() {
  const dispatch = useDispatch();

  // 获取地址栏参数
  const location = useLocation();
  const urlParamRef = useRef<any>({});
  useEffect(() => {
    urlParamRef.current = urlParameter(location.search);
    // console.log("地址栏参数", urlParamRef.current);
  }, [location]);

  const { info, list: tableList } = useSelector(
    (state: RootState) => state.object5Store.lookInfo
  );

  const getInfo = useCallback(async () => {
    const id = urlParamRef.current.id;
    const res = await object5infoOutAPI(id);
    const info = res.data;

    // 表格信息的整理
    const list = [] as any;
    const oldData = JSON.parse(res.data.before_json);
    const newData = JSON.parse(res.data.after_json);
    console.log(123, oldData, newData);

    for (const k in newData) {
      if (k !== "fileIds" && k !== "fileIdsName") {
        if (k === "size") {
          const oldValArr = oldData[k].split(",");
          const newValArr = oldData[k].split(",");
          list.push({
            label: goodsChangeObj[k],
            oldVal: `通长:${oldValArr[0]}cm，通宽:${oldValArr[1]}cm，通高:${oldValArr[2]}cm`,
            newVal: `通长:${newValArr[0]}cm，通宽:${newValArr[1]}cm，通高:${newValArr[2]}cm`,
          });
        } else if (k === "display") {
          list.push({
            label: goodsChangeObj[k],
            oldVal: oldData[k] === 1 ? "是" : "否",
            newVal: newData[k] === 1 ? "是" : "否",
          });
        } else {
          list.push({
            label: goodsChangeObj[k],
            oldVal: oldData[k],
            newVal: newData[k],
          });
        }
      } else if (k === "fileIdsName") {
        list.push({
          label: "附件信息",
          oldVal: oldData[k],
          newVal: newData[k],
        });
      }
    }
    info.statusTxt = statusObj[info.status];
    dispatch({ type: "object5/getLookInfo", payload: { info, list } });
  }, [dispatch]);

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

  // 控制弹窗的显示隐藏
  const [show, setShow] = useState(false);
  // 点击表格里面的查看
  const lookIdRef = useRef(-1);

  const lookGoods = useCallback((id: number) => {
    lookIdRef.current = id;
    setShow(true);
  }, []);

  // 点击返回
  const cancelFu = useCallback(() => {
    history.push({
      pathname: `/object/5`,
      state: {
        k: urlParamRef.current.k ? urlParamRef.current.k : "1",
        d: urlParamRef.current.d,
      },
    });
  }, []);

  // 表格格式
  const columns = useMemo(() => {
    const tempArr = [
      {
        title: "修改内容",
        dataIndex: "label",
      },
      {
        title: "修改前",
        render: (item: any) => {
          return item.label === "藏品图片" && item.oldVal ? (
            <ImageLazy width={120} height={70} src={item.oldVal} />
          ) : item.oldVal ? (
            item.oldVal
          ) : (
            "-"
          );
        },
      },
      {
        title: "修改后",
        render: (item: any) => {
          return item.label === "藏品图片" && item.newVal ? (
            <ImageLazy width={120} height={70} src={item.newVal} />
          ) : item.newVal ? (
            item.newVal
          ) : (
            "-"
          );
        },
      },
    ];

    return tempArr;
  }, []);

  return (
    <div className={styles.LookObject5}>
      <div className="breadTit">
        <BreadTit>
          <div className="breadTitRow">藏品修改</div>
          <div className="splitStr">/</div>
          <div className="breadTitRow active">查看</div>
        </BreadTit>
      </div>
      <div className="objectSonMain">
        <div className="topTit">修改信息</div>
        <div className="topInfo">
          <div className="topInfoRow">
            <div>
              <div className="one">藏品名称：</div>
              <div>{info.name}</div>
            </div>
            <div>
              <div className="one">藏品编号：</div>
              <div>{info.dictNum}</div>
            </div>
          </div>
          <div className="topInfoRow">
            <div>
              <div className="one">登记人员：</div>
              <div>{info.creatorName}</div>
            </div>
            <div>
              <div className="one">创建日期：</div>
              <div>{info.create_time}</div>
            </div>
          </div>
          <div className="topInfoTex">
            <span>审核结果：</span>
            {info.statusTxt}
          </div>
          <div className="topInfoTex" title={info.reason}>
            <span>审核说明：</span>
            {info.reason ? info.reason : "-"}
          </div>
        </div>
        <br />
        <div className="topTit topTit2">
          修改记录
          <div className="titBtn">
            <Button onClick={() => lookGoods(info.goods_ids)}>查看</Button>
          </div>
        </div>
        <div className="goodsInfo">
          {/* 表格信息 */}
          <Table
            size="small"
            scroll={{ y: 340 }}
            dataSource={tableList}
            columns={columns}
            rowKey="label"
            pagination={false}
          />
        </div>
        <div className="backBtn">
          <Button onClick={cancelFu}>返回</Button>
        </div>
      </div>
      {/* 点击查看出来的对话框 */}
      {show ? (
        <LookModal
          id={lookIdRef.current}
          show={show}
          closeShow={() => setShow(false)}
        />
      ) : null}
    </div>
  );
}

const MemoLookObject5 = React.memo(LookObject5);

export default MemoLookObject5;