<script setup lang='ts'>
import { TypeMap } from "~/pages/detail/util";
import { showFailToast, showSuccessToast } from "vant";
const router = useRouter();
const props = defineProps<{
  type: string;
  tmk_id: string;
  tmz_id: string;
}>();
import Img from '~/assets/icon-no-data.png'
const theType = TypeMap[props.type];
const truthPid = props.tmk_id === "-" ? undefined : props.tmk_id;

/* 章节详情 */
const tmp_detail = ref(JSON.parse(sessionStorage.getItem("tmp_detail")!));
if (!tmp_detail.value) {
  await request({
    url: `/txwx/${props.type}/detail`,
    data: {
      [theType.id]: props.tmz_id,
    },
  }).then((res) => {
    if (res?.code === "1") tmp_detail.value = res.data.one_info;
  });
}

console.log("tmp_detail  : ", tmp_detail);

let testInfo = $ref([]);

// // 视频结束测验
// const tmz_kczjwjcs_tq_id = tmp_detail.value?.tmz_kczjwjcs_tq_id
// request({
//   url: '/txwx/question/index',
//   data: {
//     tq_id: tmz_kczjwjcs_tq_id,
//     tqr_data_type: '3',
//     tqr_data_id: props.tmz_id,
//     tqr_pos: 2,
//   },
// })
let wordVisiable = $ref(true);
let answerVisiable = $ref(false);
// 课后作业
const tmz_zjsjdajx_tq_id = tmp_detail.value?.tmz_zjsjdajx_tq_id;
if (tmz_zjsjdajx_tq_id) getTest("1", tmz_zjsjdajx_tq_id, "init");
function getTest(tqr_pos, tq_id, type) {
  request({
    url: "/txwx/question/index",
    data: {
      tq_id: tmz_zjsjdajx_tq_id,
      tqr_data_type: "3",
      tqr_data_id: props.tmz_id,
      tqr_pos,
    },
  }).then((res) => {
    if (res.code == "1") {
      testInfo = res.data.page_data;
      // tqr_pos === '1'
      //   ? (testInfo = res.data.page_data)
      //   : (endTestInfo = res.data.page_data)
      // 试题初始化
      if (type === "init") {
        // if (tqr_pos === '1') {
        res.data.page_data.forEach((item) => {
          if (item.my_answer.length !== 0) {
            answerVisiable = true;
            wordVisiable = false;
          } else {
            answerVisiable = false;
            wordVisiable = true;
          }
        });
        // }
        // else {
        //   endTestLoading = false
        // }
      } else {
        // 试题提交后
        answerVisiable = true;
        // tqr_pos === '1' ? (answerVisiable = true) : (endAnswerVisiable = true)
      }
    }
  });
}

let question = $ref([]);
let flag = $ref(true);
function isFlag(info) {
  console.log(info,123);
  
  question = [];
  flag = true;
  info.forEach((item, index) => {
    // 单选题或判断题
    if (item.tq_type == "1" || item.tq_type == "3") {
      if (!item.answer) {
        showFailToast(`第${index + 1}题未选择`);
        flag = false;
      }
      question.push({
        tq_id: item.tq_id,
        user_answer: item.answer,
      });
    } else {
      // 多选题
      if (!item.answers || item.answers?.length == 0) {
        showFailToast(`第${index + 1}题未选择`);
        flag = false;
      }
      question.push({
        tq_id: item.tq_id,
        user_answer: item.answers,
      });
      question.forEach((el) => {
        if (Array.isArray(el.user_answer)) {
          // 重新排序使选中数据的顺序为ABC....
          el = el.user_answer?.sort((a, b) => {
            return (
              item.tq_option_choosen?.indexOf(a) -
              item.tq_option_choosen?.indexOf(b)
            );
          });
        }
      });
    }
  });
}
function submitTest(tqr_pos) {
 tqr_pos === "1" ? isFlag(testInfo) : isFlag(endTestInfo);
  if (flag) {
    question.forEach((el) => {
      if (Array.isArray(el.user_answer))
        el.user_answer = el.user_answer.join("");
    });
    request({
      url: "/txwx/question_record/save",
      data: {
        tqr_data_type: "3",
        tqr_data_id: props.tmz_id,
        tqr_pos,
        question,
      },
    }).then((res) => {
      if (res.code == "1") {
        showSuccessToast(res.msg);
        // if (tqr_pos === '1') {
        wordVisiable = false;
        getTest(tqr_pos, tmz_zjsjdajx_tq_id, "1");
        // }
        // else {
        //   endTestVisiable = false
        //   getTest(tqr_pos, chapter_info?.tmz_kczjwjcs_tq_id, 'submit')
        // }
      }
    });
  }
}
</script>

