import React, { useCallback, useEffect, useRef, useState } from "react";
import styles from "./index.module.scss";
import {
  Button,
  Cascader,
  DatePicker,
  Form,
  FormInstance,
  Input,
  InputNumber,
  Popconfirm,
  Select,
} from "antd";
import mapDataAll from "./data";
import dayjs from "dayjs";
import TextArea from "antd/es/input/TextArea";
import Z1upImgs from "@/components/Z1upImgs";
import Z2upVideos from "@/components/Z2upVideos";
import { MessageFu } from "@/utils/message";
import Z3upFiles from "@/components/Z3upFiles";
import classNames from "classnames";
import { useSelector } from "react-redux";
import { RootState } from "@/store";
import { A1_APIaddProject, A1_APIgetInfoById } from "@/store/action/A1Project";
import { A1TableType, FileImgListType } from "@/types";
import AuthCom from "@/components/AuthCom";

const { RangePicker } = DatePicker;

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

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

function A1Add({ pageType, closeFu, addFu, editFu }: Props) {
  const [lookInfo, setLookInfo] = useState({} as A1TableType);

  const [lookFile, setLookFile] = useState([] as FileImgListType[]);

  const [isOk, setIsOk] = useState(false);

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

      setDirCode(info.dirCode);

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

      setLinkArr(JSON.parse(info.linkJson));

      const province = info.province ? info.province.split("-") : "";

      const dateScope = info.dateScope ? info.dateScope.split(" 至 ") : "";

      FormBoxRef.current?.setFieldsValue({
        ...info,
        province,
        dateScope: dateScope ? [dayjs(dateScope[0]), dayjs(dateScope[1])] : "",
      });

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

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

  // 从仓库 获取 项目状态的下拉框 数据
  const statusArr = useSelector(
    (state: RootState) => state.A2Dict.A2Tab1_1Obj.status
  );

  // 上传附件的code码
  const [dirCode, setDirCode] = useState("");

  // 表单的ref
  const FormBoxRef = useRef<FormInstance>(null);

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

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

  // 有关 项目链接
  const [linkArr, setLinkArr] = useState<LinkType[]>([]);

  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 onFinishFailed = useCallback(() => {}, []);

  // 通过校验点击确定
  const onFinish = useCallback(
    async (value: any) => {
      //  项目周期的处理
      let dateScope = "";
      if (value.dateScope && value.dateScope.length >= 1) {
        dateScope =
          dayjs(value.dateScope[0]).format("YYYY-MM-DD") +
          " 至 " +
          dayjs(value.dateScope[1]).format("YYYY-MM-DD");
      }

      // 项目地点的处理
      let province = "";
      if (value.province && value.province.length)
        province = value.province.join("-");

      // 获取图片地址
      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 fileIdsArr = [...imgsRes, ...videosRes, ...filesRes];

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

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

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

  return (
    <div className={styles.A1Add}>
      <div
        className={classNames(
          "A1AddMain",
          pageType.txt === "look" ? "A1AddMainLook" : ""
        )}
      >
        <Form
          scrollToFirstError={true}
          ref={FormBoxRef}
          name="basic"
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="项目编号"
            name="num"
            rules={[{ required: true, message: "请输入项目编号!" }]}
            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
          >
            <Input
              style={{ width: 600 }}
              disabled={pageType.txt === "edit"}
              maxLength={30}
              showCount
              placeholder={
                isOk
                  ? pageType.txt === "look"
                    ? "（空）"
                    : "请输入内容，不能重复"
                  : ""
              }
            />
          </Form.Item>

          <Form.Item
            label="项目名称"
            name="name"
            rules={[{ required: true, message: "请输入项目名称!" }]}
            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
          >
            <Input
              style={{ width: 600 }}
              maxLength={30}
              showCount
              placeholder={
                isOk ? (pageType.txt === "look" ? "（空）" : "请输入内容") : ""
              }
            />
          </Form.Item>

          <Form.Item label="建设单位" name="unit">
            <Input
              style={{ width: 600 }}
              maxLength={30}
              showCount
              placeholder={
                isOk ? (pageType.txt === "look" ? "（空）" : "请输入内容") : ""
              }
            />
          </Form.Item>

          <Form.Item label="项目地点" name="province">
            <Cascader
              style={{ width: 300 }}
              options={mapDataAll}
              placeholder={
                isOk ? (pageType.txt === "look" ? "（空）" : "请选择省/市") : ""
              }
            />
          </Form.Item>

          <Form.Item
            label="项目状态"
            name="statusId"
            rules={[{ required: true, message: "请选择项目状态!" }]}
          >
            <Select
              placeholder={
                isOk ? (pageType.txt === "look" ? "（空）" : "请选择") : ""
              }
              style={{ width: 300 }}
              options={statusArr.map((v) => ({ value: v.id, label: v.name }))}
            />
          </Form.Item>

          {pageType.txt === "look" ? (
            <div className="e_row">
              <div className="e_rowL">
                <span> </span>项目周期：
              </div>
              <div className="e_rowR e_rowRLook">
                {isOk
                  ? lookInfo.dateScope
                    ? lookInfo.dateScope
                    : "（空）"
                  : ""}
              </div>
            </div>
          ) : (
            <Form.Item label="项目周期" name="dateScope">
              <RangePicker style={{ width: 300 }} />
            </Form.Item>
          )}

          <Form.Item label="项目简介" name="description">
            <TextArea
              style={{ width: 600 }}
              autoSize
              placeholder={
                isOk ? (pageType.txt === "look" ? "（空）" : "请输入内容") : ""
              }
              showCount
              maxLength={500}
            />
          </Form.Item>

          {pageType.txt === "look" ? (
            <AuthCom aId="1082">
              <div className="e_row">
                <div className="e_rowL">
                  <span> </span>项目金额：
                </div>
                <div className="e_rowR e_rowRLook">
                  {isOk
                    ? lookInfo.amount
                      ? "￥" + lookInfo.amount
                      : "（空）"
                    : ""}
                </div>
              </div>
            </AuthCom>
          ) : (
            <Form.Item label="项目金额" name="amount">
              <InputNumber
                style={{ width: 300 }}
                addonBefore="￥"
                maxLength={10}
                placeholder="请输入数字，最多10位"
              />
            </Form.Item>
          )}

          <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={100}
                        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")}
              />
            </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>
  );
}

const MemoA1Add = React.memo(A1Add);

export default MemoA1Add;
