<template>
  <div class="quesnaire">
    <div v-if="WarmMessageisOpen" class="warmMessage">
      <div class="messageCard animate__animated animate__fadeInDown">
        <!--全部都有作答的提示框-->
        <div v-if="showMessageNum == 1">
          <h2>提交成功</h2>
          <svg-icon
            icon-class="quesnaireFinished"
            class="quesnairefinished-icon"
          />

          <p>提交成功，活動結束前仍可進行修改再次提交</p>
        </div>
        <!--有題目沒作答的提示框-->
        <div v-if="showMessageNum == 2">
          <h2>有必答題目未回答</h2>
          <svg-icon
            icon-class="quesnaireUnfinished"
            class="quesnairefinished-icon"
          />

          <p>
            你有
            <span class="undoNum">{{ undo }} 題 </span
            >必答問題未答，請先完成再提交
          </p>
          <button class="messageCardBtn" @click="closeWarmMessage()">
            確定
          </button>
        </div>
      </div>
    </div>
    <br />
    <EventBasicInfo />

    <div v-if="this.$store.getters.getItemTitle.isDone == false">
      <div v-if="this.$store.getters.getItemTitle.endTime <= '2020.02.10'">
        <br />
        <div class="dec animate__animated animate__bounceInLeft">
          <svg-icon icon-class="handonHint" class="warm-icon" />
          <span class="warm-hint"
            >問卷時間已經結束，您本次問卷並未提交，問卷結果如下。</span
          >
        </div>
         <QuesNaireReport />
      </div>
    </div>

    <div
      v-if=" this.$store.getters.getItemTitle.isDone == true && this.$store.getters.getItemTitle.endTime <= '2020.02.10' "
    >
      <QuesNaireReport />
    </div>

    <!--問卷完成後，在時間結束前仍可修改答案再提交-->
    <div
      v-if="(this.$store.getters.getItemTitle.isDone == false && this.$store.getters.getItemTitle.endTime > '2020.02.10') || (this.$store.getters.getItemTitle.isDone == true && this.$store.getters.getItemTitle.endTime > '2020.02.10') "
    >
      <BillBoardandLightBox />
      <div class="title-rect-group">
        <div class="title-rect" />
        <h2 class="title-rect-name">問卷內容</h2>
      </div>
      <br />
      <span class="mustAns"><strong>*為必答問題</strong></span>

      <div v-for="(item, index) in qesNaire()" :key="index">
        <br />
        <strong
          :class="{
            hintnoAns: hintnoAns == true && noAnsNo.includes(item.qNo),
          }"
          ><span v-if="item.qNo <= 8" class="mustAns">* &nbsp;</span
          >{{ item.qNo }}.{{ item.qDes }} ({{  item.qType == "單選" || item.qType == "多選" ? item.qType : "" }} {{ item.qType == "判斷" || item.qType == "填充" ? "判斷 " : "" }})</strong
        >

        <div v-if="item.qType == '判斷' || item.qType == '填充'">
          <!--textarea
            class="commentArea"
            v-model="checkers[item.qNo - 1]"
            required
            placeholder="輸入相關建議..."
          ></textarea-->
          <label
            class="unitTestBtn"
            
          >
            <input
              type="radio"
              value="A"
              v-model="checkers[item.qNo - 1]"
            />
            <div class="unitTestbg">True</div>
          </label>
           <label
            class="unitTestBtn"
            
          >
            <input
              type="radio"
              value="B"
              v-model="checkers[item.qNo - 1]"
            />
            <div class="unitTestbg">false</div>
          </label>
        </div>
        <div
          v-if="
            item.qType != '判斷' &&
            item.qType != '填充' &&
            item.haveImgAns == 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[item.qNo - 1]"
            />
            <div class="unitTestbg">{{ option }}.{{ item.ansDesc[index] }}</div>
          </label>
        </div>
        <div
          v-if="
            item.qType != '判斷' &&
            item.qType != '填充' &&
            item.haveImgAns == true
          "
          class="checkerwithImg"
        >
          <label
            class="unitTestBtn unitTestbtnWithImg"
            v-for="(option, index) in item.ansOptions"
            :key="index"
          >
            <input
              :type="qtypeOption(item.qType)"
              :value="option"
              v-model="checkers[item.qNo - 1]"
            />
            <div class="unitTestbg" v-show="index < 4">
              <span>
                {{ option }}.{{ item.ansDesc[index] }}
                <img
                  class="checkImg"
                  :src="`https://source.unsplash.com/random/300x200/?water${index}`"
                  alt
                />
              </span>
            </div>
          </label>
        </div>

        <Divider v-if="index != 9" />
      </div>
      <br />
      <br />
      <button class="uploadBtn" @click="submitMessage()">
        <svg-icon icon-class="quesnaire" class="uloadBtn-icon" />

        <span
          v-if="
            isFirstSubmitted == false &&
            this.$store.getters.getItemTitle.isDone == false
          "
        >
          提交問卷
        </span>
        <span
          v-if="
            isFirstSubmitted == true ||
            this.$store.getters.getItemTitle.isDone == true
          "
          >再次提交</span
        >
      </button>
    </div>

    {{ createdSaveCheckers() }}
    <!--監聽如果切換時自動重置--->
  </div>
