import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { A2QuestionResType, A2QuestionType } from "@/types";
import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
import classNames from "classnames";
import { A2_APIgoodsSaveAnswer } from "@/store/action/A2Main";
const objC = {
  0: "A",
  1: "B",
  2: "C",
  3: "D",
  4: "E",
};

type Props = {
  list: A2QuestionType[];
};
function Left3({ list }: Props) {
  const [listRes, setListRes] = useState<A2QuestionResType[]>([]);

  useEffect(() => {
    const arr = [] as A2QuestionResType[];
    list.forEach((v) => {
      const temp = JSON.parse(v.answer);
      arr.push({
        id: v.id,
        txt: v.description,
        goodsId: v.goodsId,
        title: v.question,
        ok: temp.correct,
        answer: temp.answer,
        done: false,
        mySelect: "",
      });
    });
    setListRes(arr);
  }, [list]);

  // 选择答案
  const selecttFu = useCallback(
    async (item: A2QuestionResType, val: string) => {
      if (!item.done) {
        const arr = listRes.map((v) => {
          return {
            ...v,
            done: v.id === item.id ? true : v.done,
            mySelect: v.id === item.id ? val : v.mySelect,
          };
        });
        setListRes(arr);
        // 发送请求
        await A2_APIgoodsSaveAnswer(item.id, val === item.ok ? 1 : 0);
      }
    },
    [listRes]
  );

  return (
    <div className={styles.Left3}>
      <div className="left3Title">单选题</div>
      <div className="left3Main myscroll">
        {listRes.map((v1, i1) => (
          <div className="left3MainRow" key={v1.id}>
            <div className="left3MainRowT">
              {i1 + 1}.{v1.title}
            </div>
            {v1.answer.map((v2, i2) => (
              <div
                key={v2.val}
                className={classNames(
                  "left3MainRowC",
                  v1.done ? "left3MainRowCN" : "",
                  v1.ok === v2.val && v1.done ? "left3MainRowCD" : "",
                  v1.mySelect === v2.val && v1.done ? "left3MainRowCX" : ""
                )}
                onClick={() => selecttFu(v1, v2.val)}
              >
                {Reflect.get(objC, i2)}.{v2.name}
              </div>
            ))}
            {/* 回答情况 */}
            <div className="left3Sta" hidden={!v1.done}>
              {v1.ok === v1.mySelect ? (
                <div className="left3Sta1">
                  恭喜你，回答正确&emsp;
                  <CheckOutlined />
                </div>
              ) : (
                <div className="left3Sta2">
                  很遗憾，回答错误&emsp;
                  <CloseOutlined />
                </div>
              )}
            </div>
            {/* 说明 */}
            <div className="left3Txt" hidden={!v1.done}>
              {/* 正确答案：{v1.ok}
              <br /> */}
              题目解析：{v1.txt}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

const MemoLeft3 = React.memo(Left3);

export default MemoLeft3;