<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(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 ){
      gsap.set('.create-btn', { display: 'block' })
    }else{
      gsap.set('.next-btn', { display: 'block' })

    }

  })

}


// 下一题
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', { display: 'none' })

  })

}

// 查看结果事件
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, scale: 0.4, autoAlpha: 0, })
  gsap.to('.question-lantern-icon', { duration: 5, transformOrigin: '100% 0%', rotation: '10deg', repeat: -1, yoyo: true, ease: 'none' })


});
</script>

<template>
  <div class="QuestionPage" @touchmove.prevent>
    <div class="question-bg">
      <div class="bottom-fan-1"></div>
      <div class="bottom-fan-2"></div>
      <div class="question-bottom-bg"></div>
    </div>
    <div class="question-container">
      <div class="container-fan-1"></div>
      <div class="container-fan-2"></div>

      <div class="question-box">
        <!-- 问题序号 -->
        <div class="qa-number">{{ questionList[currentId].id }}</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 class="question-tips">打一系列产品</div>
          </div>
          <!-- 选项 -->
          <div class="answer-box">
            <div class="answer" :class="isChecked ? item.result + '-bg' : ''"
              v-for="item in questionList[currentId].answer" :key="item.aid">
              <div class="answer-text-box">
                <div class="answer-text" v-for="a in item.text" :key="a">
                  {{ item.aid }}.{{ a }}
                </div>
              </div>
              <div class="option-tips">
                <div :class="item.result"></div>
              </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">{{li}}</div>
          </div>
          <div class="next-btn" @click="nextQuestion($event)"></div>
          <div class="create-btn" @click="viewResult($event)"></div>
        </div>
      </div>
      <div class="question-lantern-icon"></div>
      <div class="question-gold-icon-1"></div>
      <div class="question-gold-icon-2"></div>
    </div>
    <!-- 进度条 -->
    <Progress :percentage="(currentId + 1) / 3 * 100" pivot-color="#7232dd" :show-pivot="false"
      color="linear-gradient(to right, rgb(255 153 153), rgb(221 50 50))" />
  </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-bottom-bg {
      pointer-events: none;
      @include box(750px, 393px);
      position: absolute;
      left: 0px;
      bottom: 0px;
      @include bg_pos("qa/bottom-bg.png");
    }

    .bottom-fan-1 {
      @include pos(370px, 334px, 545px, 1022px);
      @include bg_pos('index/fan-3.png');
    }

    .bottom-fan-2 {
      @include pos(350px, 205px, 494px, 1128px);
      @include bg_pos('index/fan-4.png');
    }
  }


  .question-container {
    @include pos(750px, 1624px, 0px, 50%);
    transform: translateY(-50%);
    @include flexCen();

    .question-lantern-icon {
      // pointer-events: none;
      @include pos(349px, 443px, 489px, 49px);
      @include bg_pos('qa/lantern-icon.png');
    }

    .container-fan-1 {
      pointer-events: none;
      @include pos(235px, 574px, 0px, 60px);
      @include bg_pos("index/fan-1.png");
    }

    .container-fan-2 {
      pointer-events: none;
      @include pos(316px, 317px, -205px, 405px);
      @include bg_pos("index/fan-2.png");
    }

    .question-box {
      @include pos(656px, 913px, 47px, 339px);
      @include bg_pos("qa/question-box.png");

      .qa-number {
        @include pos(100px, 56px, 278px, 89px);
        font-size: 40px;
        font-style: italic;
        color: #c61a1a;
        font-weight: 700;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .qa-question-box {
        @include pos(570px, 700px, 43px, 194px);
        display: flex;
        flex-direction: column;
        // justify-content: space-around;
        justify-content: flex-start;
        align-items: center;

        // 问题样式
        .question {
          display: flex;
          flex-direction: column;
          // margin-bottom: 10px;
          height: 270px;
          justify-content: center;

          .question-text {
            width: 100%;
            font-family: 'DouyinSansBold';
            font-size: 35px;
            color: rgb(255, 255, 255);
            text-align: center;
            padding: 10px;
            text-shadow: 0.675px 2.923px 6px rgba(164, 18, 14, 0.004);
            // -webkit-transform: matrix( 0.63514641527437,0,0,0.63514641527437,0,0);
          }

          .question-tips {
            font-size: 25px;
            width: 100%;
            font-family: 'DouyinSansBold';
            color: rgb(255, 255, 255);
            text-align: center;
            padding: 10px;
            text-shadow: 0.675px 2.923px 6px rgba(164, 18, 14, 0.004);
          }
        }

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

          // 选中状态
          .correct-bg {
            border: 1px solid rgb(255, 238, 186) !important;
            background-image: linear-gradient(177deg, rgb(255, 184, 127) 0%, rgb(255, 238, 186) 100%);
            background-image: -webkit-linear-gradient(177deg, rgb(255, 184, 127) 0%, rgb(255, 238, 186) 100%);

            .answer-option {
              color: #96100f;
            }

            .answer-text-box {
              color: #96100f !important;
            }

          }

          .incorrect-bg {
            background-image: -webkit-linear-gradient(177deg, rgb(195, 59, 22) 0%, rgb(209, 84, 51) 100%);
            box-shadow: 0px 3px 6px 0px rgba(133, 0, 3, 0.85), inset 0px 2px 5px 0px rgba(236, 74, 42, 0.004);

            .answer-option {
              color: #ffe2ad;
            }

            .answer-text-box {
              color: #ffe2ad !important;
            }

          }



          .answer {
            @include box(476px, 92px);
            position: relative;
            border-radius: 47.5px;
            border: 2px solid rgb(255, 225, 172);
            // margin-bottom: 35px;
            justify-content: space-between;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;

            .click-area {
              @include pos(476px, 92px, 0px, 0px);
              border-radius: 47.5px;
            }


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

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

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



            .answer-text-box {
              @include box(335px, 100%);
              font-family: 'HarmonyOS_Sans_SC_Regular';
              color: #ffe2ad;
              font-size: 28px;
              display: flex;
              flex-direction: column;
              justify-content: center;

              .answer-text {
                width: 100%;
                // text-align: center;
                padding-left: 40px;
              }

            }
          }





        }

        // 解析样式
        .analysis {
          visibility: hidden;
          width: 95%;
          font-family: 'HarmonyOS_Sans_SC_Regular';
          font-size: 20px;
          color: #ffe2ad;
          text-align: center;
          // padding: 20px;
          height: 100px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
        }

        .next-btn{
          @include box(234px,65px);
          @include bg_pos("qa/next-btn.png");
          display: none;

        }
        .create-btn{
          @include box(234px,65px);
          @include bg_pos("qa/create-btn.png");
          display: none;
        
        }

      }
    }

    .question-gold-icon-1 {
      pointer-events: none;
      @include pos(135px, 128px, 604px, 773px);
      @include bg_pos("qa/gold-icon.png");
    }

    .question-gold-icon-2 {
      pointer-events: none;
      @include pos(276px, 241px, -70px, 1089px);
      @include bg_pos("qa/gold-icon-2.png");
    }

  }
}
</style>