<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";
import Preloader from "@/plugins/Preloader";
import { pageResultImg } from "@/data/imgList";

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

// 当前题目
const currentId = ref(0); //当前id 0~11
const questionList = ref(data); //随机打乱题库
const answerList = ref([]); // 答案库统计
const activeId = ref(""); // 当前题目所选答案选项
const showResultBtn = ref(false);
const isChecked = ref(false);

// 答题事件
const answerFn = (item, event) => {
  let e = event.target.parentElement;
  activeId.value = item.aid; //更新选中状态
  // console.log("选项", item);
  debounceTap(e, () => {
    let cid = questionList.value[currentId.value].id;
    let has = answerList.value.findIndex((obj) => obj.id === cid);
    // 答案库中未存在该题的结果则新增，存在则更新最新选项
    if (has == -1) {
      answerList.value.push({
        id: cid,
        aid: item.aid,
        answer: item.text,
      });
    } else {
      answerList.value[has].aid = item.aid;
      answerList.value[has].answer = item.text;
    }

    gsap.set(".option-tips,.analysis", { autoAlpha: 1 });
    gsap.set(".answer-box", { pointerEvents: "none" });
    isChecked.value = true;
    // console.log("currentId.value", currentId.value);
    if (currentId.value == 2) {
      // console.log("over");
      gsap.set(".create-btn", { autoAlpha: 1 });
    } else {
      gsap.set(".next-btn", { autoAlpha: 1 });
    }
  });
};

// 下一题
const nextQuestion = (event) => {
  let e = event.target;
  debounceTap(e, () => {
    isChecked.value = false;
    gsap.set(".option-tips,.analysis", { autoAlpha: 0 });
    currentId.value++;
    activeId.value = "";
    gsap.set(".answer-box", { pointerEvents: "initial" });
    gsap.set(".next-btn", { autoAlpha: 0 });
  });
};

