<script setup name="Question">
import gsap from "gsap";
import { Toast, Progress } from "vant";
import { data } from "@/data";
import { debounceTap, FYShuffle, mostValue, judgeBigScreen } from "@/plugins";
import { useMainStore } from "@/store";
import { subAnswer } from "@/api";

// 页面配置初始化
const emit = defineEmits(["QuestionPage"]);
const userStore = useMainStore();

// 当前题目
// const currentId = ref(props.questionId); //当前id 0~4
const currentId = ref(0); //当前id 0~3

const questionList = ref(data); //随机打乱题库
const isChecked = ref(false);
const checkedOption = ref("");
const QaResult = ref(1); //当前答题结果
const correctObj = ref({}); //当前正确选项

// 答题事件
const answerFn = (item, event) => {
  let e = event.target.parentElement;

  debounceTap(e, () => {
    gsap.set(".answer-box", { pointerEvents: "none" });
    isChecked.value = true;
    checkedOption.value = item;
    console.log("checkedOption", checkedOption.value);
    QaResult.value = item.result;

    // 设置正确选项
    correctObj.value = questionList.value[currentId.value].answer.find(
      (item) => item.result == 1
    );
    console.log("correctObj", correctObj.value);

    gsap.to(".qp-result ", { duration: 0.5, autoAlpha: 1, delay: 1 });
  });
};

// 下一题
const nextQuestion = (event) => {
  let e = event.target;
  debounceTap(e, () => {
    gsap.to(".qp-result", {
      duration: 0.5,
      autoAlpha: 0,
      onComplete: () => {
        isChecked.value = false;
        checkedOption.value = "";
        gsap.set(".answer-box", { pointerEvents: "auto" });
        currentId.value++;
      },
    });
  });
};

// 查看结果事件
const viewResult = (event) => {
  let e = event.target;
  debounceTap(e, () => {
    // 更新海报id
    userStore.posterId = currentId.value + 1;

    gsap.set(".question-box", { pointerEvents: "none" });
    Toast("答题结束");
    Toast.loading({
      message: "结果生成中",
      duration: 0,
      forbidClick: true,
    });

    let dev = "dev";

    if (dev != "dev") {
      // 提交完成记录
      subAnswer({}, userStore.token).then((res) => {
        console.log("key:", res);
        if (res.code == 0) {
          userStore.updateDrawKey(res.data);
        }

        setTimeout(() => {
          Toast.clear();
          gsap.to(".QuestionPage,.qp-result", {
            duration: 0.5,
            autoAlpha: 0,
            onComplete: () => {
              emit("QuestionPage", { action: "showResult" });
            },
          });
        }, 1000);
      });
    } else {
      setTimeout(() => {
        Toast.clear();
        gsap.to(".QuestionPage,.qp-result", {
          duration: 0.5,
          autoAlpha: 0,
          onComplete: () => {
            emit("QuestionPage", { action: "showResult" });
          },
        });
      }, 1000);
    }
  });
};

onMounted(() => {
  gsap.from(".question-bg", { duration: 0.5, autoAlpha: 0 });
  gsap.from(".question-box", { duration: 0.5, scale: 0.4, autoAlpha: 0 });
});

const getClass = (item) => {
  if (isChecked.value) {
    if (checkedOption.value.aid == item.aid) {
      return item.result ? "correct" : "incorrect";
    }
  }
};
</script>

<template>
  <div class="QuestionPage" @touchmove.prevent>
    <div class="question-bg"></div>
    <div class="question-container">
      <div class="question-box">
        <div class="question-serial">
          <div>
            <div class="serial-icon"></div>
            <div class="serial-text">
              {{ ["题目一", "题目二", "题目三", "题目四"][currentId] }}
            </div>
          </div>
          <div class="serial-num">
            {{ currentId + 1 }}/{{ questionList.length }}
          </div>
        </div>
        <div class="qa-question-box">
          <div class="question">
            <div
              class="question-text"
              v-for="item in questionList[currentId].question"
              :key="item"
            >
              {{ item }}
            </div>
          </div>
          <!-- 选项 -->
          <div class="answer-box">
            <div
              class="answer"
              :class="getClass(item)"
              v-for="item in questionList[currentId].answer"
              :key="item.aid"
            >
              <div class="answer-text">{{ item.aid }}.{{ item.text }}</div>
              <div
                class="result-icon"
                v-if="isChecked && item.aid == checkedOption.aid"
              >
                <div
                  :class="item.result ? 'icon-correct' : 'icon-incorrect'"
                ></div>
              </div>
              <!-- 可点击区域 -->
              <div class="click-area" @click="answerFn(item, $event)"></div>
            </div>
          </div>
          <!-- <div class="question-tips" v-for="(t, i) in questionList[currentId].tips" :key="i">
            <div v-if='questionList[currentId].tips.length == 1'>
              {{ isChecked ? `${['回答错误！', '回答正确！'][checkedOption.result]}` : `提示：${t}` }}
            </div>
            <div v-else>
              {{ isChecked ? `${i == 0 ? ['回答错误！', '回答正确！'][checkedOption.result] : ''}` : `${i == 0 ? '提示：' : ''}${t}` }}
            </div>
          </div> -->
        </div>
        <div class="return-btn" @click="nextQuestion($event)"></div>
        <div class="create-btn" @click="viewResult($event)"></div>
      </div>
      <div class="question-gold-icon-1"></div>
    </div>
  </div>
  <div class="qp-result">
    <div
      class="qp-result-box"
      :class="!QaResult ? 'qp-result-box-0' : 'qp-result-box-1'"
    >
      <div
        class="qp-result-icon"
        :class="!QaResult ? 'is-incorrect' : ''"
      ></div>

      <div class="qp-result-content">
        <div
          class="qp-result-text"
          :class="!QaResult ? 'text-bg-2' : 'text-bg-1'"
        >
          {{ QaResult ? "答对啦" : "答错啦" }}
        </div>
        <div class="qp-tips" v-if="!QaResult">
          答案:{{ correctObj.aid }}.{{ correctObj.text }}
        </div>
        <div class="qp-tips-text">解析：{{ questionList[currentId].tips[0] }}</div>
      </div>
    </div>
    <div
      class="next-btn"
      @click="
        currentId == questionList.length - 1
          ? viewResult($event)
          : nextQuestion($event)
      "
    >
      {{ currentId == questionList.length - 1 ? "查看结果" : "下一题" }}
    </div>
  </div>
