import { FC, useCallback, useEffect, useRef, useState } from "react";
import { FileImgListType } from "@/types";
import Z1upImgs from "@/components/Z1upImgs";
import Z2upVideos from "@/components/Z2upVideos";
import Z3upFiles from "@/components/Z3upFiles";
import { Button, Form, Input, Popconfirm } from "antd";
import classNames from "classnames";
import styles from "../A1Add/index.module.scss";
import { A1_APIaddProject, A1_APIgetInfoById } from "@/store/action/A1Project";
import { MessageFu } from "@/utils/message";

type LinkType = {
  id: number;
  name: string;
  link: string;
};

interface A1ResultProps {
  pageType: { txt: string; id: number };
  closeFu: () => void;
  addFu: () => void;
  editFu: (val: string) => void;
}

export const A1Result: FC<A1ResultProps> = ({ pageType, closeFu, addFu, editFu }) => {
  const [isOk, setIsOk] = useState(false);
  const [lookFile, setLookFile] = useState([] as FileImgListType[]);
  // 有关 项目链接
  const [linkArr, setLinkArr] = useState<LinkType[]>([]);
  // 上传附件的code码
  const [dirCode, setDirCode] = useState("");

  // 项目成功的 ref
  const filesRef = useRef<any>(null);
  const listFilesRef =  useRef<any>(null);

  // 图片数组的ref
  const imgsRef = useRef<any>(null);

  // 视频数组的ref
  const videosRef = useRef<any>(null);

  const getInfoFu = useCallback(async (id: number) => {
    const res = await A1_APIgetInfoById(id);
    if (res.code === 0) {
      const info = res.data.entity;

      setDirCode(info.dirCode);

      const file = res.data.file || [];
      setLookFile(file);

      setLinkArr(JSON.parse(info.linkJson||"[]"));

      // 回显的时候闪动 问题
      setIsOk(true);
    }
  }, []);

  useEffect(() => {
    if (!pageType.id) {
      // 新增
      setIsOk(true);
      setDirCode(Date.now() + "");
    } else {
      // 编辑
      getInfoFu(pageType.id);
    }
  }, [getInfoFu, pageType.id]);

  const addLinkFu = useCallback(() => {
    if (linkArr.length >= 10) return;
    setLinkArr([...linkArr, { id: Date.now(), name: "", link: "" }]);
  }, [linkArr]);

  const delLinkFu = useCallback(
    (id: number) => {
      setLinkArr(linkArr.filter((v) => v.id !== id));
    },
    [linkArr]
  );

  const linkChangeFu = useCallback(
    (id: number, val: string, type: "name" | "link") => {
      setLinkArr(
        linkArr.map((v) => ({
          ...v,
          [type]: v.id === id ? val.replace(/\s+/g, "") : v[type],
        }))
      );
    },
    [linkArr]
  );

  // 通过校验点击确定
  const onFinish = useCallback(
    async (value: any) => {
      // 获取图片地址
      const imgsRes = imgsRef.current.imgIdsRes();

      // 获取视频地址
      const videosRes = videosRef.current.videoIdsRes();

      // 检查链接填写完整情况
      const linkArrFlag = linkArr.some((v) => !v.name || !v.link);
      if (linkArrFlag) return MessageFu.warning("请完整填写 项目链接 !");

      // 项目成果
      const filesRes = filesRef.current.filesIdRes();
      const listFilesRes = listFilesRef.current.filesIdRes();

      const fileIdsArr = [...imgsRes, ...videosRes, ...filesRes, ...listFilesRes];

      const fileIds = fileIdsArr.join(",");

      const obj = {
        ...value,
        id: pageType.txt === "add" ? null : pageType.id,
        fileIds,
        linkJson: JSON.stringify(linkArr)||"[]",
        dirCode,
      };
      const res = await A1_APIaddProject(obj);
      await getInfoFu(pageType.id)
      if (res.code === 0) {
        if (pageType.txt === "add") {
          MessageFu.success("新增成功!");
          addFu();
        } else if (pageType.txt === "edit") {
          MessageFu.success("编辑成功!");
        }
        closeFu();
      }
    },
    [addFu, closeFu, getInfoFu, linkArr, dirCode, pageType.id, pageType.txt]
  );

  return (
    <div className={styles.A1Add}>
      <div
        className={classNames(
          "A1AddMain",
          pageType.txt === "look" ? "A1AddMainLook" : ""
        )}
      >
        <Form onFinish={onFinish}>
          <div className="e_row">
            <div className="e_rowL e_rowL2">
              <span> </span>交付清单：
            </div>
            <div className="e_rowR e_rowRML">
              <Z3upFiles
                max={1}
                accept="*"
                type="list"
                isLook={pageType.txt === "look"}
                ref={listFilesRef}
                fileCheck={false}
                dirCode={dirCode}
                myUrl="cms/project/upload"
                lookData={lookFile.filter((v) => v.type === "list")}
                tips="最多1个附件"
              />
            </div>
          </div>

          <div className="e_row">
            <div className="e_rowL e_rowRML">
              <span> </span>项目图片：
            </div>
            <div className="e_rowR">
              <Z1upImgs
                max={50}
                isLook={pageType.txt === "look"}
                ref={imgsRef}
                fileCheck={false}
                size={10}
                isCoverShow={true}
                dirCode={dirCode}
                myUrl="cms/project/upload"
                lookData={lookFile.filter((v) => v.type === "img")}
              />
            </div>
          </div>

          <div className="e_row">
            <div className="e_rowL e_rowL2 e_rowRML">
              <span> </span>项目视频：
            </div>
            <div className="e_rowR">
              <Z2upVideos
                max={10}
                isLook={pageType.txt === "look"}
                ref={videosRef}
                fileCheck={false}
                size={500}
                dirCode={dirCode}
                myUrl="cms/project/upload"
                lookData={lookFile.filter((v) => v.type === "video")}
              />
            </div>
          </div>

          <div className="e_row">
            <div className="e_rowL e_rowL2">
              <span> </span>项目链接：
            </div>
            <div className="e_rowR">
              {pageType.txt === "look" && linkArr.length <= 0 ? (
                <div className="lookNoneOne">{isOk ? "（空）" : ""}</div>
              ) : (
                <div className="erLinkTop" hidden={pageType.txt === "look"}>
                  <Button onClick={addLinkFu} disabled={linkArr.length >= 10}>
                    新&emsp;增
                  </Button>
                  <span className="e_rowRtit">&emsp;最多支持10条链接</span>
                </div>
              )}

              {pageType.txt === "look" ? (
                <>
                  {linkArr.map((v) => (
                    <div className="lookErLink" key={v.id}>
                      <div className="lookErLink1">{v.name}：</div>
                      <a
                        title={v.link}
                        className="lookErLink2"
                        href={v.link}
                        target="_blank"
                        rel="noreferrer"
                      >
                        {v.link}
                      </a>
                    </div>
                  ))}
                </>
              ) : (
                <div className="erLinkMain">
                  {linkArr.map((v) => (
                    <div className="erLinkRow" key={v.id}>
                      <Input
                        value={v.name}
                        onChange={(e) =>
                          linkChangeFu(v.id, e.target.value, "name")
                        }
                        style={{ width: 240 }}
                        maxLength={10}
                        showCount
                        placeholder="请输入链接标题"
                      />
                      &emsp;
                      <Input
                        value={v.link}
                        onChange={(e) =>
                          linkChangeFu(v.id, e.target.value, "link")
                        }
                        style={{ width: 800 }}
                        maxLength={200}
                        showCount
                        placeholder="请输入链接"
                      />
                      &emsp;
                      <Popconfirm
                        title="删除后无法恢复，是否删除?"
                        okText="删除"
                        cancelText="取消"
                        onConfirm={() => delLinkFu(v.id)}
                        okButtonProps={{ loading: false }}
                      >
                        <Button>删除</Button>
                      </Popconfirm>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>

          <br />

          <div className="e_row">
            <div className="e_rowL e_rowL2">
              <span> </span>成果文件：
            </div>
            <div className="e_rowR e_rowRML">
              <Z3upFiles
                max={10}
                isLook={pageType.txt === "look"}
                ref={filesRef}
                fileCheck={false}
                dirCode={dirCode}
                myUrl="cms/project/upload"
                lookData={lookFile.filter((v) => v.type === "doc")}
                size={500}
              />
            </div>
          </div>

          {/* 确定和取消按钮 */}
          <div className="A1AddBtn">
            {pageType.txt === "look" ? null : ( // <Button onClick={closeFu}>关 闭</Button>
              <>
                <Popconfirm
                  title="放弃编辑后，信息将不会保存!"
                  okText="放弃"
                  cancelText="取消"
                  onConfirm={closeFu}
                  okButtonProps={{ loading: false }}
                >
                  <Button>取消</Button>
                </Popconfirm>
                &emsp;&emsp;
                <Button type="primary" htmlType="submit">
                  保存
                </Button>
              </>
            )}
          </div>
        </Form>
      </div>
    </div>
  )
}