<template>
  <van-nav-bar
    left-arrow
    title="作业 & 答案"
    @click-left="() => router.back()"
  />
  <div>
    <div v-if="wordVisiable && testInfo.length > 0">
      <div class="text-14px space-y-20px px-20px" v-if="testInfo.length > 0">
        <div v-for="item in testInfo" :key="item.tq_id">
          <div class="flex justify-between">
            <div class="leading-18px" v-html="item.tq_content" />
            <div class="min-w-60px mt-8px ml-10px">
              <span
                class="py-3px px-10px rounded-10px bg-hex-1259A1 text-white text-12px"
                >{{ item.tq_type_name }}</span
              >
            </div>
          </div>
          <van-radio-group
            direction="horizontal"
            v-if="item.tq_type == '1'"
            v-model="item.answer"
            fill="#1259a1"
            class="mt-10px mb-20px"
          >
            <van-radio
              v-for="e in item.tq_option_choosen"
              :key="e"
              size="30"
              class="mx-10px"
              :name="e"
            >
              {{ e }}
            </van-radio>
          </van-radio-group>
          <van-checkbox-group
            v-else-if="item.tq_type == '2'"
            v-model="item.answers"
            fill="#1259a1"
            class="mt-10px mb-20px"
          >
            <van-checkbox
              v-for="e in item.tq_option_choosen"
              :key="e"
              class="mx-10px"
              :name="e"

            >
              {{ e }}
            </van-checkbox>
          </van-checkbox-group>
          <van-radio-group
            direction="horizontal"
            v-else
            v-model="item.answer"
            fill="#1259a1"
            class="mt-10px mb-20px"
            size="30"
          >
            <van-radio
              horizontal
              v-for="e in item.tq_option_choosen"
              :key="e"
              size="30"
              class="mx-10px"
              :name="e"
            >
              <span class="px-10px">{{ e }}</span>
            </van-radio>
          </van-radio-group>
        </div>
        <div class="flex justify-center">
          <span
            class="w-80px h-35px leading-35px text-center rounded-10px bg-hex-1259A1 text-white text-18px"
            @click="submitTest('1')"
            >提交</span
          >
        </div>
      </div>
      <empty v-else />
    </div>

    <div
      v-else-if="answerVisiable && testInfo.length > 0"
      class="res-list bg-hex-fff w-full "
    >
      <div v-if="testInfo.length > 0">
        <div class="text-14px space-y-20px px-20px" v-for="item in testInfo" :key="item.tq_id">
          <div class="flex justify-between">
            <div class="leading-18px" v-html="item.tq_content" />
            <div class="min-w-60px mt-8px ml-10px">
              <span
                class="py-3px px-10px rounded-10px bg-hex-1259A1 text-white text-12px"
                >{{ item.tq_type_name }}</span
              >
            </div>
          </div>
          <div class="flex my-15px text-16px">
            <p class="mr-10px">正确答案:</p>
            <p class="text-hex-5dc248">
              {{ item.tq_answer }}
            </p>
          </div>
          <div class="flex text-16px">
            <p class="mr-10px">你的答案:</p>
            <p
              :class="
                item.my_answer.tqr_correct == '0'
                  ? 'text-red-500'
                  : 'text-hex-1259A1'
              "
            >
              {{ item.my_answer?.tqr_user_answer }}
            </p>
          </div>
          <div class="mb-25px mt-15px text-16px">
            <p class="text-red-500 my-10px">解析:</p>
            <p class="leading-loose" v-html="item.tq_alyz" />
          </div>
        </div>
      </div>
    </div>
    <div v-if="testInfo.length === 0" class="py-40px text-center">
      <div>
        <img
          :src="Img"
          width="138"
          class="block m-0-auto"
          alt=""
        />
        <h3 class="text-18px color-050026 mt-20px">暂无数据，敬请期待！</h3>
      </div>
    </div>
  </div>
</template>
