<template>
  <div id="Chapter1_1" class="content-wrap">
    <div style="margin: 30px 0px 50px; width: 20%">
      <router-link to="/MyPlan.page">
        <div class="logo mb25">
          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
        </div>
      </router-link>
    </div>
    <div class="title-box mb25 flex align-center mt40">
      <span class="title mr40">1. Hello WORLD</span>
      <span class="subtitle">my name is dd</span>
    </div>
    <div class="flex justify-between align-center">
      <div class="pre-btn" @click="goToPage('Chapter3_15')">
        <img src="../../../../resources/img/left.png" alt="" />
      </div>
      <div class="content title-box">
        <p class="title mt25 title-bg">Quiz Result</p>
        <!-- <div class="flex align-center mb30">
                    <p class="subtitle2 mr20"></p>
                    <button><img src="../../../../resources/img/btn10_s.png" alt="">
                 </button>
                </div> -->

        <div
          class="text-ct flex justify-center"
          style="gap: 150px; margin: 0 auto"
        >
          <div class="wrap-bg">
            <div class="title-box flex mb10 justify-between">
              <p class="title mb20">최종 점수</p>
              <button type="button" class="popup-close-btn" @click="closeBtn">
                <svg-icon
                  type="mdi"
                  :path="mdiWindowClose"
                  class="close-btn"
                ></svg-icon>
              </button>
            </div>
            <div style="width: 100%" class="flex mt30">
              <p class="title5"><em class="yellow">93</em></p>
              <p class="title4 ml10 mr10">&#47;</p>
              <p class="title4">100</p>
            </div>
          </div>
          <div class="bg-gray" style="width: 980px">
            <div class="title-box flex mb10 justify-between">
              <p class="title mb20">오답 문제 리스트</p>
              <button type="button" class="popup-close-btn" @click="closeBtn">
                <svg-icon
                  type="mdi"
                  :path="mdiWindowClose"
                  class="close-btn"
                ></svg-icon>
              </button>
            </div>
            <article class="mb20 flex-column result-box" style="gap: 20px">
              <div
                class="flex justify-between wrap"
                v-for="(item, index) in dataList"
                :key="index"
              >
                <div class="flex align-center">
                  <div>
                    <p class="title1 mr20">
                      {{ index + 1 }}
                    </p>
                  </div>
                  <div class="text-lf">
                    <p class="title1">
                      {{ item.prblmInfo.prblm_expln }}
                    </p>
                  </div>
                </div>
                <div>
                  <div class="flex align-center" style="gap: 10px">
                    <button
                      type="button"
                      title="정답 확인"
                      class="yellow-btn"
                      @click="
                        [
                          handleProblemDetail(item.prblmInfo),
                          goToProblemPage(problemType),
                        ]
                      "
                    >
                      정답 확인
                    </button>
                  </div>
                </div>
              </div>
            </article>
          </div>
        </div>
      </div>
      <div class="next-btn" @click="goToPage('Chapter3_16')">
        <img src="../../../../resources/img/right.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      timer: "00",
      showButton1: false,
      showButton2: false,
      showButton3: false,
      showButton4: false,

      // 단원 평가 아이디, 추후 세션으로 받게 변경
      evalId: "",

      dataList: [],

      prblmId: "",

      problemType: null,
    };
  },
  methods: {
    goToPage(page) {
      this.$router.push({ name: page });
    },
    goToProblemPage(page) {
      this.$router.push({ name: page });
    },
    handleDrag(dragNumber) {
      // Drag 버튼 숨기기
      // 여기서는 상태 관리를 통해 버튼을 제어합니다.
      if (dragNumber === 1) {
        this.showButton1 = false;
      } else if (dragNumber === 2) {
        this.showButton2 = false;
      } else if (dragNumber === 3) {
        this.showButton3 = false;
      }
    },
    showButton(dropNumber) {
      // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
      // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
      if (dropNumber === 1) {
        this.showButton1 = true;
      } else if (dropNumber === 2) {
        this.showButton2 = true;
      } else if (dropNumber === 3) {
        this.showButton3 = true;
      } else if (dropNumber === 4) {
        this.showButton4 = true;
      }
    },
    startTimer() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
      this.timer = 5;
      this.intervalId = setInterval(() => {
        if (this.timer > 0) {
          this.timer--;
        } else {
          clearInterval(this.intervalId);
        }
      }, 1000);
    },
    problemList() {},

    handleProblemDetail(item) {
      if (item.prblm_type_id === "prblm_type_001") {
        this.problemType = "Chapter3";
      } else if (item.prblm_type_id === "prblm_type_002") {
        this.problemType = "Chapter3_1";
      } else if (item.prblm_type_id === "prblm_type_003") {
        this.problemType = "Chapter3_2";
      } else if (item.prblm_type_id === "prblm_type_004") {
        this.problemType = "Chapter3_3";
      } else if (item.prblm_type_id === "prblm_type_005") {
        this.problemType = "Chapter3_3_1";
      } else if (item.prblm_type_id === "prblm_type_006") {
        this.problemType = "Chapter3_4";
      } else if (item.prblm_type_id === "prblm_type_007") {
        this.problemType = "Chapter3_5";
      } else if (item.prblm_type_id === "prblm_type_008") {
        this.problemType = "Chapter3_6";
      } else if (item.prblm_type_id === "prblm_type_009") {
        this.problemType = "Chapter3_7";
      } else if (item.prblm_type_id === "prblm_type_010") {
        this.problemType = "Chapter3_8";
      } else if (item.prblm_type_id === "prblm_type_011") {
        this.problemType = "Chapter3_9";
      } else if (item.prblm_type_id === "prblm_type_012") {
        this.problemType = "Chapter3_10";
      } else if (item.prblm_type_id === "prblm_type_013") {
        this.problemType = "Chapter3_11";
      } else if (item.prblm_type_id === "prblm_type_014") {
        this.problemType = "Chapter3_12";
      } else if (item.prblm_type_id === "prblm_type_015") {
        this.problemType = "Chapter3_13";
      } else if (item.prblm_type_id === "prblm_type_016") {
        this.problemType = "Chapter3_14";
      } else if (item.prblm_type_id === "prblm_type_017") {
        this.problemType = "Chapter3_15";
      } else if (item.prblm_type_id === "prblm_type_018") {
        this.problemType = "Chapter2_8";
      } else if (item.prblm_type_id === "prblm_type_019") {
        this.problemType = "Chapter2_7";
      } else if (item.prblm_type_id === "prblm_type_020") {
        this.problemType = "Chapter2_5";
      } else if (item.prblm_type_id === "prblm_type_021") {
        this.problemType = "Chapter2_6";
      } else if (item.prblm_type_id === "prblm_type_022") {
        this.problemType = "Chapter2_10";
      } else if (item.prblm_type_id === "prblm_type_023") {
        this.problemType = "Chapter2_11";
      } else if (item.prblm_type_id === "prblm_type_024") {
        this.problemType = "Chapter2_13";
      }
    },
  },
  watch: {},
  computed: {
    getAllProblems() {
      return this.$store.getters.getAllProblems;
    },
  },
  created() {
    console.log("Problem List :", this.getAllProblems);
    this.dataList = this.getAllProblems;
    this.evalId = this.$route.query.eval_id;
  },
  components: {},
  mounted() {
    this.problemList();
  },
};
</script>
<style scoped>
.textbox {
  height: 60px;
}

.textbox p {
  font-size: 28px;
  font-weight: bold;
  line-height: 65px;
}

.dropGroup button {
  position: relative;
}

.dropGroup button p {
  font-size: 48px;
}

.dragGroup button p {
  font-size: 48px;
}
</style>
