<template>
    <div class="mission-list-card">
        <div class="mission-list-card-title">
            <svg-icon class="titleIcon" icon-class="selflearning" />
            <span class="title">{{ $t("studentWeb.missionListCardTitle") }}</span>
        </div>
        <Card class="list">
            <Scroll class="list-block"
                    :style="{'max-height':listblockHeight+'px'}"
                    :on-reach-bottom="handleReachBottom"
                    :loading-text=" testData.length == 5  ? $t('studentWeb.missionListCardReachBottom') : $t('studentWeb.missionListCardLoading') "
                    >
                <div :id="`event${item.eventID}`"
                    class="list-new"
                    @click="sentSelectedEventTitle(item)"
                    v-for="(item, index) in testData" :key="index">
                    <div class="list-new-icon">
                        <svg-icon v-if="item.eventType == 'Homework'" icon-class="doc" />
                        <svg-icon v-if="item.eventType == 'Learn'"
                                    icon-class="selflearninginTime" />
                        <svg-icon v-if="item.eventType == 'Exam'"
                                    icon-class="test"
                                    class="reset-testIcon" />
                        <svg-icon v-if="item.eventType == 'Vote'" icon-class="vote" />
                        <svg-icon v-if="item.eventType == 'Survey'" icon-class="quesnaire" />
                    </div>
                    <div class="list-new-title">
                        <div>
                            <span v-show="item.eventType == 'Exam'" class="list-item-typeMark">{{item.owner == 'school'? $t('studentWeb.public.schoolExam'):$t('studentWeb.public.privateExam')}}</span>
                            <span v-show="item.eventType == 'Vote'" class="list-item-typeMark">{{item.owner == 'school'? $t('studentWeb.public.schoolVote'):$t('studentWeb.public.privateVote')}}</span>
                            <span v-show="item.eventType == 'Survey'" class="list-item-typeMark">{{item.owner == 'school'? $t('studentWeb.public.schoolSurvey'):$t('studentWeb.public.privateSurvey')}}</span>
                            <span>{{ item.name }}</span>
                        </div>
                        <p class="list-item-time">
                            {{ dateFormat(item.startTime) }} ~ {{ dateFormat(item.endTime) }}
                        </p>
                    </div>
                    <div class="list-new-status">
                        <div class="list-new-unDone isAllowRetry" v-show="timeStatus(item) == 'going'">
                            <span class="">{{$t("studentWeb.public.going")}}</span>
                        </div>
                        <div class="list-new-unDone" v-show="timeStatus(item) == 'finish'">
                            <span class="isOvertime">{{$t("studentWeb.public.finish")}}</span>
                        </div>
                        <!-- <div class="list-new-unDone isWrongPra" v-show="timeStatus(item) == 'finish' && item.eventType == 'Exam'">
                            <span class="">{{$t("studentWeb.exam.report.wrongPractice")}}</span>
                        </div> -->
                    </div>
                </div>

                <!-- <div :id="`event${item.eventID}`"
                    class="list-item"
                    @click="sentSelectedEventTitle(item)"
                    v-for="(item, index) in testData" :key="index">
                    <ul>
                        <li class="list-item-icon">
                            <svg-icon v-if="item.eventType == 'Homework'" icon-class="doc" />
                            <svg-icon v-if="item.eventType == 'Learn'"
                                      icon-class="selflearninginTime" />
                            <svg-icon v-if="item.eventType == 'Exam'"
                                      icon-class="test"
                                      class="reset-testIcon" />
                            <svg-icon v-if="item.eventType == 'Vote'" icon-class="vote" />
                            <svg-icon v-if="item.eventType == 'Survey'" icon-class="quesnaire" />
                        </li>
                        <li class="list-item-info">
                            <p class="list-item-title">
                                <span v-show="item.eventType == 'Exam'" class="list-item-typeMark">{{item.owner == 'school'? $t('studentWeb.public.schoolExam'):$t('studentWeb.public.privateExam')}}</span>
                                <span v-show="item.eventType == 'Vote'" class="list-item-typeMark">{{item.owner == 'school'? $t('studentWeb.public.schoolVote'):$t('studentWeb.public.privateVote')}}</span>
                                <span v-show="item.eventType == 'Survey'" class="list-item-typeMark">{{item.owner == 'school'? $t('studentWeb.public.schoolSurvey'):$t('studentWeb.public.privateSurvey')}}</span>
                                <span>{{ item.name }}</span>
                                <div style="float:right;margin-top:-20px">
                                    <div class="list-item-unDone" v-show="timeStatus(item) == 'going'">
                                        <span class="isAllowRetry">{{$t("studentWeb.public.going")}}</span>
                                    </div>
                                    <div class="list-item-unDone" v-show="timeStatus(item) == 'finish'">
                                        <span class="isOvertime">{{$t("studentWeb.public.finish")}}</span>
                                    </div>
                                </div>
                            </p>
                            <p class="list-item-time">
                                {{ dateFormat(item.startTime) }} ~ {{ dateFormat(item.endTime) }}
                            </p>
                        </li>
                    </ul>
                </div> -->
            </Scroll>
            <div class="list-end"></div>
        </Card>
    </div>
