<template>
  <div class="vote">
   
      <div v-if="WarmMessageisOpen" class="warmMessage ">
        <div class="messageCard animate__animated animate__fadeInDown ">
          <h2>{{ $t("studentWeb.vote.voteSuccess") }}</h2>
          <svg-icon icon-class="votefinished" class="votefinished-icon" />

          <p>{{ $t("studentWeb.vote.voteDes") }}</p>
        </div>
      </div>
 
    
      <div v-if="isHintNextItem == true" class="warmMessage">
        <div class="messageCard previewNextItemCard animate__animated animate__fadeInDown" >
          <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>
          <div class="setting-checkbox">
            <input type="checkbox" v-model="unhintNextItem" />
            <label> 下次不再詢問，如欲恢復提示，於個人設定頁面勾選</label>
          </div>
          <br />
          <button @click="cancelPreview()">取消，自行查看</button>
          <button @click="gotoNextItem()">確定</button>
        </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">{{ $t("studentWeb.vote.timeoutHint") }}</span>
        </div>
      </div>
      <div v-if="this.$store.getters.getItemTitle.endTime > '2020.02.10'">
        <BillBoardandLightBox />

        <div class="title-rect-group">
          <div class="title-rect" />
          <h2 class="title-rect-name">{{ $t("studentWeb.vote.bollotbox") }}</h2>
        </div>
        <!--和評測模組一樣-->
        <br />
        Q：{{ this.$store.getters.getItemTitle.vote.voteDes }}
        <br />
        <br />
        <div class="checkAnswer">
          <label
            class="testBtn"
            v-for="(item, index) in this.$store.getters.getItemTitle.vote.voteQA
              .ansDesc"
            :key="index"
          >
            <input type="checkbox" :value="item" v-model="voteChecked" />
            <div class="testbg">
              <span>{{ index + 1 }}. {{ item }}</span>
            </div>
          </label>
        </div>
        <button class="uploadBtn" @click="submitMessage()">
          <svg-icon icon-class="vote" class="uploadBtn-icon" />
          <span v-if="isFirstVoted == false">{{ $t("studentWeb.vote.submit") }}</span>
          <span v-else>{{ $t("studentWeb.vote.reVote") }}</span>
        </button>
        <span
          class="clickbutnoChoosehint"
          v-if="clickbutnoChoose == true && voteChecked == ''"
          >請至少選一個選項，再按送出</span
        >
      </div>
    </div>

    <div
      class="voteResults"
      v-if="this.$store.getters.getItemTitle.isDone == true"
    >
      <br />
      <h3 class="voteResultsMainRow ">
        {{ $t("studentWeb.vote.voteResult") }}
        <span class="voteResultsMainKeyWord animate__animated animate__flash">B</span>
      </h3>

      <br />
      <h3>1.{{ $t("studentWeb.vote.voteDesDefault") }}</h3>

      <br />
      <div v-for="item in item" :key="item">
        <div class="voteResultsItem" :class="{ voteResultSelect: item == 'B','animate__animated animate__headShake':item == 'B' }">
          <svg-icon
            icon-class="isDone"
            class="voteResultsIcon"
            v-if="item == 'B'"
          />

          <p>{{ item }}. {{ itemRandomDesc() }}</p>
        </div>

        <br />
      </div>
      <br />
      <div align="center">
        <Card class="vote-chart-card">
          <VoteResultChart />
        </Card>
      </div>
      <br />
    </div>
  </div>
</template>

<script>
import EventBasicInfo from "../../EventBasicInfo";
import BillBoardandLightBox from "../../EventView/BillBoardandLightBox";
import { Random } from "mockjs";
import VoteResultChart from "./VoteResultChart";
import mockdata from "@/api/newData";
import mockdataEn from "@/api/newDataEn";

export default {
  name: "Vote",
  components: {
    EventBasicInfo,
    VoteResultChart,
    BillBoardandLightBox,
  },
  created() {
    this.WarmMessageisOpen = false;
    this.voteChecked = [];
    this.clickbutnoChoose = false;
    this.isFirstVoted = false;
    if(localStorage.getItem("lang") == ""){
      this.mockdata = mockdata.eventList;
    }
    if (localStorage.getItem("lang") == "tw") {
      this.mockdata = mockdata.eventList;
    } else this.mockdata = mockdataEn.eventList;
    
  },
  data() {
    return {
      unhintNextItem: false,
      mockdata: "",
      nextItem: "", //存放下個活動預告
      isHintNextItem: false,
      isFirstVoted: false,
      item: ["A", "B", "C", "D", "E"],
      voteChecked: [],
      WarmMessageisOpen: false,
      clickbutnoChoose: false,
    };
  },

  methods: {
    itemRandomDesc: function () {
      if (localStorage.getItem("lang") == "tw") {
        return Random.cparagraph(1, 7);
      } else return Random.paragraph(1, 2);
    },
    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];
      }
    },
    submitMessage() {
      if (this.voteChecked != "") {
        this.clickbutnoChoose = false;
        this.WarmMessageisOpen = true;
        this.isFirstVoted = true;
        this.$store.commit(
          "SavefinishedItemID",
          this.$store.getters.getItemTitle.eventID
        );
        setTimeout(() => {
          this.WarmMessageisOpen = false;
        }, 2000);
        this.previewNext();
        //加入下一個活動的提示框
        console.log(localStorage.getItem("hintNextItem")); //讀取是否顯示提示下一個
        if (localStorage.getItem("hintNextItem") != "false") {
          setTimeout(() => {
            this.isHintNextItem = true;
          }, 4000);
        }
      } else if (this.voteChecked == "") {
        this.clickbutnoChoose = true;
      }
    },
    cancelPreview() {
      this.isHintNextItem = false;
    },
    gotoNextItem() {
      if (this.unhintNextItem == true) {
        this.$store.commit("sethintNextItem", false);
      }
       
      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]);
        this.isHintNextItem = false;
      } else {
          this.$router.push("/studentWeb/homeView");
      }
    },
  },
};
</script>

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