import React, { useCallback, useEffect, useRef, useState } from "react";
import styles from "./index.module.scss";
import { Button } from "antd";
import MyPopconfirm from "@/components/MyPopconfirm";
import ZRichText from "@/components/ZRichText";
import { A1_APIgetInfo, A1_APIsave } from "@/store/action/A1survey";
import { FileListType } from "@/components/ZupTypes";
import ZupVideos from "@/components/ZupVideos";
import { MessageFu } from "@/utils/message";
function A1survey() {
  // 是否是查看
  const [isLook, setIsLook] = useState(true);

  const [dirCode,setDirCode] =useState('')

  // 组件的ref
  const ZRichTextRef = useRef<any>(null);
  const ZupVideosRef = useRef<any>(null);

  const [text, setText] = useState("");

  const [fileList, setFileList] = useState<FileListType[]>([]);

  const getInfoFu = useCallback(async () => {
    const res = await A1_APIgetInfo();
    if (res.code === 0) {
      setDirCode(res.data.dirCode)
      setText(res.data.rtf);
      ZRichTextRef.current?.ritxtShowFu(res.data.rtf);
      setFileList(res.data.files || []);
      ZupVideosRef.current?.setFileComFileFu(res.data.files || []);
    }
  }, []);

  useEffect(() => {
    getInfoFu();
    setDirCode(Date.now()+'')
  }, [getInfoFu]);

  // 点击取消
  const btnX = useCallback(() => {
    ZRichTextRef.current?.ritxtShowFu(text);
    ZupVideosRef.current?.setFileComFileFu(fileList);
    setIsLook(true);
  }, [fileList, text]);

  // 点击提交
  const btnOk = useCallback(async () => {
    const list = ZupVideosRef.current?.fileComFileResFu() || [];
    const txt = ZRichTextRef.current?.fatherBtnOkFu() || { val: "" };
    const res = await A1_APIsave({
      fileIds: list.map((v: any) => v.id).join(","),
      rtf: txt.val,
    });
    if (res.code === 0) {
      MessageFu.success("修改成功!");
      setIsLook(true);
      getInfoFu()
      // console.log(123, res);
    }
  }, [getInfoFu]);

  return (
    <div className={styles.A1survey}>
      <div className="pageTitle">宁博概览</div>
      <div className="A1main1">
        <div className="A1L1">
          <div className="A1L1_1">简介：</div>
          <div className="A1L1_2">
            <ZRichText
              check={false}
              dirCode={dirCode}
              isLook={isLook}
              ref={ZRichTextRef}
              myUrl="cms/overview/upload"
              full={true}
            />
          </div>
        </div>
        <div className="A1L1 A1L2">
          <div className="A1L1_1">视频：</div>
          <div className="A1L1_2">
            <ZupVideos
              isLook={isLook}
              size={500}
              fileNum={5}
              dirCode={dirCode}
              myUrl="cms/overview/upload"
              upTxt="；数量不超过5个。"
              ref={ZupVideosRef}
            />
          </div>
        </div>
      </div>
      <div className="A1main2">
        <Button
          type="primary"
          hidden={!isLook}
          onClick={() => setIsLook(false)}
        >
          修改
        </Button>
        <div hidden={isLook}>
          <MyPopconfirm txtK="取消" onConfirm={btnX} />
          <Button type="primary" onClick={btnOk}>
            提交
          </Button>
        </div>
      </div>
    </div>
  );
}

const MemoA1survey = React.memo(A1survey);

export default MemoA1survey;
