<template>
  <div class="preview-mission-multiTests">
    <div
      v-if=" this.$store.getters.getItemTitle.endTime <= '2020.02.10' && !eventType "
    >
      <br v-if="ishideHint == false" />
      <div class="dec animate__animated animate__bounceInLeft" v-if="ishideHint == false">
        <svg-icon icon-class="handonHint" class="warm-icon" />
        <span class="warm-hint">{{ $t("studentWeb.preview.timeoutHint") }}</span>
        <span @click="hidehint()" class="close-hint-btn">
          <Icon type="md-close" class="close-icon" />
        </span>
      </div>
    </div>
    <div class="title-rect-group">
      <div class="title-rect" />
      <h2 class="title-rect-name"> {{ eventType ? $t("studentWeb.preview.tutorial") : $t("studentWeb.preview.checkpoint")}}
      </h2>
    </div>

    <div>
      <br />
      <Row :gutter="30">
        <i-col :xs="24" :sm="24" :md="24" :lg="0">
          <div class="step-btn-smallscreen">
            <div class="step-btn-group">
              <div
                class="step-btn"
                @click="clickStepPhaseChange(0)"
                :class="{ 'step-finished':  this.$store.getters.getCurrentPassPhaseTest >= 1, 'step-selected': this.$store.getters.getCurrentPhase == 0, }"  >
                <span v-if="this.$store.getters.getCurrentPassPhaseTest >= 1">
                  <svg-icon icon-class="isDone" class="isDone-Icon" />
                </span>
                <span v-else>
                  {{ this.$store.getters.getCurrentPhase == 0 ? "◉" : 1 }}
                </span>
              </div>
              <div class="step-text-smallscreen">
                {{ $t("studentWeb.preview.previewContent.Unit") }}1
              </div>
              <div
                class="step-line-smallscreen"
                :class="{ 'step-line-link-smallscreen':  this.$store.getters.getCurrentPassPhaseTest >= 1,}"
              ></div>
            </div>
            <div class="step-btn-group">
              <div
                class="step-btn"
                @click="clickStepPhaseChange(1)"
                :class="{ 'step-finished':  this.$store.getters.getCurrentPassPhaseTest >= 2,  'step-selected': this.$store.getters.getCurrentPhase == 1,  }"
              >
                <span v-if="this.$store.getters.getCurrentPassPhaseTest >= 2">
                  <svg-icon icon-class="isDone" class="isDone-Icon" />
                </span>
                <span v-else>
                  {{ this.$store.getters.getCurrentPhase == 1 ? "◉" : 2 }}
                </span>
              </div>
              <div class="step-text-smallscreen">
                {{ $t("studentWeb.preview.previewContent.Unit") }}2
              </div>
              <div
                class="step-line-smallscreen"
                :class="{  'step-line-link-smallscreen':   this.$store.getters.getCurrentPassPhaseTest >= 2, }"
              ></div>
            </div>
            <div class="step-btn-group">
              <div
                class="step-btn"
                @click="clickStepPhaseChange(2)"
                :class="{ 'step-finished':  this.$store.getters.getCurrentPassPhaseTest >= 3, 'step-selected': this.$store.getters.getCurrentPhase == 2,  }"
              >
                <span v-if="this.$store.getters.getCurrentPassPhaseTest >= 3">
                  <svg-icon icon-class="isDone" class="isDone-Icon" />
                </span>
                <span v-else>
                  {{ this.$store.getters.getCurrentPhase == 2 ? "◉" : 3 }}
                </span>
              </div>
              <div class="step-text-smallscreen">
                {{ $t("studentWeb.preview.previewContent.Unit") }}3
              </div>
            </div>
          </div>
          
        </i-col>
        <i-col :xs="24" :sm="24" :md="24" :lg="22">
          <div class="preview-area" :class="{ lockContentBg: lockContent() }">
            <PreviewMissionUnitContent />
            <!--顯示隨堂測驗題目-->
            <!--如果前一單元的測驗沒過，不能做現在這個單元的測驗-->
            <transition name="flyIn">
              <div class="lockContent" v-if="lockContent()">
                <svg-icon icon-class="lock" class="lockIcon" />
                <h4>{{ $t("studentWeb.preview.crossUnitHint") }}</h4>
              </div>
            </transition>
            <!--如果前一單元的測驗沒過，不能做現在這個單元的測驗-->
            <div
              class="previewMission-unitTest"
              v-if="
                this.$store.getters.getCurrentSelectedReadingName == '隨堂考' &&
                this.$store.getters.getIsSentCurrentphase == false &&
                !lockContent()
              "
            >
              <h2 v-if="getCurrentLang() == 'tw'">
                第{{ this.$store.getters.getCurrentPhase + 1 }}單元隨堂考
              </h2>
              <h2 v-if="getCurrentLang() == 'en'">
                Unit {{ this.$store.getters.getCurrentPhase + 1 }} Quizzes
              </h2>
              <div
                v-show="getQNo() == index"
                v-for="(item, index) in this.$store.getters.getItemTitle
                  .previewMission[this.$store.getters.getCurrentPhase].unitQAs"
                :Key="index"
              >
                <br />
                <span class="qDes">
                  {{ item.qNo + ". " }}
                  <span class="qtype" v-if="getCurrentLang() == 'tw'"
                    >{{ item.qType }}題</span
                  >
                  <span class="qtype" v-if="getCurrentLang() == 'en'">{{   transQtypetoEn(item.qType) }}</span>
                  {{ item.qDes }}
                </span>
                <br />
                <br />
                <div v-if="item.qType == '判斷'" class="checker">
                  <label class="unitTestBtn yesNoBtn">
                    <input
                      type="radio"
                      value="Ｏ"
                      v-model="checkers[currentUnit][getQNo()]"
                    />
                    <div class="unitTestbg">○</div>
                  </label>
                  <label class="unitTestBtn yesNoBtn">
                    <input
                      type="radio"
                      value="X"
                      v-model="checkers[currentUnit][getQNo()]"
                    />
                    <div class="unitTestbg">
                      <Icon type="md-close" />
                    </div>
                  </label>
                </div>
                <div v-if="item.qType == '填充'">
                  <input
                    v-for="a in 3"
                    :key="a"
                    type="text"
                    v-model="checkers[currentUnit][getQNo()][a - 1]"
                    required
                    minlength="3"
                    maxlength="7"
                  />
                </div>
                <div
                  v-if="
                    item.qType != '判斷' &&
                    item.qType != '填充' &&
                    item.isOptionImg == false
                  "
                  class="checker"
                >
                  <label
                    class="unitTestBtn"
                    v-for="(option, index) in item.ansOptions"
                    :key="index"
                  >
                    <input
                      :type="qtypeOption(item.qType)"
                      :value="option"
                      v-model="checkers[currentUnit][getQNo()]"
                    />
                    <div class="unitTestbg">
                      {{ option }}.{{ Randomdesc() }}
                    </div>
                  </label>
                </div>
                <div
                  v-if="
                    item.qType != '判斷' &&
                    item.qType != '填充' &&
                    item.isOptionImg == true
                  "
                  class="checker"
                >
                  <label
                    class="testBtn"
                    v-show="index < 4"
                    v-for="(option, index) in item.ansOptions"
                    :key="index"
                  >
                    <input
                      :type="qtypeOption(item.qType)"
                      :value="option"
                      v-model="checkers[currentUnit][getQNo()]"
                    />
                    <div class="testbg">
                      <span>
                        {{ option }}.{{ Randomdesc() }}
                        <img
                          class="checkImg"
                          :src="`https://source.unsplash.com/random/300x200/?water${index}`"
                          alt
                        />
                      </span>
                    </div>
                  </label>
                </div>
              </div>

              <br />
              <!--切換頁-->

              <div class="pageCtl2 questionCtl">
                <button @click="preQ()" v-if="getQNo() != 0">
                  <Icon type="ios-arrow-back" />
                  {{ $t("studentWeb.preview.previous") }}
                </button>

                <button
                  @click="nextQ()"
                  v-if="getQNo() != 4"
                  :class="{
                    hintClick: checkers[currentUnit][getQNo()].length != 0,
                  }"
                >
                  {{ $t("studentWeb.preview.next") }}
                  <Icon type="ios-arrow-forward" />
                </button>
                <button
                  @click="scorefeedback()"
                  v-if="getQNo() == 4"
                  :class="{
                    hintClick: checkers[currentUnit][getQNo()].length != 0,
                  }"
                >
                  {{ $t("studentWeb.preview.sentAns") }}
                  <Icon type="ios-arrow-forward" />
                </button>
              </div>

              <br />
              <!--切換頁-->

              <br />
            </div>
            <!---->
            <loading
              :active.sync="isPartialLoading"
              :is-full-page="false"
              background-color="#fff"
              :opacity="0"
            >
              <template slot="default">
                <svg-icon icon-class="ies5logo3" class="loader-icon" />
                <span class="aclassoneloading3">Student</span>
              </template>
            </loading>
            <!---->
            <!--隨堂測驗結果-->
            <div
              v-if="
                this.$store.getters.getIsSentCurrentphase == true &&
                this.$store.getters.getCurrentSelectedReadingName == '隨堂考' &&
                isPartialLoading == false &&
                isPreviewNextItem == false
              "
              class="unitTest-result animate__animated animate__fadeInDown"
            >
              <h2 class="testResult-title" v-if="getCurrentLang() == 'tw'">
                單元{{ currentUnit + 1 }} 隨堂考結果
              </h2>
              <h2 class="testResult-title" v-if="getCurrentLang() == 'en'">
                Unit {{ currentUnit + 1 }} Answer Performance
              </h2>
              <br />
            
              <svg-icon
                v-if="isPassUnitTest(feedbackAns[currentUnit]) == '測驗通過'"
                class="yourAnsResultIcon "
                icon-class="rightAns2"
              />
              <svg-icon
                v-if="isPassUnitTest(feedbackAns[currentUnit]) == '測驗未過'"
                class="yourAnsResultIcon"
                icon-class="wrongAns"
              />
              <h3 v-if="getCurrentLang() == 'tw'">
                {{ isPassUnitTest(feedbackAns[currentUnit]) }}
              </h3>
              <h3 v-if="getCurrentLang() == 'en'">
                {{ transPassResult(isPassUnitTest(feedbackAns[currentUnit])) }}
              </h3>

              <table class="ansSheet ">
                <tr>
                  <th
                    v-for="index in feedbackAns[currentUnit].length"
                    :key="index"
                  >
                    {{ index }}
                  </th>
                </tr>
                <tr>
                  <td
                    v-for="(item, index) in feedbackAns[currentUnit]"
                    :key="index"
                  >
                    <span v-if="item == '答對'">Ｏ</span>
                    <span v-if="item == '答錯'">Ｘ</span>
                  </td>
                </tr>
              </table>

              <div class="pageCtl2">
                <button
                  @click="clickStepPhaseChange(currentUnit + 1)"
                  class="hintClick"
                  v-if="  getQNo() == 4 &&  currentUnit < 2 && isPassUnitTest(feedbackAns[currentUnit]) == '測驗通過' " >
                  {{ $t("studentWeb.preview.nextUnit") }}
                  <Icon type="ios-arrow-forward" />
                </button>
                <button
                  @click="tryAgain()"
                  class="hintClick"
                  v-if=" getQNo() == 4 && currentUnit <= 2 && isPassUnitTest(feedbackAns[currentUnit]) == '測驗未過' "
                >
                  <Icon type="ios-arrow-back" />{{ $t("studentWeb.preview.tryAgain") }}
                </button>

                <button
                  @click="previewNext()"
                  class="hintClick "
                  v-if="
                    currentUnit == 2 &&
                    isPassUnitTest(feedbackAns[currentUnit]) == '測驗通過'
                  "
                >
                  預覽下個活動 <Icon type="ios-arrow-forward" />
                </button>
                <br />
                <br />
                <h4>
                  {{ $t("studentWeb.preview.previewContent.Unit")
                  }}{{ currentUnit + 1 }}
                  {{ $t("studentWeb.preview.quizRetries") }}：{{  this.$store.getters.getTrytestCount[currentUnit] }}
                </h4>
              </div>
            </div>
            <!--隨堂測驗結果-->
            <!--預覽詢問下一個活動-->
            <div class="previewNextItemArea animate__animated animate__fadeInLeft" v-if="isPreviewNextItem == true">
              <h2>前往下一個活動</h2>
              <div class="list-item-icon">
                <svg-icon
                  v-if="nextItem.eventType == '作業'"
                  icon-class="doc"
                />
                <svg-icon
                  v-if="nextItem.eventType == '課前預習'"
                  icon-class="selflearninginTime"
                />
                <svg-icon
                  v-if="
                    nextItem.eventType == '評量' &&
                    nextItem.eventSubject != '綜合學科'
                  "
                  icon-class="test"
                  class="reset-testIcon"
                />
                <svg-icon
                  v-if="
                    nextItem.eventType == '評量' &&
                    nextItem.eventSubject == '綜合學科'
                  "
                  icon-class="multiTest"
                  class="reset-testIcon"
                />
                <svg-icon
                  v-if="nextItem.eventType == '投票'"
                  icon-class="vote"
                />
              </div>
              <p class="nextItemTitle">
                <span class="typeMark">{{ nextItem.eventType }}</span>
                {{ nextItem.eventName }}
              </p>
              <button @click="cancelPreview()">取消，自行查看</button>
              <button @click="gotoNextItem()">確定</button>
            </div>
            <!--預覽詢問下一個活動-->
            <!--顯示隨堂測驗題目End-->
          </div>
        </i-col>
        <i-col :xs="0" :sm="0" :md="0" :lg="2">
          <div
            class="step-btn"
            @click="clickStepPhaseChange(0)"
            :class="{ 'step-finished': this.$store.getters.getCurrentPassPhaseTest >= 1, 'step-selected': this.$store.getters.getCurrentPhase == 0, }"
          >
            <span v-if="this.$store.getters.getCurrentPassPhaseTest >= 1">
              <svg-icon icon-class="isDone" class="isDone-Icon" />
            </span>
            <span v-else>
              {{ this.$store.getters.getCurrentPhase == 0 ? "◉" : 1 }}
            </span>
          </div>
          <span class="step-text"
            >{{ $t("studentWeb.preview.previewContent.Unit") }}1</span
          >
          <div
            class="step-line"
            :class="{ 'step-line-link': this.$store.getters.getCurrentPassPhaseTest >= 1, }"
          />

          <div
            class="step-btn"
            @click="clickStepPhaseChange(1)"
            :class="{ 'step-finished': this.$store.getters.getCurrentPassPhaseTest >= 2, 'step-selected': this.$store.getters.getCurrentPhase == 1, }"
          >
            <span v-if="this.$store.getters.getCurrentPassPhaseTest >= 2">
              <svg-icon icon-class="isDone" class="isDone-Icon" />
            </span>
            <span v-else>
              {{ this.$store.getters.getCurrentPhase == 1 ? "◉" : 2 }}
            </span>
          </div>
          <span class="step-text"
            >{{ $t("studentWeb.preview.previewContent.Unit") }}2</span
          >
          <div
            class="step-line"
            :class="{ 'step-line-link': this.$store.getters.getCurrentPassPhaseTest >= 2, }"
          />
          <div
            class="step-btn"
            @click="clickStepPhaseChange(2)"
            :class="{ 'step-finished': this.$store.getters.getCurrentPassPhaseTest >= 3, 'step-selected': this.$store.getters.getCurrentPhase == 2, }"
          >
            <span v-if="this.$store.getters.getCurrentPassPhaseTest >= 3">
              <svg-icon icon-class="isDone" class="isDone-Icon" />
            </span>
            <span v-else>
              {{ this.$store.getters.getCurrentPhase == 2 ? "◉" : 3 }}
            </span>
          </div>
          <span class="step-text"
            >{{ $t("studentWeb.preview.previewContent.Unit") }}3</span
          >
           
        </i-col>
      </Row>
      <!--顯示教材描述-->
      <br />
      <h2 v-if="getCurrentLang() == 'tw'">
        第{{ this.$store.getters.getCurrentPhase + 1 }}單元:{{  this.$store.getters.getItemTitle.previewMission[  this.$store.getters.getCurrentPhase ].unitName }}
      </h2>
      <h2 v-if="getCurrentLang() == 'en'">
        Unit {{ this.$store.getters.getCurrentPhase + 1 }} -
        {{ this.$store.getters.getItemTitle.previewMission[  this.$store.getters.getCurrentPhase ].unitName }}
      </h2>
      <br />
      <p>
        {{this.$store.getters.getItemTitle.previewMission[  this.$store.getters.getCurrentPhase ].unitDes }}
      </p>
      <!--顯示教材描述-->
      <!--顯示教材按鈕-->
      <div>
        <div
          v-for="item in 3"
          class="tasks"
          :key="item"
          :class="{ selected: condition(item), fistTag: condition2() }"
          @click="sentCurrentSelectedReadingName(item)"
        >
          <ul>
            <li class="title">
              <span style="position: relative; top: 1px">
                <svg-icon icon-class="doc2" class="title-icon" />
              </span>
              {{ $t("studentWeb.preview.previewContent.tutorial") }} {{ item }}
            </li>
          </ul>
        </div>
        <div
          class="tasks"
          :class="{ selected: condition('隨堂考'), fistTag: condition2() }"
          @click="sentCurrentSelectedReadingName('隨堂考')"
        >
          <ul>
            <li class="title">
              <span style="position: relative; top: 1px">
                <svg-icon icon-class="test" class="title-icon" />
              </span>
              {{ $t("studentWeb.preview.previewContent.quiz") }}
            </li>

            <li
              class="finished"
              v-if=" this.$store.getters.getCurrentPhase + 1 <=  this.$store.getters.getCurrentPassPhaseTest " >
              <Icon class="doneicon" type="ios-checkmark" size="36" />
            </li>
            <li
              v-if=" !( this.$store.getters.getCurrentPhase + 1 <= this.$store.getters.getCurrentPassPhaseTest ) "
              class="unfinished"
            >
              <Icon class="doneicon" type="ios-checkmark" size="36" />
            </li>
          </ul>
        </div>
      </div>
      <br />
      <button @click='getType()' v-if="this.$store.getters.getNowPage=='活動'" class="uploadBtn" :class="{askBtn:this.$store.getters.getSidebarisOpen == true,askBtnfullscreen:this.$store.getters.getSidebarisOpen == false}" >
      <svg-icon icon-class="comment"  />&nbsp;我要發問
    </button>
      <!--顯示教材按鈕End-->
    </div>
  </div>