</template>

<script>
    import PreviewProgressPie from "../EventView/PreviewProgressPie";
    export default {
        name: "MissionListCard",
        components: {
            PreviewProgressPie,
        },
        data() {
            return {
                listblockHeight: 0,
                mockdataOriginal: "",
                mockdata: "",
                testData: [], // 活动数据
                templistArray: [],
                eventPageType: ["preview", "exam", "homework", "vote", "questionnare"] //本頁出現的類型
            };
        },
        created() {
            this.getActivityInfo()
        },
        mounted() {
            //初始化抓取卡牌頭兩項項目高度，回傳給清單顯示範圍高度，解決原本寫死高度造成清單顯示範圍截斷在項目中間
            if (document.querySelectorAll(".mission-list-card .list-item").length !== 0) {
                var listblockHeight = 0;
                for (let i = 0; i < 9; i++) {
                    if (
                        document.querySelectorAll(".mission-list-card .list-item")[i].style.display == "none"
                    ) {
                        document.querySelectorAll(".mission-list-card .list-item")[i].style.display = "block"
                        listblockHeight += document.querySelectorAll(".mission-list-card .list-item")[i].offsetHeight;
                        document.querySelectorAll(".mission-list-card .list-item")[i].style.display = "none"
                    }
                    else {
                        listblockHeight += document.querySelectorAll(".mission-list-card .list-item")[i].offsetHeight;
                    }
                }
                this.getActivityInfo()
                this.listblockHeight = listblockHeight;
            }
        },
        methods: {
            //获取新活动信息数据
            getActivityInfo() {
                if (this.$store.state.user.studentProfile.classinfo.id !== "") {
                    let classInfo = [this.$store.state.user.studentProfile.classinfo.id]
                    if (this.$store.state.user.studentProfile.courses.length) {
                        for (let item of this.$store.state.user.studentProfile.courses){
                            classInfo.push(item.id)
                        }
                    }
                    let params = {
                        userid: this.$store.state.userInfo.sub,
                        userType: "schoolid",
                        school: this.$store.state.user.schoolCode
                    }
                    this.$api.studentWeb.getActivityInfo(params).then(res => {
                        if (res.datas.length) {
                            let data = []
                            for (let item of res.datas) {
                                item.eventType = item.type
                                data.push(item)
                            }
                            this.testData = [...this.testData, ...data]
                            this.testData = this.testData.sort(function (a, b) {
                                return b.startTime - a.startTime //时间正序
                            });
                        }
                    })
                }
            },
            //处理时间结构
            dateFormat(timestamp) {
                var date = new Date(timestamp)
                var Y = date.getFullYear() + '-'
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
                var D = date.getDate() + ' '
                return Y + M + D;
            },
            handleReachBottom() {
                return new Promise((resolve) => {
                    setTimeout(() => {
                        for (
                            let i = 1;
                            i < 11 && this.mockdata.length < this.mockdataOriginal.length - 1;
                            i++
                        ) {
                            //小於原始資料總長度在加入空陣列
                            this.mockdata.push(this.mockdataOriginal[this.mockdata.length + 1]);
                        }
                        resolve();
                    }, 6000);
                });
            },
            randomScore: function () {
                return Random.integer(70, 96);
            },
            timeStatus(data) {
                let date = (new Date()).getTime() //当前时间
                if (date >= data.endTime) {
                    return 'finish'
                } else {
                    return 'going'
                }
            },
            sentSelectedEventTitle: function (item) {
                this.$router.push({path: "/studentWeb/eventView",
                  query: {
                    id: item.id,
                    type: item.eventType
                }
                })
                //螢幕寬度<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";
                }
                if (document.getElementById(`event${item.eventID}`).offsetTop > 600) {
                    let scrollvalue = document.getElementById(`event${item.eventID}`)
                        .offsetTop;
                    this.$store.commit("scrollList", scrollvalue);
                }
            },
        },
    };
</script>

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