// 查看结果事件
const viewResult = (event) => {
  let e = event.target;
  debounceTap(e, () => {
    // 随机生成海报id
    userStore.updatePosterId(getRandomNumber([1, 2, 3]));
    gsap.set(".question-box", { pointerEvents: "none" });
    Toast("答题结束");
    Toast.loading({
      message: "结果生成中",
      duration: 0,
      forbidClick: true,
    });

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

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

// 从数组中随机生成一个数字
const getRandomNumber = (arr) => {
  var randomIndex = Math.floor(Math.random() * arr.length);
  return arr[randomIndex];
};

onMounted(() => {
  gsap.from(".question-bg", { duration: 0.5, autoAlpha: 0 });
  gsap.from(".question-box", { duration: 0.5, y: 30, autoAlpha: 0 });
  gsap.from(".answer-box", {
    duration: 0.5,
    y: 30,
    autoAlpha: 0,
    onComplete: () => {
      // 开始加载答题页面资源
      Preloader({
        name: "加载结果页资源",
        imgs: pageResultImg,
        callback: (progress) => {
          // console.log("进度：", progress);
        },
      }).then((res) => {
        console.log("done!");
      });
    },
  });
  gsap.to(".question-tree", {
    duration: 3,
    transformOrigin: "0% 70%",
    rotation: "-10deg",
    repeat: -1,
    yoyo: true,
    ease: "none",
  });
});
</script>

<template>
  <div class="QuestionPage" @touchmove.prevent>
    <div class="question-bg"></div>
    <div class="question-container">
      <div class="question-box">
        <div class="question-tree"></div>
        <div class="question-con">
          <!-- 问题序号 -->
          <div class="qa-number">第{{ questionList[currentId].id }}题</div>
          <div class="qa-question-box">
            <!-- 问题 -->
            <div
              class="question-text"
              v-for="item in questionList[currentId].question"
              :key="item"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <!-- 选项 -->
      <div class="answer-box">
        <div
          class="answer"
          v-for="(item, index) in questionList[currentId].answer"
          :class="[
            isChecked ? item.result + '-text' : '',
            isChecked ? item.result + '-box' : '',
          ]"
          :key="item.aid"
        >
          <div class="answer-text" v-for="a in item.text" :key="a">
            {{ item.aid }}.{{ a }}
          </div>
          <div class="option-tips">
            <div :class="item.result"></div>
          </div>
          <!-- 对话框气泡 -->
          <div class="bubble-1"></div>
          <div :class="index == 0 ? 'bubble-left' : 'bubble-right'"></div>
          <!-- 可点击区域 -->
          <div class="click-area" @click="answerFn(item, $event)"></div>
        </div>
      </div>
      <!-- 解析 -->
      <!-- <div class="analysis">
        <div v-for="li in questionList[currentId].analysis" :key="li">
          <span class="analysis-icon"></span>
          {{ li }}
        </div>
      </div> -->
      <div class="next-btn" @click="nextQuestion($event)"></div>
      <div class="create-btn" @click="viewResult($event)"></div>
    </div>
    <!-- 进度条 -->
    <Progress
      :percentage="((currentId + 1) / 3) * 100"
      pivot-color="#7232dd"
      :show-pivot="false"
      color="linear-gradient(to right, rgb(49, 116, 246), rgb(83, 131, 227))"
    />
  </div>
</template>

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

  .question-bg {
    @include pos(750px, 1624px, 0px, 50%);
    transform: translateY(-50%);
    @include bg_pos("qa/bg.jpg");
  }

  .question-container {
    @include pos(750px, 1180px, 0px, 50%);
    transform: translateY(-50%);
    @include flexCen();
    justify-content: space-around;

    .question-box {
      @include box(696px, 441px);
      @include bg_pos("qa/question-box.png");
      position: relative;

      .question-tree {
        @include pos(277px, 232px, -100px, -141px);
        @include bg_pos("qa/tree.png");
      }

      .question-con {
        @include pos(696px, 441px, 0px, 0px);
        @include bg_pos("qa/question-box.png");

        .qa-number {
          @include pos(696px, 86px, 0px, 0px);
          font-size: 40px;
          color: #ffffff;
          font-weight: 700;
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: justifyLeft;
          text-shadow: 0px 6px 6px rgba(49, 116, 246, 0.9);
        }

        .qa-question-box {
          @include pos(626px, 243px, 37px, 177px);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          // 问题样式
          .question-text {
            width: 100%;
            font-family: "HarmonyOS_Sans_SC_Regular";
            font-size: 30px;
            letter-spacing: 1.5px;
            color: #065ac6;
            text-align: center;
            padding: 40px;
            text-align: justify;
            line-height: 55px;
          }
        }
      }
    }

    // 选项样式
    .answer-box {
      @include box(750px, 205px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      color: #065ac6;
      font-size: 26px;
      line-height: 80px;
      margin-top: 40px;
      padding: 0 50px;
      font-family: "HarmonyOS_Sans_SC_Regular";

      

      .answer {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        line-height: 75px;
        height: 74px;
        padding: 0px 30px;
        border-radius: 50px;
        border: 1px solid rgb(255, 255, 255);
        background-color: rgba(255, 255, 255, 0.361);
        position: relative;
        box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.361) inset;

        .answer-text {
          white-space: nowrap;
        }

        .bubble-1 {
          @include pos(55px, 5px, 88px, 7px);
          @include bg_pos("qa/bubble-1.png");
        }

        .bubble-left {
          @include pos(26px, 15px, 88px, 72px);
          border: 10px solid transparent;
          border-top-color: rgba(255, 255, 255, 0.9);
          border-bottom: 0;
          margin-left: -10px;
          margin-bottom: -10px;
          // @include bg_pos("qa/jiao-1.png");
        }

        .bubble-right {
          @include box(26px, 15px);
          border: 10px solid transparent;
          border-top-color: rgba(255, 255, 255, 0.9);
          border-bottom: 0;
          margin-left: -5px;
          margin-bottom: -5px;
          position: absolute;
          top: 72px;
          right: 88px;
        }

        .click-area {
          @include pos(100%, 100%, 0px, 0px);
          border-radius: 47.5px;
          // background: rgba($color: #000000, $alpha: 0.5);
        }
      }

      .correct-text {
        color: #e74c00;
        // background-color: rgba(255, 255, 255, 0.471);
        box-shadow: 5px 5px 5px rgba(255, 240, 192, 0.471) inset;
      }

      .option-tips {
        @include box(40px, 40px);
        visibility: hidden;

        .correct {
          @include box(74px, 74px);
          @include bg_pos("qa/correct.png");
          position: absolute;
          right: -20px;
          top: 0px;
        }

        .incorrect {
          @include box(74px, 74px);
          @include bg_pos("qa/incorrect.png");
          position: absolute;
          right: -20px;
          top: 0px;
        }
      }
    }

    // 解析样式
    .analysis {
      visibility: hidden;
      width: 95%;
      font-family: "HarmonyOS_Sans_SC_Regular";
      font-size: 25px;
      color: #e74c00;
      text-align: justify;
      padding: 10px 50px;
      // height: 100px;
      .analysis-icon {
        display: inline-block;
        @include box(32px, 31px);
        @include bg_pos("qa/analysis-icon.png");
      }
    }

    .next-btn {
      @include box(256px, 70px);
      @include bg_pos("qa/next-btn.png");
      // display: none;
      visibility: hidden;
    }
    .create-btn {
      @include box(256px, 70px);
      @include bg_pos("qa/create-btn.png");
      // display: none;
      visibility: hidden;
    }
  }
}
</style>