TEAMModelOS/TEAMModelOS/ClientApp/src/components/student-web/EventView/EventView.vue

<template>
    <div class="event-view">
        <EventList :class="{ 'hide-sidebars': getSidebarisOpen == false}"></EventList>
        <!-- <EventContentArea :class="{'eventContentArea-Span': getSidebarisOpen == false}"></EventContentArea> -->
        <EventContent :class="{'eventContentArea-Span': getSidebarisOpen == false}"></EventContent>
        <!--<CommentList v-if=" $store.getters.getOpenCommentList == true && getSidebarisOpen == false" />-->
    </div>
</template>

<script>
    import CommentList from "./CommentList.vue";
    import EventList from "./EventList";
    import EventContentArea from "./EventContentArea.vue";
    import EventContent from "./EventContent.vue";
    import { mapGetters } from 'vuex';
    export default {
        name: "EventView",
        components: {
            EventList,
            EventContentArea,
            CommentList,
            EventContent,
        },
        data() {
            return {
                MyNo: "4", //接收NavBar 選定的那一頁icon標示
                MyName: "",
                mockdata: "",
                eventPageType: ["preview", "exam", "homework", "vote", "survey"] //本頁出現的類型
            };
        },
        created() {
            this.MyName = this.$t("studentWeb.eventView-title");
            this.$emit("onNavNo", this.MyNo);
            this.$emit("onNavName", this.MyName);
            this.$store.commit("ToggleSidebar", true);
            this.$store.commit("SaveNowPage", '活動');
        },
        methods: {
            scrollList() {
                //當從通知操作進行捲動時，將篩選條件清空
                this.selectedEventStatusNow = "所有活動狀態";
                this.eventTypeCheckers = [];
                let targetItem = document.getElementById(
                    `event${this.getItemTitle.eventID}`
                );
                let scrollList = document.querySelectorAll(".event-list .list-block")[0];

                if (scrollList !== undefined) {
                    let scrollvalue = 0;
                    if (targetItem.offsetTop > 600) {
                        scrollvalue = targetItem.offsetTop - 128;
                    } else if (targetItem.offsetTop < 600) {
                        scrollvalue = -scrollList.scrollHeight;
                    }
                    console.log(scrollList.scrollHeight, scrollvalue);
                    scrollList.scrollTo({
                        top: scrollvalue,
                        behavior: "smooth",
                    });
                }
            },
            gotoNextItem() {
                let nextItems = [];
                for (let i = 0; i <= this.mockdata.length; i++) {
                    if (this.getItemTitle == this.mockdata[i]) {
                        let j = i + 1;
                        if (
                            j < this.mockdata.length && this.eventPageType.includes(this.mockdata[j].eventType)
                        ) {
                            nextItems.push(this.mockdata[j]);
                        } else {
                            for (let j = i + 1; j < this.mockdata.length; j++) {
                                if (this.eventPageType.includes(this.mockdata[j].eventType)) {
                                    nextItems.push(this.mockdata[j]);
                                }
                            }
                        }
                    }
                }
                if (nextItems != "") {
                    if (
                        nextItems[0].eventName ==
                        this.mockdata[this.mockdata.length - 1].eventName
                    ) 
                    this.$store.commit("ChangeItemName", nextItems[0]);
                    this.$router.push("/studentWeb/eventView#" + nextItems[0].eventID);
                    this.scrollList();
                    this.$store.commit("SetisFromInfoPoptpScroll", true);
                    //重置預習活動
                    this.$store.commit("PassPhaseTest", 0);
                    this.$store.commit("ChangeCurrentPhase", 0);
                    this.$store.commit("ChangeCurrentSelectedReadingName", 1);
                    this.$store.commit("ToggleSentCurrentphase", false);
                    this.$store.commit("SetCurrentQuestionNo", 0);
                    this.$store.commit("SetTrytestCount", [0, 0, 0]);
                } else {
                    this.$store.commit("ChangeItemName", this.mockdata[0]);
                    this.scrollList();
                    this.$store.commit("SetisFromInfoPoptpScroll", true);
                }
            },
        },
        computed: {
            ...mapGetters([
                "getSidebarisOpen",
                "getItemTitle"
            ])
        }
    };
</script>
<style scoped>
    .hide-sidebars {
        /*width: 0%;*/
        transition: ease-out 0.3s;
        display:none;
    }

      .eventContentArea-view {
          float: right;
          width: 75%;
      }

      .eventContentArea-Span {
          padding: 1% 10%;
          width: 100%;
      }

      .eventContentArea-left {
          width: 80%;
          float: left;
          padding: 1% 7%;
          transition: 0s;
      }

      .nextItemBtn {
          position: fixed;
          bottom: 4%;
          right: 3%;
          background-color: #d8d8d8;
          color: #515a6e;
          z-index: 3;
          padding: 7px;
          cursor: pointer;
          border-radius: 3px;
          font-weight: bolder;
      }

          .nextItemBtn:hover {
              background-color: rgb(100, 174, 22) !important;
              color: white;
              border: none;
          }
</style>