<template>
  <div class="event-latest">
    <div class="title-rect" />
    <h2 class="title-rect-name">
      最新活動訊息
      <span class="feedbackNum">{{ newItemNow() }}</span>
    </h2>
    <div class="new-event-item-list ">
      <Row :gutter="20">
        <i-col
          :xs="24"
          :sm="24"
          :md="12"
          :lg="6"
          v-for="(item, index) in mockdata"
          :key="index"
          v-show=" eventPageType.includes(item.eventType) == true && item.isDone == false && index < 20 "
          ><!--item.isOverEndTime == false -->
          <ul
            class="new-event-item list-item"
            @click="sentSelectedEventTitle(item)"
            :style='{animation: `sldefadein ${index*0.1}s`}'
          >
            <li class="list-item-icon">
              <svg-icon v-if="item.eventType == '作業'" icon-class="doc" />
              <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">
              <p class="list-item-title">
                <span class="list-item-typeMark">{{ item.eventType }}</span>
                <span v-if="item.eventName.length >= 11">{{ item.eventName.substr(0, 10) + "..."}}</span>
                <span v-else>{{ item.eventName }}</span>
              </p>
              <p class="list-item-time">
                {{ item.startTime }} ~ {{ item.endTime }}
              </p>
            </li>
          </ul>
        </i-col>
      </Row>
    </div>
    <Divider dashed />
  </div>
</template>

<script>
import mockdata from "@/api/newData";
export default {
  name: "EventLatest",
  data() {
    return {
      //倒入資料
      mockdata: mockdata.eventList,
      eventPageType: ["課前預習", "評量", "作業", "投票","問卷"], //本頁出現的類型
      MyEventData: parseFloat(
        this.$store.getters.getCountedIsDonePercent
      ).toFixed(0),
      MyNo: "4", //接收NavBar 選定的那一頁icon標示
      MyName: "近期活動",
    };
  },
  created() {
    //發送本頁target 跟名字給App.Vue 的navBar
    this.$emit("onNavNo", this.MyNo);
    this.$emit("onNavName", this.MyName);
  },

  methods: {
    sentSelectedEventTitle: function(item) {
      console.log("click", item.title);
      this.$emit("onEventTitle", item.title);
          this.$router.push("/studentWeb/eventView#" + item.eventID);
      //改變ItemName的狀態 vuex mutations
      this.$store.commit("ChangeItemName", item);
    },
    newItemNow() {
      var a = 0;
      for (var i = 0; i < this.mockdata.length; i++) {
        if (
          this.eventPageType.includes(this.mockdata[i].eventType) &&
          this.mockdata[i].isDone == false &&
          i < 20
        ) {
          a++;
        }
      }
      if (a > 0) {
        return a;
      } else return "目前暫無";
    },
  },
};
</script>

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