import BreadTit from "@/components/BreadTit";
import LookObjTable from "@/components/LookObjTable";
import { RootState } from "@/store";
import {
  auditObject1API,
  getObj1InfoTableAPI2,
  object1infoOutAPI,
} from "@/store/action/object1";
import { statusObj } from "@/utils/dataChange";
import history, { urlParameter } from "@/utils/history";
import { Button, message, Select } from "antd";
import TextArea from "antd/es/input/TextArea";
import React, { useCallback, useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useLocation } from "react-router-dom";
import styles from "./index.module.scss";
const { Option } = Select;

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

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

  const getInfo = useCallback(async () => {
    const id = urlParamRef.current.id;
    const res1 = await object1infoOutAPI(id);
    const res2 = await getObj1InfoTableAPI2(id);
    const info = res1.data;
    info.statusTxt = statusObj[info.status];
    const list = res2.data;
    dispatch({ type: "object1/getLookInfo", payload: { info, list } });
  }, [dispatch]);

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

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

  // 审核结果筛选
  const [value, setValue] = useState(3);
  const valueChangeFu = (val: number) => {
    setValue(val);
  };
  // 审核说明
  const [value2, setValue2] = useState("");

  // 点击确定
  const btnOkFu = async () => {
    const txt = value2.replaceAll(" ", "").replaceAll("\n", "");
    if (txt === "") return message.warning("审核说明不能为空!");
    const res: any = await auditObject1API({
      id: Number(urlParamRef.current.id),
      reason: value2,
      status: value,
    });
    if (res.code === 0) {
      message.success("操作成功!");
      cancelFu();
    }
  };

  return (
    <div className={styles.AuditObject1}>
      <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.num}</div>
            </div>
            <div>
              <div className="one">登记人员：</div>
              <div>{info.creatorName}</div>
            </div>
            <div>
              <div className="one">藏品来源：</div>
              <div>{info.sourceName}</div>
            </div>
          </div>
          <div className="topInfoTex" title="87979">
            <span>登记说明：</span>
            {info.description ? info.description : "-"}
          </div>
        </div>
        <br />
        <div className="topTit">藏品信息</div>

        <div className="goodsInfo">
          {/* 封装的表格信息 */}
          <LookObjTable data={tableList} y={245} />
          <br />
          <div className="inputBox1">
            <div className="inputBoxTit">
              <span>* </span>审核结果：
            </div>
            <Select
              style={{ width: 150 }}
              value={value}
              onChange={(val) => valueChangeFu(val)}
            >
              <Option value={3}>通过</Option>
              <Option value={2}>不通过</Option>
            </Select>
          </div>
          <div className="inputBox1 inputBox2">
            <div className="inputBoxTit">
              <span>* </span>审核说明：
            </div>
            <div className="inputBoxText">
              <TextArea
                value={value2}
                onChange={(e) => setValue2(e.target.value)}
                rows={3}
                placeholder="请输入"
                showCount
                maxLength={255}
              />
            </div>
          </div>
        </div>

        <div className="backBtn">
          <Button onClick={btnOkFu} type="primary">
            提交
          </Button>
          &emsp;
          <Button onClick={cancelFu}>返回</Button>
        </div>
      </div>
    </div>
  );
}

const MemoAuditObject1 = React.memo(AuditObject1);

export default MemoAuditObject1;