</template>

<style lang="scss" scope>
.QuestionPage {
  @include pos(100%, 1624px, 0px, 0px);
  overflow: hidden;

  .question-bg {
    @include pos(750px, 1624px, 0px, 0px);
    background-image: -webkit-linear-gradient(
      -90deg,
      #ffffff 15%,
      #4ebbe5 100%
    );
  }

  .question-container {
    @include pos(750px, 1624px, 0px, 0px);
    @include flexCen();
    background-color: rgba($color: #000000, $alpha: 0.3);

    .question-box {
      @include pos(727px, 769px, 22px, 308px);
      @include bg_pos("qa/paper.png");

      .question-serial {
        @include pos(560px, 90px, 110px, 34px);
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        .serial-text {
          color: #ffffff;
          font-size: 40px;
        }
        .serial-num {
          font-size: 60px;
          padding-right: 20px;
          color: transparent;
          -webkit-text-stroke: 3px #ffffff; /* 控制描边粗细和颜色 */
          text-stroke: 3px #ffffff;
          opacity: 0.5;
        }
      }

      .qa-question-box {
        @include pos(563px, 660px, 74px, 116px);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        // 问题样式
        .question {
          margin: 40px auto;

          .question-text {
            font-family: "FZZY_Regular";
            font-size: 34px;
            color: #55240d;
            line-height: 50px;
            text-align: justify;
            font-weight: 700;
          }
        }

        // 选项样式
        .answer-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          // height: 200px;

          // 选项通用样式
          .answer {
            width: 504px;
            position: relative;
            border-radius: 32.5px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #fff;
            color: #9e4b00;
            background-color: #fff2b9;
            margin-bottom: 30px;
            padding: 10px 20px;

            .answer-text {
              font-size: 30px;
              line-height: 40px;
              @include flexCen();
            }

            .click-area {
              width: 100%;
              height: 100%;
              border-radius: 32.5px;
              position: absolute;
            }

            .result-icon {
              position: absolute;
              @include box(504px, 45px);
              top: 50%;
              transform: translateY(-55%);
              left: 460px;

              .icon-correct {
                @include box(76px, 56px);
                @include bg_pos("qa/correct.png");
              }

              .icon-incorrect {
                @include box(52px, 54px);
                @include bg_pos("qa/incorrect.png");
              }
            }
          }

          .correct {
            color: #ffe8b4;
            font-weight: 700;
            // background: linear-gradient(-45deg, #facc22, #f83600);
            background-color: #f83600;
            border: 2px solid #f0d0ad;
            // 外发光效果
            box-shadow: 0px 5px 10px rgba($color: #0188d5, $alpha: 0.5);
            border-radius: 32.5px;
          }

          .incorrect {
            color: #f83600;
            font-weight: 700;
          }
        }

        .question-tips {
          font-size: 25px;
          width: 100%;
          font-family: "FZZY_Regular";
          color: #ab7133;
          text-align: center;
          padding: 5px;
        }
      }
    }
  }
}

.qp-result {
  @include pos(100%, 1624px, 0px, 0px);
  overflow: hidden;
  @include flexCen();
  background-color: rgba($color: #000000, $alpha: 0.6);
  visibility: hidden;
  .qp-result-box {
    @include box(569px, 526px);

    position: relative;
    .qp-result-icon {
      @include pos(112px, 112px, 223px, -30px);
      @include bg_pos("qa/correct-icon.png");
    }
    .is-incorrect {
      @include bg_pos("qa/incorrect-icon.png");
    }

    .qp-result-content {
      @include pos(569px, 430px, 0px, 95px);


      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;

      .qp-result-text {
        @include box(319px, 47px);
        text-align: center;
        width: 100%;
        font-size: 35px;
        color: #ffffff;
        margin: 20px auto;
      }
      .text-bg-1 {
        @include bg_pos("qa/tips-bg.png");
      }
      .text-bg-2 {
        @include bg_pos("qa/tips-bg-2.png");
      }
      .qp-tips {
        width: 80%;
        text-align: center;
        font-size: 25px;
        color: #ff0000;
      }
      .qp-tips-text {
        width: 100%;
        padding: 10px 20px;
        font-size: 25px;
        line-height: 40px;
        text-align: justify;
        color: #b3640d;
      }
    }
  }

  .qp-result-box-1 {
    @include bg_pos("qa/result-box.png");
  }
  .qp-result-box-0 {
    @include bg_pos("qa/result-box-2.png");
  }

  .next-btn {
    @include box(190px, 65px);
    border: 1px solid #ffffff;
    @include flexCen();
    font-size: 35px;
    color: #ffffff;
    border-radius: 31px;
    margin-top: 50px;
  }
}
</style>
