<template>
  <div class="inform-list">
    <div class="list">
      <ul class="list-block">
        <li
          :id="`event${item.eventID}`"
          class="list-item"
          v-for="(item, index) in mockdata"
          @click="sentSelectedEventTitle(item)"
          :class="{ 'list-item-selected': selectedCondition(item) }"
          :key="index"
        >
          <ul>
            <li class="list-item-icon">
              <svg-icon v-if="item.eventType == '教師私訊'" icon-class="message" />
              <svg-icon v-if="item.eventType == '作業'" icon-class="doc" />
              <svg-icon v-if="item.eventType == '課前預習'" icon-class="selflearninginTime" />
              <svg-icon
                v-if="item.eventType == '評量'&&item.eventSubject!='綜合學科'"
                icon-class="test"
                class="reset-testIcon"
              />
              <svg-icon
                v-if="item.eventType == '評量'&&item.eventSubject=='綜合學科'"
                icon-class="multiTest"
              />
              <svg-icon v-if="item.eventType == '投票'" icon-class="vote" />
              <svg-icon v-if="item.eventType == '公告'" icon-class="slide" />
              <svg-icon v-if="item.eventType == 'Hiteach電子筆記'" icon-class="hiteach" />
              <svg-icon v-if="item.eventType == '問卷'" icon-class="quesnaire" />
            </li>
            <li class="list-item-info" :class="{'list-item-infonofeedback': isNoFeedback(item)}">
              <p class="list-item-title"  :class="{'list-item-titleEn':getCurrentLang()=='en'}">
                <span class="list-item-typeMark">{{ transTypetoEn(item.eventType) }}</span>

                <span>{{ item.eventName }}</span>
              </p>
              <p class="list-item-time">
                <span class="teacher-name">{{ item.teacher }}</span>
                {{$t('studentWeb.postAt')}} {{ item.endTime }} 14:20
              </p>
            </li>
            <li class="list-item-isDone" v-if="item.isDone==true">
              <!---可能產生反饋的圖示-->
              <div class="done-feedback" v-show="item.eventType == '投票'">
                <span class="score-num">B</span>
              </div>
              <div class="done-feedback" v-show="item.eventType == '評量'">
                <span class="score-num">{{randomScore()}}</span>
              </div>
              <div class="done-feedback" v-show="item.eventType == '作業'">
                <span class="score-num">{{randomScore()}}</span>
              </div>
              <!---可能產生反饋的圖示-->
            </li>
          </ul>
        </li>
      </ul>
    </div>
    {{scrollListfromInfoPop()}}
  </div>
</template>

<script>
import { Random } from "mockjs";
import mockdata from "@/api/newData";
import mockdataEn from "@/api/newDataEn";
export default {
  name: "InformList",
  mounted() {
    this.scrollList();
  },
  data() {
    return {
      mockdata: "",
      eventPageType: ["課前預習", "評量", "作業", "投票","問卷"], //活動出現的類型
    };
  },
  created() {
    this.createMockdata();
    if (this.$store.getters.getIsSelectedNow == "") {
      this.sentFirstItemActive();
    }
  },
  methods: {
    getCurrentLang() {
      return localStorage.getItem('lang');
    },
    isNoFeedback(item){
      return !(item.eventType == '課前預習'&&item.endTime>'2020.02.10')&&!(item.eventType == '評量' && item.eventSubject=='綜合學科'&&item.endTime > '2020.02.10')&&(item.isDone==false&&item.endTime > '2020.02.10')||item.eventType == '教師私訊'||item.eventType == 'Hiteach電子筆記'||item.eventType == '公告'
    },
    transTypetoEn(type) {
      if (localStorage.getItem("lang") == "en") {
        if (type == "投票") return "Vote";
        else if (type == "評量") return "Exam";
        else if (type == "作業") return "Homework";
        else if (type == "課前預習") return "Preview";
        else if (type == "公告") return "Billboard";
        else if (type == "教師私訊") return "Message";
        else if (type == "Hiteach電子筆記") return "HiTeach Note";
      } else return type;
    },
    createMockdata: function () {
      if (localStorage.getItem("lang") == "en") {
        this.mockdata = mockdataEn.eventList;
      } else this.mockdata = mockdata.eventList;
    },
    randomScore: function () {
      return Random.integer(70, 96);
    },
    sentFirstItemActive() {
      let tempArr = [];
      this.$store.commit("ChangeItemName", "");
      for (let i = 0; i < this.mockdata.length; i++) {
        tempArr.push(this.mockdata[i]);
      }
      this.sentSelectedEventTitle(tempArr[0]);
    },
    sentSelectedEventTitle: function (item) {
      //this.$router.push("/studentWeb/EventView/" + item.eventID);
      //改變ItemName的狀態 vuex mutations
      this.$store.commit("ChangeItemName", item);
      //螢幕寬度<767px時，直接關掉sidebar
      if (window.innerWidth <= 768) {
        this.$store.commit("ToggleSidebar", false);
      }
    },
    scrollList() {
      let targetItem = document.getElementById(
        `event${this.$store.getters.getItemTitle.eventID}`
      );
      if (targetItem.style.display == "none") {
        targetItem.style.display = "block";
      }
      console.log(
        this.$store.getters.getScrollvalue,
        document.getElementById(
          `event${this.$store.getters.getItemTitle.eventID}`
        ).offsetTop
      );
      document.querySelectorAll(".inform-list .list-block")[0].scrollBy({
        //畫面中有多個tabpane，指定為event-list中的進行捲動
        top: targetItem.offsetTop > 600 ? targetItem.offsetTop - 2 : 0,
        behavior: "smooth",
      });
    },
    scrollListfromInfoPop() {
      if (this.$store.getters.getisFromInfoPoptoScroll == true) {
        //當從通知操作進行捲動時，將篩選條件清空

        //console.log("收到從通知切換項目");

        let targetItem = document.getElementById(
          `event${this.$store.getters.getItemTitle.eventID}`
        );
        let scrollList = document.querySelectorAll(
          ".inform-list .list-block"
        )[0];

        if (scrollList !== undefined) {
          let scrollvalue = 0;
          if (targetItem.offsetTop > 600) {
            scrollvalue = targetItem.offsetTop - 2;
          } else if (targetItem.offsetTop < 600) {
            scrollvalue = -scrollList.scrollHeight;
          }
          //console.log(scrollList.scrollHeight, scrollvalue);
          scrollList.scrollTo({
            top: scrollvalue,
            behavior: "smooth",
          });
        }
      }
      this.$store.commit("SetisFromInfoPoptpScroll", false);
    },

    selectedCondition(item) {
      if (
        this.$store.getters.getIsSelectedNow == true &&
        this.$store.getters.getItemTitle.eventName == item.eventName
      ) {
        return true;
      } else return false;
    },
  },
};
</script>

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