</template>

<script>
//import ChartView from "./CharView";
import Loading from "vue-loading-overlay";
import "vue-loading-overlay/dist/vue-loading.css";
import PreviewMissionUnitContent from "./PreviewMissionUnitContent";
import { Random } from "mockjs";
import mockdata from "@/api/newData";
import mockdataEn from "@/api/newDataEn";

export default {
  name: "PreviewMissionMultiTests",
  components: {
    PreviewMissionUnitContent,
    Loading,
  },
  props: ["eventType"],

  data() {
    return {
      mockdata: "",
      //局部loading畫面
      isPartialLoading: false,
      //局部loading畫面
      isPreviewNextItem: false,
      nextItem: "",
      currentUnit: 0,
      ishideHint: false,
      feedbackAns: [
        [[], [], [], [], []],
        [[], [], [], [], []],
        [[], [], [], [], []],
      ],
      checkers: [
        [[], [], [], [], []],
        [[], [], [], [], []],
        [[], [], [], [], []],
      ],
    };
  },
  created() {
     if(localStorage.getItem("lang") == ""){
      this.mockdata = mockdata.eventList;
    }
   
    if (localStorage.getItem("lang") == "tw") {
      this.mockdata = mockdata.eventList;
    } else this.mockdata = mockdataEn.eventList;
  },
        methods: {
            getType() {
                if (this.mockdata.length !== 0) {
                    for (let i = 0; i < this.mockdata.length; i++) {
                        if (this.mockdata[i].hiteachPPT !== undefined) {
                            console.log(i)
                            console.log(this.mockdata[i])
                        }
                    }
                }
            },
      //打开我要发问页面
    openCommentBoard(){
      this.$store.commit("ToggleSidebar",false);
      this.$store.commit('OpenCommentList',true)
      },
      //当前语言状态
      getCurrentLang() {
      console.log(localStorage)
      return localStorage.getItem("lang");
    },
    hidehint() {
      this.ishideHint = !this.ishideHint;
    },
    getQNo() {
      return this.$store.getters.getCurrentQuestionNo;
      },
    //是否通过测验
    isPassUnitTest: function (scoresArray) {
      let rightAns = 0;

      for (let i = 0; i < 5; i++) {
        if (scoresArray[i] == "答對") {
          rightAns++;
        }
      }
      if (rightAns >= 3) {
        this.$store.commit("PassPhaseTest", this.currentUnit + 1);

        return "測驗通過";
      } else return "測驗未過";
    },
    transPassResult(result) {
      if (result == "測驗通過") return "Challenge passed";
      else return "Challenge failed";
      },
    //加载动画
    doPartialLoading() {
      this.isPartialLoading = true;
      setTimeout(() => {
        this.isPartialLoading = false;
      }, 3000);
    },
    lockContent() {
      if (
        this.$store.getters.getCurrentPhase +
          1 -
          this.$store.getters.getCurrentPassPhaseTest >=
          2 &&
        this.$store.getters.getCurrentSelectedReadingName == "隨堂考"
      )
        return true;
      else return false;
      },
    //提交测验答案
    scorefeedback: function () {
      this.doPartialLoading();
      this.$store.commit("ToggleSentCurrentphase", true);
      let Qestions = this.$store.getters.getItemTitle.previewMission[
        this.$store.getters.getCurrentPhase
        ].unitQAs;
        console.log(Qestions)
      for (let i = 0; i < 5; i++) {
        if (Qestions[i].qType == "判斷") {
          if (this.checkers[this.currentUnit][i] == "Ｏ")
            //判斷題假設正確答案為Ｏ
            this.feedbackAns[this.currentUnit][i] = "答對";
          else {
            this.feedbackAns[this.currentUnit][i] = "答錯";
          }
        } else if (Qestions[i].qType == "單選") {
          if (this.checkers[this.currentUnit][i] == "C")
            //判斷題假設正確答案為Ｃ
            this.feedbackAns[this.currentUnit][i] = "答對";
          else {
            this.feedbackAns[this.currentUnit][i] = "答錯";
          }
        } else if (Qestions[i].qType == "多選") {
          if (this.checkers[this.currentUnit][i] != "") {
            //判斷題假設正確答案為AＣ
            if (
              this.checkers[this.currentUnit][i].toString() == "A,C" ||
              this.checkers[this.currentUnit][i].toString() == "C,A"
            ) {
              this.feedbackAns[this.currentUnit][i] = "答對";
            } else {
              this.feedbackAns[this.currentUnit][i] = "答錯";
            }
          } else {
            this.feedbackAns[this.currentUnit][i] = "答錯";
          }
        } else if (Qestions[i].qType == "填充") {
          if (this.feedbackAns[this.currentUnit][i].length == 0) {
            this.feedbackAns[this.currentUnit][i] = "答錯";
            //假設填空題只要為空是為答錯
          } else this.feedbackAns[this.currentUnit][i] = "答對";
        }
      }
      this.isPassUnitTest(this.feedbackAns[this.currentUnit]);
      if (this.$store.getters.getCurrentPassPhaseTest == 3) {
        this.$store.commit(
          "SavefinishedItemID",
          this.$store.getters.getItemTitle.eventID
        );
      }
    },
    condition: function (item) {
      if (
        this.selected == item &&
        this.$store.getters.getCurrentSelectedReadingName == item
      ) {
        /*console.log(
          "目前是condition1選中",
          item,
          this.$store.getters.getCurrentSelectedReadingName
        );*/
        return true;
      }
      if (this.$store.getters.getCurrentSelectedReadingName == 1 && item == 1) {
        //重置測驗
        this.testcheckeds = [];
        this.checkers = [
          [[], [], [], [], []],
          [[], [], [], [], []],
          [[], [], [], [], []],
        ];
        this.feedbackAns = [
          [[], [], [], [], []],
          [[], [], [], [], []],
          [[], [], [], [], []],
        ];
        this.yourAns = "請選答案";
        this.sentAns = false;
        return true;
      } else return false;
    },
    condition2: function () {
      if (
        this.selected == ""
        //this.$store.getters.getisSelectedReadingNow == false
      ) {
        //console.log("目前是condition2選中");
        return true;
      } else return false;
    },
    sentCurrentSelectedReadingName: function (item) {
      this.selected = item; //選中物件
      this.$store.commit("ChangeCurrentSelectedReadingName", item);
    },
    clickStepPhaseChange(phase) {
      this.$store.commit("ChangeCurrentPhase", phase);
      this.sentCurrentSelectedReadingName(1);
      this.$store.commit("ToggleSentCurrentphase", false);
      this.$store.commit("SetCurrentQuestionNo", 0);
      this.currentUnit = this.$store.getters.getCurrentPhase;
      console.log(this.currentUnit);
      this.testcheckeds = [];
      this.yourAns = "請選答案";
      this.sentAns = false;
    },
    gotohomepage() {
        this.$router.push("/studentWeb/homeView");
    },
    previewNext() {
      this.isPreviewNextItem = true;
      let eventPageType = ["課前預習", "評量", "作業", "投票"];
      let nextItems = [];
      for (let i = 0; i < this.mockdata.length; i++) {
        if (
          eventPageType.includes(this.mockdata[i].eventType) &&
          this.mockdata[i].isDone == false &&
          this.$store.getters.getFinishedItem.includes(
            this.mockdata[i].eventID
          ) == false
        ) {
          nextItems.push(this.mockdata[i]);  //引導使用者前往下一個未完成的項目
        }
      }
      if (nextItems != "") {
        if (
          nextItems[0].eventName ==
          this.mockdata[this.mockdata.length - 1].eventName
        ) {
          console.log("沒有下一個!");
          this.nextItem = "allfinished";
        }
        console.log("下一個：" + nextItems[0].eventName);
        this.nextItem = nextItems[0];
      }
    },
    cancelPreview() {
      this.isPreviewNextItem = false;
    },
    gotoNextItem() {
      if (this.nextItem != "allfinished") {
        this.$store.commit("ChangeItemName", this.nextItem);
          this.$router.push("/studentWeb/eventView#" + this.nextItem.eventID);
        this.$store.commit("SetisFromInfoPoptpScroll", true);
        //重置預習活動
        this.$store.commit("PassPhaseTest", 0);
        this.$store.commit("ChangeCurrentPhase", 0);
        this.$store.commit("ChangeCurrentSelectedReadingName", 1);
        this.$store.commit("ToggleSentCurrentphase", false);
        this.$store.commit("SetCurrentQuestionNo", 0);
        this.$store.commit("SetTrytestCount", [0, 0, 0]);
      } else {
          this.$router.push("/studentWeb/homeView");
      }
    },

    tryAgain() {
      let NowtrytestCount = this.$store.getters.getTrytestCount;
      NowtrytestCount[this.$store.getters.getCurrentPhase] =
        NowtrytestCount[this.$store.getters.getCurrentPhase] + 1;
      console.log(NowtrytestCount[this.$store.getters.getCurrentPhase]);

      this.$store.commit("SetTrytestCount", NowtrytestCount);
      this.clickStepPhaseChange(this.currentUnit);
    },
    preQ() {
      if (this.getQNo() > 0)
        this.$store.commit("SetCurrentQuestionNo", this.getQNo() - 1);
    },
    nextQ() {
      if (this.getQNo() < 4)
        this.$store.commit("SetCurrentQuestionNo", this.getQNo() + 1);
    },
    Randomdesc: function () {
      if (this.getCurrentLang() == "tw") {
        return Random.cparagraph(1, 2);
      } else {
        return Random.paragraph(1, 1);
      }
    },
    qtypeOption: function (type) {
      //console.log(type);
      if (type == "多選") {
        return "checkbox";
      } else return "radio";
    },
    transQtypetoEn(Qtype) {
      if (Qtype == "單選") {
        return "Single Choice";
      } else if (Qtype == "多選") {
        return "Multiple Choice";
      } else if (Qtype == "判斷") {
        return "True or False";
      } else if (Qtype == "填充") {
        return "Fill in the blank";
      } else return;
    },
  },
};
</script>

<style scoped>
@import "~@/assets/student-web/component_styles/previewMission-unitTest.css";
</style>
