<template>
  <div class="study-list">
    <div class="list">
      <div class="event-selector-block">
        <!---搜尋--->
        <!--div class="search">
          <div class="search-btn" @click="showSearch()">
            <svg-icon
              icon-class="search"
              class="searchIcon"
              :class="{ openSearch: openSearch }"
            />
          </div>
          <div class="search-wrapper" :class="{ openSearch: openSearch }">
            <Input type="text" v-model="search" placeholder="搜尋" clearable />
          </div>
        </div-->
        <!---搜尋--->
        <!--h4 class="list-title">自主學習清單</h4-->
      </div>
      <ul class="list-block">
        <div v-if="noItem == true" class="emptycondition">
          <svg-icon icon-class="empty-white-box" class="empty-Icon" />
          <br />目前無資料 ~
        </div>
        <li
          class="list-item"
          v-show="item.eventType == '課前預習'"
          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="note" class="note-icon" />
            </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('studentWeb.studyview-title')}}</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: "StudyList",
  data() {
    return {
      noItem: false,
      mockdata: '',
      openSearch: false, //打開搜尋器
      search: "",
      checkers: [
        [[], [], [], [], []],
        [[], [], [], [], []],
        [[], [], [], [], []],
      ],
    };
  },
  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 == "課前預習") {
          tempArr.push(this.mockdata[i]);
        }
      }
      if (tempArr.length != 0) {
        this.sentSelectedEventTitle(tempArr[0]);
      } else {
        this.noItem = true;

        this.$store.commit("ChangeItemName", null);
      }
    },

    showSearch() {
      this.openSearch = !this.openSearch;
      //console.log(this.openSearch);
    },
    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);
      }
      //重置預習活動
      this.$store.commit("PassPhaseTest", 0);
      this.$store.commit("ChangeCurrentPhase", 0);
      this.$store.commit("ChangeCurrentSelectedReadingName", 1);
    },

    selectedCondition(item) {
      if (
        this.noItem == false &&
        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/study-list.css";
</style>
