<template>
  <div class="school-calender">
    <div class="calendarArea">
      <div class="dateCtl">
        <button class="todayBtn" @click="setToday">
          {{ $t("studentWeb.today") }}
        </button>

        <h2 class="dateNum" v-if="getCurrentLang() == 'tw'">
          {{ calendar.year }} 年 {{ calendar.month + 1 }} 月
          <span
            v-if="today.month + 1 == calendar.month + 1 && isClickDate == false"
            >{{ calendar.date }} 日 星期{{ CNday[calendar.day] }}</span
          >
          <span v-if="isClickDate == true">{{ currentClickDate }} 日</span>
        </h2>
        <h2 class="dateNum" v-if="getCurrentLang() == 'en'">
          {{ calendar.year }} {{ ". " + (calendar.month + 1) }}
          <span
            v-if="today.month + 1 == calendar.month + 1 && isClickDate == false"
            >{{ "." + calendar.date }}</span
          >
          <span v-if="isClickDate == true">{{ ". " + currentClickDate }}</span>
        </h2>
        <div class="monthCtlbtn">
          <button @click="adjustMonth(-1)">
            <Icon type="ios-arrow-up" />
          </button>

          <button @click="adjustMonth(1)">
            <Icon type="ios-arrow-down" />
          </button>
        </div>
      </div>
      <div class="calendar">
        <div class="weekDay">
          <div class="cNday" v-for="i in CNday" :key="i">{{ i }}</div>
        </div>
        <div class="week" v-for="i in 6" :key="i">
          <div
            @click="clickDate(calendarMonth[(i - 1) * 7 + j - 1], i, j)"
            class="day"
            v-for="j in 7"
            :data-date="calendarMonth[(i - 1) * 7 + j - 1].date"
            :key="j"
            :class="{
              clickDate:
                calendarMonth[(i - 1) * 7 + j - 1].year === calendar.year &&
                calendarMonth[(i - 1) * 7 + j - 1].month === calendar.month &&
                isClickDate == true &&
                calendarMonth[(i - 1) * 7 + j - 1].date === currentClickDate &&
                i == currentClickWeek &&
                j == currentClickCNday,
              today:
                calendarMonth[(i - 1) * 7 + j - 1].year === today.year &&
                calendarMonth[(i - 1) * 7 + j - 1].month === today.month &&
                calendarMonth[(i - 1) * 7 + j - 1].date === today.date &&
                isClickDate == false,
              todaymarkWhileClick:
                calendarMonth[(i - 1) * 7 + j - 1].year === today.year &&
                calendarMonth[(i - 1) * 7 + j - 1].month === today.month &&
                calendarMonth[(i - 1) * 7 + j - 1].date === today.date &&
                isClickDate == true,
              other:
                calendarMonth[(i - 1) * 7 + j - 1].month !== calendar.month,
            }"
          >
            <ul class="noteItemGroup">
              <li
                class="classNoteItem"
                v-if="
                  calendarMonth[(i - 1) * 7 + j - 1].month == calendar.month &&
                  j != 7 &&
                  j != 1 &&
                  j != 3 &&
                  i != 4
                "
              >
                {{ Math.floor(Math.random() * 8) + 1 }}
              </li>

              <li
                class="workNoteItem"
                v-if="
                  calendarMonth[(i - 1) * 7 + j - 1].month == calendar.month &&
                  j != 1 &&
                  j != 7 &&
                  j != 1 &&
                  i != 2
                "
              >
                {{ Math.floor(Math.random() * 8) + 1 }}
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="noteMeaning">
        <li>
          <div class="courseItemDot" />
          <span>{{ $t("studentWeb.importEvent") }}</span>
        </li>
        <li>
          <div class="taskItemDot" />
          <span>{{ $t("studentWeb.deadlineTasks") }}</span>
        </li>
      </div>
    </div>

    <div class="detailArea">
      <div v-if="getCurrentLang() == 'tw'">
        <h2 class="dateTitle" v-if="isClickDate == true && isLoading == false">
          {{ currentClickYear }} 年 {{ currentClickMonth + 1 }} 月
          {{ currentClickDate }} 日 日程概覽
        </h2>
        <h2 class="dateTitle" v-if="isClickDate == false && isLoading == false">
          {{ today.year }} 年 {{ today.month + 1 }} 月 {{ today.date }} 日
          日程概覽
        </h2>
      </div>
      <div v-if="getCurrentLang() == 'en'">
        <h2 class="dateTitle" v-if="isClickDate == true && isLoading == false">
          {{ currentClickYear }} . {{ currentClickMonth + 1 }} .
          {{ currentClickDate }} - Overview
        </h2>
        <h2 class="dateTitle" v-if="isClickDate == false && isLoading == false">
          {{ today.year }} . {{ today.month + 1 }} . {{ today.date }} - Overview
        </h2>
      </div>

      <div class="taskDetail">
        <div v-if="isLoading == true" class="taskDetail-Loading">
          <loading
            :active.sync="isLoading"
            :is-full-page="false"
            background-color="#fff"
            :opacity="0"
          >
            <template slot="default">
              <svg-icon icon-class="ies5logo3" class="loader-icon" />
              <span class="aclassoneloading3">Student</span>
            </template>
          </loading>
        </div>
        <Row :gutter="30" v-if="isLoading == false">
          <i-col
            v-if="currentClickCNday != 1 && currentClickCNday != 7"
            :xs="24"
            :sm="24"
            :md="24"
            :lg="6"
          >
            <div class="title-rect-group">
              <div class="title-rect" />
              <h2 class="title-rect-name">{{ $t("studentWeb.schedule") }}</h2>
              <table class="courseTable">
                <tr>
                  <th>{{ $t("studentWeb.time") }}</th>
                  <th>{{ $t("studentWeb.course") }}</th>
                </tr>

                <tr>
                  <td>08:00 ~10:00</td>
                  <td
                    class="courseName"
                    @click="sentSelectedCourseTitle(courseListFilterDefault[0])"
                  >
                    {{ $t("studentWeb.mockcourses[0]") }}
                  </td>
                </tr>

                <tr>
                  <td>10:00 ~12:00</td>
                  <td
                    class="courseName"
                    @click="sentSelectedCourseTitle(courseListFilterDefault[1])"
                  >
                    {{ $t("studentWeb.mockcourses[1]") }}
                  </td>
                </tr>
                <tr>
                  <td>13:00 ~15:00</td>
                  <td
                    class="courseName"
                    @click="sentSelectedCourseTitle(courseListFilterDefault[2])"
                  >
                    {{ $t("studentWeb.mockcourses[2]") }}
                  </td>
                </tr>
                <tr>
                  <td>15:00 ~17:00</td>
                  <td
                    class="courseName"
                    @click="sentSelectedCourseTitle(courseListFilterDefault[3])"
                  >
                    {{ $t("studentWeb.mockcourses[3]") }}
                  </td>
                </tr>
                <tr>
                  <td>17:00 ~18:00</td>
                  <td
                    class="courseName"
                    @click="sentSelectedCourseTitle(courseListFilterDefault[4])"
                  >
                    {{ $t("studentWeb.mockcourses[4]") }}
                  </td>
                </tr>
              </table>
            </div>
          </i-col>
          <i-col
            v-if="
              currentClickCNday != 1 &&
              currentClickCNday != 7 &&
              currentClickWeek != 4 &&
              currentClickCNday != 3
            "
            :xs="24"
            :sm="24"
            :md="24"
            :lg="8"
          >
            <div class="title-rect-group">
              <div class="title-rect" />
              <h2 class="title-rect-name">{{ $t("studentWeb.importEventTitle") }}</h2>
              <div class="courseNote">
                <div
                  v-for="(item, index) in courseItem"
                  :key="index"
                  class="courseNoteItem"
                >
                  <h3 class="courseItem-title">{{ item.title }}</h3>
                  <p>
                    <strong>{{ $t("studentWeb.des") }}：</strong>
                    {{ item.description }}
                  </p>
                  <p>
                    <strong>{{ $t("studentWeb.time") }}：</strong>
                    {{ item.time }}
                  </p>
                  <p>
                    <strong>{{ $t("studentWeb.place") }}：</strong>
                    {{ item.place }}
                  </p>
                </div>
              </div>
            </div>
          </i-col>
          <i-col
            v-if="
              currentClickCNday != 1 &&
              currentClickCNday != 7 &&
              currentClickWeek != 2
            "
            :xs="24"
            :sm="24"
            :md="24"
            :lg="10"
          >
            <div class="title-rect-group">
              <div class="title-rect" />
              <h2 class="title-rect-name">
                {{ $t("studentWeb.deadlineTasksTitle") }}
              </h2>
              <div class="list" v-if="currentClickWeek != 2">
                <div class="list-block">
                  <li
                    @click="sentSelectedEventTitle(item)"
                    :id="`event${item.eventID}`"
                    class="list-item"
                    v-show="
                      eventPageType.includes(item.eventType) == true &&
                      item.isDone == false &&
                      item.endTime > '2020.02.10' &&
                      index < 8
                    "
                    v-for="(item, index) in mockdata"
                    :key="index"
                  >
                    <ul>
                      <li class="list-item-icon">
                        <svg-icon
                          v-if="item.eventType == '作業'"
                          icon-class="doc"
                        />
                        <svg-icon
                          v-if="item.eventType == '問卷'"
                          icon-class="quesnaire"
                        />
                        <svg-icon
                          v-if="item.eventType == '課前預習'"
                          icon-class="selflearninginTime"
                        />
                        <svg-icon
                          v-if="item.eventType == '評量'"
                          icon-class="test"
                          class="reset-testIcon"
                        />
                        <svg-icon
                          v-if="item.eventType == '投票'"
                          icon-class="vote"
                        />
                      </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">{{
                            getCurrentLang() == "tw"
                              ? item.eventType
                              : transTypetoEn(item.eventType)
                          }}</span>

                          <span>{{ item.eventName }}</span>
                        </p>
                        <p
                          class="list-item-time"
                          v-if="getCurrentLang() == 'tw'"
                        >
                          當日 23:59 截止
                        </p>
                        <p class="list-item-time" v-else>Due today 23:59</p>
                      </li>
                    </ul>
                  </li>
                </div>
              </div>
            </div>
          </i-col>
          <i-col
            v-if="currentClickCNday == 1 || currentClickCNday == 7"
            class="emptycondition"
          >
            <svg-icon icon-class="empty-white-box" class="empty-Icon" />
            <br />{{ $t("studentWeb.empty") }}
          </i-col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
