<template>
  <div
    class="course-list"
    :class="{ courselistEn: this.$store.getters.getCurrentLaguage == 'en' }"
  >
    <!--課程加入成功-->
    <div
      class="warmMessage"
      v-if=" this.$store.getters.getMycID.coureseMessageOpen == true && this.$store.getters.getMycID.addSuccess == true " >
      <div class="messageCard animate__animated animate__fadeInDown">
        <div>
          <h3>課程加入成功</h3>
          <svg-icon icon-class="addCourseSuc" class="addCourseIcon" />

          <h3>
            <span class="typeMark">{{ this.$store.getters.getMycID.myCourseID[  this.$store.getters.getMycID.myCourseID.length - 1 ] }}</span
            ><span>新加課程名稱</span>
          </h3>
          <p>可於左側課程清單檢視課程簡介</p>
        </div>
      </div>
    </div>

    <!--課程已經加入-->
    <div
      class="warmMessage"
      v-if="
        this.$store.getters.getMycID.coureseMessageOpen == true &&
        this.$store.getters.getMycID.addSuccess == 'exist'
      "
    >
      <div class="messageCard animate__animated animate__fadeInDown">
        <div>
          <h3>課程已經加入</h3>
          <svg-icon icon-class="addCoursefail" class="addCourseIcon" />
          <p>可於左側課程清單檢視該課程簡介</p>
        </div>
      </div>
    </div>

    <!--課程加入失敗-->
    <div
      class="warmMessage"
      v-if=" this.$store.getters.getMycID.coureseMessageOpen == true && this.$store.getters.getMycID.addSuccess == false ">
      <div class="messageCard animate__animated animate__fadeInDown">
        <div>
          <h3>課程加入失敗</h3>
          <svg-icon icon-class="addCoursefail" class="addCourseIcon" />
          <p>查無所輸入代碼之課程，或該課程您未獲教師授權參與</p>
        </div>
      </div>
    </div>
    <!--課程加入失敗-->

    <div class="list">
      <ul class="list-block">
        <Tabs
          :value="this.$store.getters.getMycID.addSuccess == true ? 'tab2' : 'tab1' "  >
          <TabPane :label="$t('studentWeb.defaultClass')" name="tab1" :align="currentView=='table'?'center':'left'">
            <div class="listViewBtn" @click="changeView('list')" :class="{chooseView:currentView=='list'}"><svg-icon icon-class="list-text" /></div>
            <div class="tableViewBtn" @click="changeView('table')" :class="{chooseView:currentView=='table'}">
              <svg-icon icon-class="table" />
            </div>

            <table class="courseTable" width="85%" style="table-layout: fixed" v-if="currentView=='table'">
              <tr>
                <th v-for="(item, index) in timetitle" :key="index">
                  {{ item }}
                </th>
              </tr>

              <tr>
                <td class="table-time">08:00 ~10:00</td>
                <td
                  @click="sentSelectedEventTitle(item)"
                  v-for="(item, index) in courseList"
                  :key="`a+${index}`"
                  v-show="item.courseType == '表定' && index <= 4"
                  class="courseName"
                  :class="{ 'table-item-selected': selectedCondition(item) }"
                >
                  {{ item.courseName }}
                  <div class="list-item-typeMark">
                    T{{ item.courseID.substr(0, 5) }}
                  </div>
                </td>
                <td
                  @click="sentSelectedEventTitle(item)"
                  v-for="(item, index) in courseList"
                  :key="`b+${index}`"
                  v-show="item.courseType == '臨時' && index < 5"
                  class="courseName"
                  :class="{ 'table-item-selected': selectedCondition(item) }"
                >
                  {{ item.courseName }}
                  <div class="list-item-typeMark">
                    T{{ item.courseID.substr(0, 5) }}
                  </div>
                </td>
              </tr>

              <tr>
                <td class="table-time">10:00 ~12:00</td>
                <td
                  @click="sentSelectedEventTitle(item)"
                  v-for="(item, index) in courseList"
                  :key="`c+${index}`"
                  v-show="item.courseType == '表定' && 5 < index && index <= 10"
                  class="courseName"
                  :class="{ 'table-item-selected': selectedCondition(item) }"
                >
                  {{ item.courseName }}
                  <div class="list-item-typeMark">
                    T{{ item.courseID.substr(0, 5) }}
                  </div>
                </td>
                <td
                  @click="sentSelectedEventTitle(item)"
                  v-for="(item, index) in courseList"
                  :key="`d+${index}`"
                  v-show="item.courseType == '臨時' && 5 < index && index <= 10"
                  class="courseName"
                  :class="{ 'table-item-selected': selectedCondition(item) }"
                >
                  {{ item.courseName }}
                  <div class="list-item-typeMark">
                    T{{ item.courseID.substr(0, 5) }}
                  </div>
                </td>
              </tr>
              <tr>
                <td class="table-time">13:00 ~15:00</td>
                <td
                  @click="sentSelectedEventTitle(item)"
                  v-for="(item, index) in courseList"
                  :key="index"
                  v-show=" item.courseType == '表定' && 10 < index && index <= 15 "
                  class="courseName"
                  :class="{ 'table-item-selected': selectedCondition(item) }"
                >
                  {{ item.courseName }}
                  <div class="list-item-typeMark">
                    T{{ item.courseID.substr(0, 5) }}
                  </div>
                </td>
                <td
                  @click="sentSelectedEventTitle(item)"
                  v-for="(item, index) in courseList"
                  :key="`e+${index}`"
                  v-show=" item.courseType == '臨時' && 10 < index && index <= 15 "
                  class="courseName"
                  :class="{ 'table-item-selected': selectedCondition(item) }"
                >
                  {{ item.courseName }}
                  <div class="list-item-typeMark">
                    T{{ item.courseID.substr(0, 5) }}
                  </div>
                </td>
              </tr>
              <tr>
                <td class="table-time">15:00 ~17:00</td>
                <td
                  @click="sentSelectedEventTitle(item)"
                  v-for="(item, index) in courseList"
                  :key="`f+${index}`"
                  v-show=" item.courseType == '表定' && 15 < index && index <= 20 "
                  class="courseName"
                  :class="{ 'table-item-selected': selectedCondition(item) }"
                >
                  {{ item.courseName }}
                  <div class="list-item-typeMark">
                    T{{ item.courseID.substr(0, 5) }}
                  </div>
                </td>
                <td
                  @click="sentSelectedEventTitle(item)"
                  v-for="(item, index) in courseList"
                  :key="`g+${index}`"
                  v-show=" item.courseType == '臨時' && 15 < index && index <= 20 "
                  class="courseName"
                  :class="{ 'table-item-selected': selectedCondition(item) }"
                >
                  {{ item.courseName }}
                  <div class="list-item-typeMark">
                    T{{ item.courseID.substr(0, 5) }}
                  </div>
                </td>
              </tr>
              <tr>
                <td class="table-time">17:00 ~18:00</td>
                <td
                  @click="sentSelectedEventTitle(item)"
                  v-for="(item, index) in courseList"
                  :key="`h+${index}`"
                  v-show="item.courseType == '表定' && 20 < index && index <= 25 "
                  class="courseName"
                  :class="{ 'table-item-selected': selectedCondition(item) }"
                >
                  {{ item.courseName }}
                  <div class="list-item-typeMark">
                    T{{ item.courseID.substr(0, 5) }}
                  </div>
                </td>
                <td
                  @click="sentSelectedEventTitle(item)"
                  v-for="(item, index) in courseList"
                  :key="`i+${index}`"
                  v-show=" item.courseType == '臨時' && 20 < index && index <= 25 "
                  class="courseName"
                  :class="{ 'table-item-selected': selectedCondition(item) }"
                >
                  {{ item.courseName }}
                  <div class="list-item-typeMark">
                    T{{ item.courseID.substr(0, 5) }}
                  </div>
                </td>
              </tr>
            </table>
            <li
              class="list-item"
              v-for="(item, index) in courseList"
              @click="sentSelectedEventTitle(item)"
              :class="{ 'list-item-selected': selectedCondition(item) }"
              :key="index"
              v-show="item.courseType == '表定'&&currentView=='list'"
            >
              <ul>
                <li class="list-item-info">
                  <p class="list-item-title">
                    <span class="list-item-typeMark">T{{item.courseID.substr(0, 5)}}</span>
                    {{item.courseName}}
                  </p>
                </li>
              </ul>
            </li>
          </TabPane>
          <TabPane :label="$t('studentWeb.tempClass')" name="tab2">
            <!--剛加入的課程-->
            <li
              class="list-item"
              @click="
                sentSelectedEventTitle(
                  courseList[courseList.length - index - 2]
                )
              "
              :class="{
                'list-item-selected': selectedCondition(
                  courseList[courseList.length - index - 2]
                ),
              }"
              v-for="(item,
              index) in this.$store.getters.getMycID.myCourseID
                .slice()
                .reverse()"
              :key="`c+${index}`"
            >
              <ul>
                <li class="list-item-info">
                  <p class="list-item-title">
                    <span class="list-item-typeMark">{{ item }}</span>
                    {{ "新加課程名稱" }}
                  </p>
                </li>
              </ul>
            </li>
            <!--剛加入的課程-->
            <li
              class="list-item"
              v-for="(item, index) in courseList"
              @click="sentSelectedEventTitle(item)"
              :class="{ 'list-item-selected': selectedCondition(item) }"
              :key="`j+${index}`"
              v-show="item.courseType == '臨時'"
            >
              <ul>
                <li class="list-item-info">
                  <p class="list-item-title">
                    <span class="list-item-typeMark"
                      >T{{ item.courseID.substr(0, 5) }}</span
                    >
                    {{ item.courseName }}
                  </p>
                </li>
              </ul>
            </li>
          </TabPane>
        </Tabs>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "CourseList",
  data() {
    return {
      currentView:'table',
      messageOpen: false,
      timetitle:
        localStorage.getItem("lang") == "tw"
          ? ["時間", "一", "二", "三", "四", "五"]
          : ["time", "Mon", "Tue", "Wed", "Thu", "Fri"],
        courseList: this.$api.studentWeb.courseList
    };
  },
  created() {
    if (this.$store.getters.getIsSelectedNow == false) {
      this.sentFirstItemActive();
    }
  },
  methods: {
    changeView(type){
      this.currentView=type
    },
    sentFirstItemActive() {
        let tempArr = [];
        console.log(this.$api.studentWeb.courseList)
      for (let i = 0; i < this.courseList.length; i++) {
        if (this.courseList[i].courseType != "臨時") {
          tempArr.push(this.courseList[i]);
        }
      }
      this.sentSelectedEventTitle(tempArr[0]);
    },
    sentSelectedEventTitle: function (item) {
      this.$router.push("/courseList#" + item.courseID);
      //改變ItemName的狀態 vuex mutations
      this.$store.commit("ChangeItemName", item);
      //螢幕寬度<767px時，直接關掉sidebar
      if (window.innerWidth <= 991) {
        this.$store.commit("ToggleSidebar", false);
      }
    },
    selectedCondition(item) {
      if (
        this.$store.getters.getIsSelectedNow == true &&
        this.$store.getters.getItemTitle.courseName == item.courseName
      ) {
        return true;
      } else return false;
    },
  },
};
</script>

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