</template>

<script>
import QuesNaireReport from "./QuesNaireReport";
import EventBasicInfo from "../../EventBasicInfo";
import BillBoardandLightBox from "../../EventView/BillBoardandLightBox";
export default {
  name: "QuesNaire",
  components: {
    EventBasicInfo,
    BillBoardandLightBox,
    QuesNaireReport,
  },
  data() {
    return {
      checkers: [],
      undo: 0,
      showMessageNum: 0,
      WarmMessageisOpen: false,
      isFirstSubmitted: false,
      hintnoAns: false,
      noAnsNo: [],
    };
  },

  created() {
    this.WarmMessageisOpen = false;
    this.isFirstSubmitted = false;
    this.hintnoAns = false;
    this.showMessageNum = 0;

    this.checkers = [];
    this.noAnsNo = [];
    this.createdSaveCheckers();
  },
  methods: {
    submitMessage() {
      //檢查使用者是否有漏題，有漏題進行提示
      var undoQuestion = 0;
      for (var i = 0; i <= 7; i++) {
        //假設前面8題為必答問題
        if (this.checkers[i] == "") {
          this.noAnsNo.push(i + 1);
          undoQuestion++;
        }
      }
      console.log("問卷未做題目" + undoQuestion + "-題號:" + this.noAnsNo);
      this.undo = undoQuestion;

      if (this.undo != 0) {
        this.showMessageNum = 2;
        this.hintnoAns = true;
      } else {
        this.showMessageNum = 1; //沒漏題，顯示提交成功
        this.hintnoAns = false;
        this.noAnsNo = [];
        this.$store.commit(
          "SavefinishedItemID",
          this.$store.getters.getItemTitle.eventID
        );
        this.isFirstSubmitted = true;
      }
      this.WarmMessageisOpen = true;

      if (this.showMessageNum == 1) {
        setTimeout(() => {
          this.WarmMessageisOpen = false;
        }, 3000);
      }

      //顯示下個活動提示框
    },
    closeWarmMessage() {
      this.WarmMessageisOpen = false;
    },
    createdSaveCheckers() {
      if (this.$store.getters.getResetSurvey == true) {
        this.checkers = [];
        var mockcheckersheet = [];
        for (let i = 0; i < 10; i++) {
          if (
            this.$store.getters.getItemTitle.isDone == false &&
            this.$store.getters.getFinishedItem.includes(
              this.$store.getters.getItemTitle.eventID
            ) == false
          ) {
            mockcheckersheet.push([]);
          } else if (
            this.$store.getters.getFinishedItem.includes(
              this.$store.getters.getItemTitle.eventID
            ) == true ||
            this.$store.getters.getItemTitle.isDone == true
          ) {
            mockcheckersheet.push("B");
          }
        }
        this.checkers = mockcheckersheet;
        this.$store.commit("resetSurvey", false);
        this.WarmMessageisOpen = false;
        this.showMessageNum = 0;
        this.isFirstSubmitted = false;
        this.hintnoAns = false;
        this.noAnsNo = [];
      }
    },
    qesNaire() {
      return this.$store.getters.getItemTitle.qesNaire;
    },
    qtypeOption: function (type) {
      //console.log(type);
      if (type == "多選") {
        return "checkbox";
      } else return "radio";
    },
  },
};
</script>

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