<template>
  <div class="hiteachNote-list">
    <div class="list">
      
      <ul class="list-block">
        <li
          class="list-item"
          v-show="item.eventType == 'Hiteach電子筆記'"
          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 icon-class="hiteach" />
            </li>
            <li class="list-item-info list-item-infonofeedback">
              <p class="list-item-title" :class="{'list-item-titleEn':getCurrentLang()=='en'}">
                <span class="list-item-typeMark">
                  T{{item.eventID.substr(0, 5)}}
                </span>
                
                <span>{{ item.eventName }}</span>
              </p>
              <p class="list-item-time">
                {{ item.endTime }}
              </p>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import mockdata from "@/api/newData";
import mockdataEn from "@/api/newDataEn";
export default {
  name: "HiteachNoteList",
  data() {
    return {
      mockdata: '',
    };
  },
   created() {
     this.createMockdata();
    this.sentFirstItemActive();
  },
  methods: {
     getCurrentLang() {
      return localStorage.getItem("lang");
    },
    createMockdata: function () {
      if (localStorage.getItem('lang') == "en") {
        this.mockdata = mockdataEn.eventList;
      } else this.mockdata = mockdata.eventList;
    },
       sentFirstItemActive() {
      let tempArr = [];
      for (let i = 0; i < this.mockdata.length; i++) {
        if (this.mockdata[i].eventType == "Hiteach電子筆記") {
          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);
      //螢幕寬度<680px時，直接關掉sidebar
      if(window.innerWidth<=680){
        this.$store.commit("ToggleSidebar", 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/hiteachNote-list.css";
</style>
