<template>
  <div>
    <InformList :class="{ 'hide-sidebar': this.$store.getters.getSidebarisOpen == false}" />
    <InformContent
      :class="{
        'inform-content-span': this.$store.getters.getSidebarisOpen == false}"
    />
    <div
      class="nextItemBtn"
      @click="gotoNextItem()"
      v-if="this.$store.getters.getSidebarisOpen == false"
    >下一個 →</div>
  </div>
</template>

<script>
import InformList from "./InformList";
import InformContent from "./InformContent";
import mockdata from "@/api/newData";
import mockdataEn from "@/api/newDataEn";
export default {
  name: "InformView",
  components: {
    InformList,
    InformContent,
  },
  data() {
    return {
      MyNo: "6", //接收NavBar 選定的那一頁icon標示
      MyName: "",
      mockdata: "",
    };
  },
  created() {
    //發送本頁target 跟名字給App.Vue 的navBar
     if(localStorage.getItem("lang") == ""){
      this.mockdata = mockdata.eventList;
    }
    
    if (localStorage.getItem("lang") == "tw") {
      this.mockdata = mockdata.eventList;
    } else this.mockdata = mockdataEn.eventList;

    this.MyName = this.$t("studentWeb.informview-title");
    this.$emit("onNavNo", this.MyNo);
    this.$emit("onNavName", this.MyName);
    this.$store.commit("ToggleSidebar", true);
  },
  methods: {
    gotoNextItem() {
      let nextItems = [];

      for (let i = 0; i <= this.mockdata.length; i++) {
        if (this.$store.getters.getItemTitle == this.mockdata[i]) {
          console.log("目前：" + i, this.mockdata[i].eventName);
          let j = i + 1;
          if (j < this.mockdata.length) {
            nextItems.push(this.mockdata[j]);
          } else {
            for (let j = i + 1; j < this.mockdata.length; j++) {
              nextItems.push(this.mockdata[j]);
            }
          }
        }
      }

      if (nextItems != "") {
        if (
          nextItems[0].eventName ==
          this.mockdata[this.mockdata.length - 1].eventName
        ) {
          console.log("沒有下一個!");
        }
        console.log("下一個：" + nextItems[0].eventName);
        this.$store.commit("ChangeItemName", nextItems[0]);

        this.$store.commit("SetisFromInfoPoptpScroll", true);
      } else {
        this.$store.commit("ChangeItemName", this.mockdata[0]);

        this.$store.commit("SetisFromInfoPoptpScroll", true);
      }
    },
  },
};
</script>

<style scoped>
.hide-sidebar * {
  width: 0px;
  transition: ease-out 0.3s;
}
.hide-sidebar .list-title,
.hide-sidebar .search,
.hide-sidebar .icon-selector {
  display: none;
}
.inform-content-span {
  padding: 2% 15%;
  width: 100%;
  transition: 0.5s;
}
</style>