import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { Button, Modal } from "antd";
import { A6Q_APIresListLook } from "@/store/action/A6_1ques";
import { DataResTabListTxtType, columnsObj } from "./data";
import classNames from "classnames";
import { domShowFu } from "@/utils/domShow";
import { MessageFu } from "@/utils/message";
import htmlToPdf2 from "@/utils/htmlToPdf2";
import dayjs from "dayjs";

type InfoSonOptionsType = {
  id: number;
  name: string;
  customDesc: string;
  perm: boolean;
  sort: number;
};

type InfoSonType = {
  id: number;
  question: string;
  type: DataResTabListTxtType;
  options: InfoSonOptionsType[];
};

type InfoType = {
  id: number;
  name: string;
  publishDate: string;
  description: string;
  questions: InfoSonType[];
};

type Props = {
  waiId: number;
  fatherInfo: { id: number; time: string; txt: "" | "查看" | "导出结果" };
  colseFu: () => void;
};

function Tab1Look({ waiId, fatherInfo, colseFu }: Props) {
  const [info, setInfo] = useState({} as InfoType);

  const getInfoFu = useCallback(async () => {
    const res = await A6Q_APIresListLook(waiId, fatherInfo.id);
    if (res.code === 0) {
      setInfo(res.data);
    }
  }, [fatherInfo.id, waiId]);

  useEffect(() => {
    getInfoFu();
  }, [getInfoFu]);

  // 点击 导出结果
  useEffect(() => {
    if (fatherInfo.txt === "导出结果") {
      domShowFu("#AsyncSpinLoding", true);

      if (info.id) {
        window.setTimeout(() => {
          const dom = document.querySelector(".T1Cen") as HTMLDivElement;
          if (dom) {
            const name =
              "问卷结果" + dayjs(new Date()).format("YYYY-MM-DD HH:mm");

            htmlToPdf2(dom, name, () => {
              colseFu();
              domShowFu("#AsyncSpinLoding", false);
            });
          } else {
            colseFu();
            MessageFu.warning("找不到元素!");
            domShowFu("#AsyncSpinLoding", false);
          }
        }, 500);
      }
    }
  }, [colseFu, fatherInfo.txt, info.id]);

  return (
    <Modal
      wrapClassName={styles.Tab1Look}
      open={true}
      title="结果明细"
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="T1Main">
        <div className="T1Cen">
          <div className="T1title">{info.name}</div>
          <div className="T1time">
            <span>发布时间：</span>
            {info.publishDate}&emsp;&emsp;<span>提交时间：</span>
            {fatherInfo.time}
          </div>
          <div
            className="T1text"
            dangerouslySetInnerHTML={{ __html: info.description }}
          ></div>

          {/* 主体 */}
          {info.questions && info.questions.length
            ? info.questions.map((v, i) => (
                <div key={v.id} className="T1list">
                  <div className="T1list1">
                    {i + 1}：{v.question}（{v.type}题）
                  </div>
                  {v.options && v.options.length
                    ? v.options.map((v2, i2) => (
                        <div key={v2.id} className="T1list2">
                          {v.type === "填空" ? (
                            <div className="T1list3">
                              {v2.customDesc || "（空）"}
                            </div>
                          ) : (
                            <div
                              className={classNames(
                                "T1list4",
                                v2.perm ? "T1list4Ac" : ""
                              )}
                            >
                              <div className="T1list5">
                                {v.type === "排序" ? (
                                  <div className="T1listSort">{v2.sort}</div>
                                ) : null}
                                {v2.name === "其他"
                                  ? "Z"
                                  : Reflect.get(columnsObj, i2)}
                                ：
                              </div>
                              <div className="T1list6">
                                {v2.name === "其他"
                                  ? "自定义回答：" + (v2.customDesc || "（空）")
                                  : v2.name}
                              </div>
                            </div>
                          )}
                        </div>
                      ))
                    : null}
                  {/* {v.type === "填空" ? (
                    <div className="T1list2">{v.}</div>
                  ) : (
                    <div className="T1list3"></div>
                  )} */}
                </div>
              ))
            : null}
        </div>
      </div>

      <div className="T1btn">
        <Button onClick={colseFu}>关闭</Button>
      </div>
    </Modal>
  );
}

const MemoTab1Look = React.memo(Tab1Look);

export default MemoTab1Look;
