<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 { computed } from "vue";

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

const props = defineProps({
  questionId: {
    default: 0,
    required: true,
  }
})

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



const questionList = ref(data); //随机打乱题库
const isChecked = ref(false)
const checkedOption = 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);

    if (item.result) {
      gsap.set('.create-btn', { display: 'block' })
    } else {
      gsap.set('.return-btn', { display: 'block' })
    }
  })

}

// 下一题
const nextQuestion = (event) => {
  let e = event.target;
  debounceTap(e, () => {
    gsap.to('.question-box', {
      duration: 0.5, autoAlpha: 0, scale: 0.3, onComplete: () => {
        emit('hide')
      }

    })

  })

}

// 查看结果事件
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,
    })

    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("showResult", { action: "showResult" });
            }
          })
        }, 1000)
      });
    } else {
      setTimeout(() => {
        Toast.clear()
        gsap.to('.QuestionPage', {
          duration: 0.5, autoAlpha: 0, onComplete: () => {
            emit("showResult", { pid: currentId.value });
          }
        })
      }, 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="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 class="qa-megaphone"></div>
      </div>
      <div class="question-gold-icon-1"></div>
    </div>
  </div>
</template>

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

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


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

    .question-box {
      @include pos(721px, 857px, 20px, 340px);
      @include bg_pos("qa/paper.png");

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

        // 问题样式
        .question {

          .question-text {
            font-family: 'HarmonyOS_Sans_SC_Regular';
            font-size: 34px;
            color: #9e4b00;
            line-height: 50px;
            text-align: justify;
          }

        }

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


          // 选项通用样式
          .answer {
            @include box(350px, 65px);
            position: relative;
            border-radius: 32.5px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #fff;
            color: #9e4b00;
            background-color: #fff2b9;
            font-weight: 700;

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

            .click-area {
              @include pos(350px, 65px, 0px, 0px);
              border-radius: 32.5px;
            }

            .result-icon {

              @include box(49px, 45px);
              margin-left: 20px;


              .icon-correct {
                @include box(100%, 100%);
                @include bg_pos("qa/correct.png");
              }

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

          .correct {
            color: #d42122;
          }

          .incorrect {
            color: #fff2b9;
            background-color: #d42122;

          }
        }

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


      }
    }

    .return-btn {
      @include pos(363px, 113px, 179px, 887px);
      @include bg_pos("qa/cls-btn.png");
      display: none;
    }

    .create-btn {
      @include pos(363px, 113px, 179px, 887px);
      @include bg_pos("qa/create-btn.png");
      display: none;
    }

    .qa-megaphone {
      @include pos(171px, 208px, 562px, 512px);
      @include bg_pos("qa/megaphone.png");
      pointer-events: none;
    }
  }
}
</style>