import AuthButton from "@/components/AuthButton";
import BreadTit from "@/components/BreadTit";
import ImageLazy from "@/components/ImageLazy";
import ObjectAdd from "@/components/ObjectAdd";
import { RootState } from "@/store";
import history, { urlParameter } from "@/utils/history";
import { Button, Cascader, Modal, Select, 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";
import "./index.css";
import LookObject2Log from "./table";
function LookObject2() {
  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/2`,
      state: { k: urlParamRef.current.k ? urlParamRef.current.k : "1" },
    });
  };

  // 附件类型下拉框

  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 results = useSelector((state: RootState) => state.loginStore.fileData);
  useEffect(() => {
    dispatch({
      type: "login/setFileData",
      payload: {
        img: [
          {
            id: 1,
            name: "图片1",
            time: "2022-12-13",
            img: "https://ts1.cn.mm.bing.net/th/id/R-C.6d2d3fecd79a96e43d1a410640d7199b?rik=B7RCgF82Vb7P0A&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20190831%2f3e03e9c2473c40b180aa99a37c0589fa.jpeg&ehk=JXdgMrjnolHlMkdX9N0K7%2fzBc9wi7FSFDjSGclreQbI%3d&risl=&pid=ImgRaw&r=0",
          },
          {
            id: 2,
            name: "图片2",
            time: "2022-12-14",
            img: "",
          },
          {
            id: 3,
            name: "图片3",
            time: "2022-12-14",
            img: "",
          },
        ],
        video: [
          {
            id: 4,
            name: "视频1",
            time: "2022-12-14",
            img: "",
          },
        ],
        audio: [],
      },
    });
  }, [dispatch]);

  // 里面表格格式
  const columns = useMemo(() => {
    const tempArr = [
      {
        title: "附件名称",
        dataIndex: "name",
      },
      {
        title: "上传人",
        dataIndex: "time",
      },

      {
        title: "上传时间",
        dataIndex: "time",
      },
      {
        title: "操作",
        render: (item: any) => (
          <a
            target="_blank"
            href="https://ts1.cn.mm.bing.net/th/id/R-C.6d2d3fecd79a96e43d1a410640d7199b?rik=B7RCgF82Vb7P0A&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20190831%2f3e03e9c2473c40b180aa99a37c0589fa.jpeg&ehk=JXdgMrjnolHlMkdX9N0K7%2fzBc9wi7FSFDjSGclreQbI%3d&risl=&pid=ImgRaw&r=0"
            download
            rel="noreferrer"
          >
            下载
          </a>
        ),
      },
    ] as any;
    if (fileSelect === "img") {
      tempArr.unshift({
        title: "缩略图",
        render: (item: any) => (
          <ImageLazy width={80} height={50} src={item.img} />
        ),
      });
    }
    return tempArr;
  }, [fileSelect]);

  // 关于  申请编辑  申请移库  操作记录
  const [titCut, setTitCut] = useState("");

  const titCutFu = useCallback((val: string) => {
    setTitCut(val);
  }, []);

  // 移库
  const moveOptions = [
    {
      name: "库房1",
      label: "库房1",
      children: [
        {
          name: "房子1",
          label: "房子1",
          children: [{ name: "格子1", label: "格子1" }],
        },
        {
          name: "房子0",
          label: "房子0",
          children: [{ name: "格子0", label: "格子0" }],
        },
      ],
    },
    {
      name: "库房2",
      label: "库房2",
      children: [
        {
          name: "房子2",
          label: "房子2",
          children: [{ name: "格子2", label: "格子2" }],
        },
      ],
    },
  ];
  const [moveLoc, setMoveLoc] = useState(["库房1", "格子1", "房子1"]);
  const moveLocChangeFu = (val: any) => {
    setMoveLoc(val);
  };

  const moveBtnOk = () => {
    console.log("移库点击提交", moveLoc);
  };

  return (
    <div className={styles.LookObject2}>
      <div className="breadTit">
        <BreadTit>
          <div className="breadTitRow">藏品总账</div>
          <div className="splitStr">/</div>
          <div className="breadTitRow active">查看</div>
        </BreadTit>
      </div>
      <div className="objectSonMain">
        {/* 上面的信息 */}
        <div className="topInfoBox">
          <div className="topInfoBoxL">
            <ImageLazy
              src="http://project.4dage.com:8016/content/1_1001/img/20220810_1553241331042.JPG"
              width={300}
              height={300}
            />
          </div>
          <div className="topInfoBoxR">
            <div className="topInfoBoxRTit">
              <div>
                <h1>陶瓷花瓶</h1>
                <div className="bs">已入库</div>
              </div>
              <div>
                <AuthButton
                  size="small"
                  type="primary"
                  onClick={() => titCutFu("1")}
                >
                  申请编辑
                </AuthButton>
                &emsp;
                <AuthButton
                  size="small"
                  type="primary"
                  onClick={() => titCutFu("2")}
                >
                  申请移库
                </AuthButton>
                &emsp;
                <AuthButton size="small" onClick={() => titCutFu("3")}>
                  操作记录
                </AuthButton>
              </div>
            </div>
            <div className="topInfoBoxRTxt">
              <div className="row">
                <div>
                  <span>藏品名称：</span>
                  <p>
                    阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松
                  </p>
                </div>
                <div>
                  <span>原名：</span>
                  <p>666666666</p>
                </div>
              </div>
              <div className="row">
                <div>
                  <span>藏品编号名称：</span>
                  <p>666666666</p>
                </div>
                <div>
                  <span>藏品编号：</span>
                  <p>
                    阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松
                  </p>
                </div>
              </div>
              <div className="row">
                <div>
                  <span>年代：</span>
                  <p>666666666</p>
                </div>
                <div>
                  <span>文物质地：</span>
                  <p>666666666</p>
                </div>
              </div>
              <div className="row">
                <div>
                  <span>具体年代：</span>
                  <p>666666666</p>
                </div>
                <div>
                  <span>文物类别：</span>
                  <p>666666666</p>
                </div>
              </div>

              <div className="row">
                <div>
                  <span>实际数量：</span>
                  <p>666666666</p>
                </div>
                <div>
                  <span>文物级别：</span>
                  <p>666666666</p>
                </div>
              </div>
              <div className="row">
                <div>
                  <span>外形尺寸：</span>
                  <p>(通长)66666666 (通宽)66666666 (通高)66666666 /cm</p>
                </div>
                <div>
                  <span>具体尺寸：</span>
                  <p>666666666</p>
                </div>
              </div>
              <div className="row">
                <div>
                  <span>质量范围：</span>
                  <p>666666666</p>
                </div>
                <div>
                  <span>具体质量：</span>
                  <p>666666666</p>
                </div>
              </div>

              <div className="row">
                <div>
                  <span>完残程度：</span>
                  <p>666666666</p>
                </div>
                <div>
                  <span>保存状态：</span>
                  <p>666666666</p>
                </div>
              </div>

              <div className="row">
                <div>
                  <span>入藏时间范围：</span>
                  <p>666666666</p>
                </div>
                <div>
                  <span>入藏年度：</span>
                  <p>666666666</p>
                </div>
              </div>

              <div className="row">
                <div>
                  <span>著者：</span>
                  <p>666666666</p>
                </div>
                <div>
                  <span>版本：</span>
                  <p>666666666</p>
                </div>
              </div>

              <div className="row">
                <div>
                  <span>存卷：</span>
                  <p>666666666</p>
                </div>
                <div>
                  <span>来源说明：</span>
                  <p>666666666</p>
                </div>
              </div>

              <div className="row">
                <div>
                  <span>入库位置：</span>
                  <p>666666666</p>
                </div>
                <div>
                  <span>出库位置：</span>
                  <p>666666666</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* 下面的表格 */}
        <div className="tableInfoBox">
          <div className="tableInfoBoxTit">
            <div className="rowTit">数字资源：</div>
            <div className="rowRr">
              <Select
                style={{ width: 150 }}
                value={fileSelect}
                onChange={fileSelectChangeFu}
                options={fileSelectList}
              />
            </div>
          </div>
          {/* 表格主体 */}
          <Table
            size="small"
            scroll={{ y: 190 }}
            dataSource={results[fileSelect]}
            columns={columns}
            rowKey="id"
            pagination={false}
          />
        </div>

        <div className="backBtn">
          <Button onClick={cancelFu}>返回</Button>
        </div>
      </div>

      {/* 点击上面的编辑 移库 操作记录出来的弹窗 */}
      <Modal
        wrapClassName="LookObject2Model"
        destroyOnClose
        open={!!titCut}
        title={
          titCut === "1" ? "申请编辑" : titCut === "2" ? "申请移库" : "操作记录"
        }
        onCancel={() => setTitCut("")}
        footer={
          [] // 设置footer为空，去掉 取消 确定默认按钮
        }
      >
        {/*  申请编辑 */}
        {titCut === "1" ? (
          <ObjectAdd
            dirCode={999999}
            id={urlParamRef.current.id}
            colsePage={() => setTitCut("")}
            editId="edit"
          />
        ) : null}

        {/* 申请移库 */}
        {titCut === "2" ? (
          <div className="moveLocBox">
            <div>
              <span>当前位置：</span>
              <p>库房1/房子1/格子1</p>
            </div>
            <div>
              <span>移库位置：</span>
              <Cascader
                style={{ width: 300 }}
                allowClear={false}
                value={moveLoc}
                onChange={moveLocChangeFu}
                fieldNames={{
                  label: "name",
                  value: "name",
                  children: "children",
                }}
                options={moveOptions}
                placeholder="请选择"
              />
            </div>
            <br />
            <br />
            <div className="moveBtn">
              <Button type="primary" onClick={moveBtnOk}>
                提交
              </Button>
            </div>
          </div>
        ) : null}

        {/* 操作记录 */}
        {titCut === "3" ? (
          <div className="logBox">
            {/* 表格 */}
            <LookObject2Log />
          </div>
        ) : null}
      </Modal>
    </div>
  );
}

const MemoLookObject2 = React.memo(LookObject2);

export default MemoLookObject2;
