import React, { useCallback, useEffect, useRef, useState } from "react";
import styles from "./index.module.scss";
import { Button, DatePicker, Form, FormInstance, Input, Select } from "antd";
import { A5_APIgetInfo, A5_APIsave } from "@/store/action/A5show";
import dayjs from "dayjs";
import { MessageFu } from "@/utils/message";
import ZupOne from "@/components/ZupOne";
import TextArea from "antd/es/input/TextArea";
import MyPopconfirm from "@/components/MyPopconfirm";
import ZRichText from "@/components/ZRichText";
import ZupVideos from "@/components/ZupVideos";
const { RangePicker } = DatePicker;

type Props = {
  editId: number;
  addTableFu: () => void;
  editTableFu: () => void;
  closeFu: () => void;
};

function A5edit({ editId, addTableFu, editTableFu, closeFu }: Props) {
  const [dirCode, setDirCode] = useState("");

  // 自定义类型
  const [type, setType] = useState<"常设展览" | "临时展览" | "">("");

  // 表单的ref
  const FormBoxRef = useRef<FormInstance>(null);
  // 封面图的ref
  const ZupThumbRef = useRef<any>(null);

  // 富文本的ref
  const ZRichTextRef = useRef<any>(null);
  //  视频的ref
  const ZupVideosRef = useRef<any>(null);

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

      setDirCode(entity.dirCode);

      // 设置富文本
      ZRichTextRef.current?.ritxtShowFu(entity.rtf);

      // 设置附件视频
      ZupVideosRef.current?.setFileComFileFu(file || []);

      // 设置展览类型
      setType(entity.type);

      // 设置临时展览日期
      if (entity.type === "临时展览" && entity.dateStart && entity.dateEnd) {
        setTimeArr([entity.dateStart, entity.dateEnd]);
      }

      FormBoxRef.current?.setFieldsValue({
        ...entity,
        myTime: dayjs(entity.publishDate),
      });

      // 设置封面图
      ZupThumbRef.current?.setFileComFileFu({
        fileName: "",
        filePath: entity.thumb,
      });
    }
  }, []);

  useEffect(() => {
    if (editId > 0) {
      getInfoFu(editId);
    } else {
      setDirCode(Date.now() + "");

      setType("常设展览");

      FormBoxRef.current?.setFieldsValue({
        myTime: dayjs(Date.now()),
      });
    }
  }, [editId, getInfoFu]);

  // 附件 是否 已经点击过确定
  const [fileCheck, setFileCheck] = useState(false);

  const [timeArr, setTimeArr] = useState<any>(null);

  // 时间选择器改变
  const timeChange = useCallback((date: any, dateString: any) => {
    setTimeArr(dateString);
  }, []);

  // 没有通过校验
  const onFinishFailed = useCallback(() => {
    setFileCheck(true);
  }, []);

  //  通过校验点击确定
  const onFinish = useCallback(
    async (values: any) => {
      setFileCheck(true);

      const coverUrl1 = ZupThumbRef.current?.fileComFileResFu();

      // 富文本
      const rtfObj = ZRichTextRef.current?.fatherBtnOkFu();

      if (rtfObj.flag) return MessageFu.warning("请输入正文!");

      // 没有传 封面图
      if (!coverUrl1.filePath) return MessageFu.warning("请上传封面图!");

      let timeArrRes = ["", ""];

      if (type === "临时展览") {
        if (timeArr && timeArr[0] && timeArr[1]) {
          timeArrRes = timeArr;
        } else return MessageFu.warning("请选择临时展览日期!");
      }

      // 发布日期
      const publishDate = dayjs(values.myTime).format("YYYY-MM-DD");

      const flieList = ZupVideosRef.current?.fileComFileResFu() || [];

      const obj = {
        ...values,
        id: editId > 0 ? editId : null,
        publishDate,
        thumb: coverUrl1.filePath,
        rtf: rtfObj.val || "",
        fileIds: flieList.map((v: any) => v.id).join(","),
        type,
        dateStart: timeArrRes[0],
        dateEnd: timeArrRes[1],
      };

      const res = await A5_APIsave(obj);

      if (res.code === 0) {
        MessageFu.success(editId > 0 ? "编辑成功!" : "新增成功!");
        editId > 0 ? editTableFu() : addTableFu();
        closeFu();
      }
    },
    [addTableFu, closeFu, editId, editTableFu, timeArr, type]
  );

  return (
    <div className={styles.A5edit}>
      <div className="A5eMain">
        <Form
          ref={FormBoxRef}
          name="basic"
          labelCol={{ span: 3 }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          scrollToFirstError
        >
          <Form.Item
            label="标题"
            name="name"
            rules={[{ required: true, message: "请输入标题!" }]}
            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
          >
            <Input maxLength={30} showCount placeholder="请输入内容" />
          </Form.Item>

          {/* 自定义展览类型 */}
          <div className="formRow">
            <div className="formLeft">
              <span>* </span>展览类型：
            </div>
            <div className="formRight">
              <Select
                placeholder="请选择"
                style={{ width: 200 }}
                value={type}
                onChange={(e) => setType(e)}
                options={[
                  { value: "常设展览", label: "常设展览" },
                  { value: "临时展览", label: "临时展览" },
                ]}
              />
              &emsp;
              <span hidden={type === "常设展览"}>
                <RangePicker
                  onChange={timeChange}
                  value={
                    timeArr && timeArr[0] && timeArr[1]
                      ? [dayjs(timeArr[0]), dayjs(timeArr[1])]
                      : null
                  }
                />
              </span>
            </div>
          </div>
          <br />

          <Form.Item
            label="发布日期"
            name="myTime"
            rules={[{ required: true, message: "请选择发布日期!" }]}
          >
            <DatePicker />
          </Form.Item>

          {/* 富文本 */}
          <div className="formRow">
            <div className="formLeft">
              <span>* </span>正文：
            </div>
            <div className="formRight" style={{ height: 450 }}>
              <ZRichText
                check={fileCheck}
                dirCode={dirCode}
                isLook={false}
                ref={ZRichTextRef}
                myUrl="cms/exhibition/upload"
              />
            </div>
          </div>
          <br />

          {/* 封面 */}
          <div className="formRow">
            <div className="formLeft">
              <span>* </span>
              封面图：
            </div>
            <div className="formRight">
              <ZupOne
                ref={ZupThumbRef}
                isLook={false}
                fileCheck={fileCheck}
                size={5}
                dirCode={dirCode}
                myUrl="cms/exhibition/upload"
                format={["image/jpeg", "image/png"]}
                formatTxt="png、jpg和jpeg"
                checkTxt="请上传封面图!"
                upTxt="最多1张"
                myType="thumb"
              />
            </div>
          </div>

          {/* 视频 */}
          <div className="formRow">
            <div className="formLeft">视频：</div>
            <div className="formRight">
              <ZupVideos
                isLook={false}
                size={500}
                fileNum={5}
                dirCode={dirCode}
                myUrl="cms/exhibition/upload"
                upTxt="；数量不超过5个。"
                ref={ZupVideosRef}
              />
            </div>
          </div>
          <Form.Item
            label="位置"
            name="location"
            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
          >
            <Input maxLength={30} showCount placeholder="请输入内容" />
          </Form.Item>
          <Form.Item
            label="摘要"
            name="description"
            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
          >
            <TextArea placeholder="请输入内容" showCount maxLength={100} />
          </Form.Item>

          <Form.Item
            label="虚拟展厅"
            name="link"
            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
          >
            <TextArea placeholder="请输入链接" showCount maxLength={200} />
          </Form.Item>

          {/* 确定和取消按钮 */}
          <Form.Item className="A5Ebtn">
            <Button type="primary" htmlType="submit">
              提交
            </Button>
            <br />
            <br />
            <MyPopconfirm txtK="取消" onConfirm={closeFu} />
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}

const MemoA5edit = React.memo(A5edit);

export default MemoA5edit;