import mockdata from "@/api/newData";
import mockdataEn from "@/api/newDataEn";
import Loading from "vue-loading-overlay";
import "vue-loading-overlay/dist/vue-loading.css";
export default {
  name: "SchoolCalender",
  components: {
    Loading,
  },
  data() {
    return {
      //loading畫面
      isLoading: false,
      opacity: 0.6,
      //loading畫面
      currentClickDate: 0,
      currentClickYear: 0,
      currentClickMonth: 0,
      currentClickWeek: 0,
      currentClickCNday: 0,
      isClickDate: false,
      windowHeight: window.innerHeight - 75,
      MyNo: "X",
      MyName: this.$t("studentWeb.calendar-title"),
      //行事曆
      calendar: {
        year: 0,
        month: 0,
        date: 0,
        day: 0,
      },
      today: {
        year: 0,
        month: 0,
        date: 0,
        day: 0,
      },
      CNday:
        this.getCurrentLang() == "tw"
          ? ["日", "一", "二", "三", "四", "五", "六"]
          : ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
      //項目細節

      courseItem:
        this.getCurrentLang() == "tw"
          ? [
              {
                title: "數學大會考",
                description:
                  "攜帶2B鉛筆橡皮擦，考試期間請務必關閉手機，屢勸不聽違規者，將進行懲處，並以零分計算",
                time: "當日 8:00",
                place: "各班教室",
              },
              {
                title: "資料結構上機考",
                description: "前三名同學將獲得神秘的小禮物",
                time: "當日 10:00",
                place: "T503階梯教室",
              },
              {
                title: "金銀梅獎頒獎典禮",
                description: "表揚優秀同學",
                time: "當日 12:00",
                place: "升旗台前集合",
              },
              {
                title: "學生社團申請截止",
                description: "逾時不候",
                time: "當日 12:00",
                place: "學務處社團辦公室 陳老師",
              },
              {
                title: "課後加強班繳費截止",
                description: "逾時請去總務處繳費喔～",
                time: "2020-02-21 14:00",
                place: "超商或銀行繳費",
              },
            ]
          : [
              {
                title: "Mathematics Test",
                description:
                  "Bring a 2B pencil eraser. Please be sure to turn off your mobile phone during the test. Those who do not listen to the rules will be punished and calculated as zero points",
                time: "On the day 8:00",
                place: "Classroom in each class",
              },
              {
                title: "Computer test on data structure",
                description:
                  "The first three students will get mysterious little gifts",
                time: "The current day 10:00",
                place: "T503 lecture hall",
              },
              {
                title: "Golden, Silver Awards Ceremony",
                description: "Recognize outstanding students",
                time: "12:00 of the day",
                place: "Assemble in front of the flag-raising platform",
              },
              {
                title: "Student Club Application Deadline",
                description: "Not waiting for timeout",
                time: "12:00 of the day",
                place: "Teacher Chen, School Affairs Office and Society Office",
              },
              {
                title: "Deadline for payment of enhanced classes after class",
                description:
                  "Please go to the general affairs office to pay the fee after the time is over~",
                time: "2020-02-21 14:00",
                place: "Super business or bank payment",
              },
            ],
      mockdata:
        localStorage.getItem("lang") == "tw"
          ? mockdata.eventList
          : mockdataEn.eventList,
      coursedata:
        localStorage.getItem("lang") == "tw"
          ? mockdata.courseList
          : mockdataEn.courseList,
      eventPageType: ["課前預習", "評量", "作業", "投票", "問卷"], //本頁出現的類型
    };
  },

  mounted() {
    this.setToday();
    this.$nextTick(() => {
      window.addEventListener("resize", this.onResize);
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.onResize);
  },
  methods: {
    getCurrentLang() {
      return localStorage.getItem("lang");
    },
    transTypetoEn(type) {
      if (type == "投票") return "Vote";
      else if (type == "評量") return "Exam";
      else if (type == "作業") return "Homework";
      else if (type == "課前預習") return "Preview";
    },
    onResize() {
      this.windowHeight = window.innerHeight - 75;
    },
    forceRerender() {
      // remove the my-component component from the DOM
      this.renderComponent = false;

      this.$nextTick(() => {
        // add my-component component in DOM
        this.renderComponent = true;
      });
    },
    setToday() {
      const date = new Date();
      this.today.year = this.calendar.year = date.getFullYear();
      this.today.month = this.calendar.month = date.getMonth(); // 0~11
      this.today.date = this.calendar.date = date.getDate();
      this.today.day = this.calendar.day = date.getDay();
      this.isClickDate = false;
    },
    adjustYear(fix) {
      this.calendar.year += fix;
      this.isClickDate = false;
    },
    sentSelectedCourseTitle: function (item) {
      this.$router.push("/courseList#" + item.courseID);
      //改變ItemName的狀態 vuex mutations
      this.$store.commit("ChangeItemName", item);
      //螢幕寬度<767px時，直接關掉sidebar
      if (window.innerWidth <= 768) {
        this.$store.commit("ToggleSidebar", false);
      }
    },
    adjustMonth(fix) {
      // this.calendar.month += fix 範圍
      this.isClickDate = false;
      let month = this.calendar.month + fix;
      if (month > 11) {
        this.adjustYear(1);
        this.calendar.month = 0;
      } else if (month < 0) {
        this.adjustYear(-1);
        this.calendar.month = 11;
      } else {
        this.calendar.month = month;
      }
    },
    sentSelectedEventTitle: function (item) {
        this.$router.push("/studentWeb/eventView#" + item.eventID);
      //螢幕寬度<767px時，直接關掉sidebar
      if (window.innerWidth <= 768) {
        this.$store.commit("ToggleSidebar", false);
      }
      //改變ItemName的狀態 vuex mutations
      this.$store.commit("ChangeItemName", item);
      if (
        document.getElementById(`event${item.eventID}`).style.display == "none"
      ) {
        document.getElementById(`event${item.eventID}`).style.display = "block";
        console.log(document.getElementById(`event${item.eventID}`).offsetTop);
      }
      if (document.getElementById(`event${item.eventID}`).offsetTop > 600) {
        let scrollvalue = document.getElementById(`event${item.eventID}`)
          .offsetTop;
        console.log("選項在清單可視範圍外!!");
        this.$store.commit("scrollList", scrollvalue);
      }
    },
    clickDate(date, weekNo, cNday) {
      if (date.month === this.calendar.month) {
        this.currentClickDate = date.date;
        this.isClickDate = true;
        this.currentClickWeek = weekNo;
        this.currentClickCNday = cNday;
        this.currentClickYear = this.calendar.year;
        this.currentClickMonth = this.calendar.month;
        this.doAjax();
      } else {
        this.isClickDate = false;
      }
    },
    doAjax() {
      this.isLoading = true;

      // simulate AJAX
      setTimeout(() => {
        this.forceRerender();
        this.isLoading = false;
      }, 2000);
    },
  },
  computed: {
    courseListFilterDefault() {
      let courseFilterDefault = [];
      for (let i = 0; i < this.coursedata.length; i++) {
        if (this.coursedata[i].courseType == "表定")
          courseFilterDefault.push(this.coursedata[i]);
      }
      return courseFilterDefault;
    },
    calendarFirstDay() {
      const mDate = new Date(this.calendar.year, this.calendar.month, 1);
      const date = new Date(
        this.calendar.year,
        this.calendar.month,
        1 - mDate.getDay()
      );
      return {
        year: date.getFullYear(),
        month: date.getMonth(),
        date: date.getDate(),
        day: date.getDay(),
      };
    },
    calendarMonth() {
      const data = [];
      let date;
      for (let i = 0; i < 42; i++) {
        date = new Date(
          this.calendarFirstDay.year,
          this.calendarFirstDay.month,
          this.calendarFirstDay.date + i
        );
        data.push({
          year: date.getFullYear(),
          month: date.getMonth(),
          date: date.getDate(),
          day: date.getDay(),
        });
      }
      return data;
    },
  },
  created() {
    //發送本頁target 跟名字給App.Vue 的navBar
    this.$emit("onNavNo", this.MyNo);
    this.$emit("onNavName", this.MyName);
    this.$store.commit("ToggleSidebar", true);
  },
};
</script>

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