TEAMModelOS/TEAMModelOS/ClientApp/src/components/student-web/HomeView/CourseList.vue

<template>
    <div>
        <loading :active.sync="isLoad"
                 :is-full-page="fullPage"
                 background-color="#000"
                 :opacity="opacity">
            <template slot="default">
                <svg-icon icon-class="loader" class="loader-icon" />
            </template>
        </loading>
        <div class="course-list"
            :class="{ courselistEn: this.$store.getters.getCurrentLaguage == 'en-us' }"
        >
            <!--課程加入成功-->
            <div class="warmMessage"
                v-if=" this.$store.getters.getMycID.coureseMessageOpen == true &&
                        this.$store.getters.getMycID.addSuccess == true "
            >
                <div class="messageCard animate__animated animate__fadeInDown">
                    <div>
                        <h3>課程加入成功</h3>
                        <svg-icon icon-class="addCourseSuc" class="addCourseIcon" />

                        <h3>
                            <span class="typeMark">{{ this.$store.getters.getMycID.myCourseID[  this.$store.getters.getMycID.myCourseID.length - 1 ] }}</span>
                            <span>新加課程名稱</span>
                        </h3>
                        <p>可於左側課程清單檢視課程簡介</p>
                    </div>
                </div>
            </div>

            <!--課程已經加入-->
            <div class="warmMessage"
                v-if="this.$store.getters.getMycID.coureseMessageOpen == true &&
                    this.$store.getters.getMycID.addSuccess == 'exist'"
            >
                <div class="messageCard animate__animated animate__fadeInDown">
                    <div>
                        <h3>課程已經加入</h3>
                        <svg-icon icon-class="addCoursefail" class="addCourseIcon" />
                        <p>可於左側課程清單檢視該課程簡介</p>
                    </div>
                </div>
            </div>

            <!--課程加入失敗-->
            <div class="warmMessage"
                v-if="this.$store.getters.getMycID.coureseMessageOpen == true &&
                    this.$store.getters.getMycID.addSuccess == false"
            >
                <div class="messageCard animate__animated animate__fadeInDown">
                    <div>
                        <h3>課程加入失敗</h3>
                        <svg-icon icon-class="addCoursefail" class="addCourseIcon" />
                        <p>查無所輸入代碼之課程，或該課程您未獲教師授權參與</p>
                    </div>
                </div>
            </div>

            <div class="list">
                <ul class="list-block">
                    <Tabs :value="onlyStu ? (this.$store.getters.getMycID.addSuccess == true ? 'tab2' : 'tab1') : 'tab2' ">
                        <!-- 表定课程 -->
                        <TabPane :label="$t('studentWeb.defaultClass')"
                                name="tab1"
                                :align="currentView=='table'?'center':'left'"
                                v-if="onlyStu"
                        >
                            <!-- <div class="listViewBtn" @click="changeView('list')" :class="{chooseView:currentView=='list'}">
                                <svg-icon icon-class="list-text" />
                            </div>
                            <div class="tableViewBtn" @click="changeView('table')" :class="{chooseView:currentView=='table'}">
                                <svg-icon icon-class="table" />
                            </div> -->

                            <div class="list-table">
                                <Table :columns="courseTime"
                                        border
                                        :data="timeTable"
                                        v-show="currentView == 'table'"
                                        :disabled-hover="true"
                                >
                                    <template slot-scope="{ row }" slot="time">
                                        <p class="list-name">{{ row.time }}</p>
                                        <p>{{ row.label }}</p>
                                    </template>
                                    <template slot-scope="{ row }" slot="Mon">
                                        <div v-for="(item, index) in row.fixList" :key="index">
                                            <div v-if="item.timeWeek == 'MON'"
                                                class="table-item"
                                                @click="clickCell(row, index)"
                                                :class="{'table-item-selected': unique == item.unique }"
                                            >
                                                <p class="list-name">{{ item.name}}</p>
                                                <p>({{ item.teaName}})</p>
                                            </div>
                                        </div>
                                    </template>
                                    <template slot-scope="{ row }" slot="Tue">
                                        <div v-for="(item, index) in row.fixList" :key="index">
                                            <div v-if="item.timeWeek == 'TUE'"
                                                class="table-item"
                                                @click="clickCell(row, index)"
                                                :class="{'table-item-selected': unique == item.unique }"
                                            >
                                                <p class="list-name">{{ item.name}}</p>
                                                <p>({{ item.teaName}})</p>
                                            </div>
                                        </div>
                                    </template>
                                    <template slot-scope="{ row }" slot="Wed">
                                        <div v-for="(item, index) in row.fixList" :key="index">
                                            <div v-if="item.timeWeek == 'WED'"
                                                class="table-item"
                                                @click="clickCell(row, index)"
                                                :class="{'table-item-selected': unique == item.unique }"
                                            >
                                                <p class="list-name">{{ item.name}}</p>
                                                <p>({{ item.teaName}})</p>
                                            </div>
                                        </div>
                                    </template>
                                    <template slot-scope="{ row }" slot="Thu">
                                        <div v-for="(item, index) in row.fixList" :key="index">
                                            <div v-if="item.timeWeek == 'THU'"
                                                class="table-item"
                                                @click="clickCell(row, index)"
                                                :class="{'table-item-selected': unique == item.unique }"
                                            >
                                                <p class="list-name">{{ item.name}}</p>
                                                <p>({{ item.teaName}})</p>
                                            </div>
                                        </div>
                                    </template>
                                    <template slot-scope="{ row }" slot="Fri">
                                        <div v-for="(item, index) in row.fixList" :key="index">
                                            <div v-if="item.timeWeek == 'FRI'"
                                                class="table-item"
                                                @click="clickCell(row, index)"
                                                :class="{'table-item-selected': unique == item.unique }"
                                            >
                                                <p class="list-name">{{ item.name}}</p>
                                                <p>({{ item.teaName}})</p>
                                            </div>
                                        </div>
                                    </template>
                                </Table>
                            </div>

                            <!-- 表定 -->
                            <!-- <li class="list-item"
                                v-for="(item, index) in fixList"
                                @click="sentSelectedEventTitle(item)"
                                :class="{ 'list-item-selected': unique == item.unique }"
                                :key="index"
                                v-show="currentView == 'list'"
                            >
                                <ul>
                                    <li class="list-item-info">
                                        <p class="list-item-title">
                                            <span class="list-item-typeMark">{{ item.no }}</span>
                                            {{ item.name }}
                                        </p>
                                    </li>
                                </ul>
                            </li> -->
                        </TabPane>
                        <!-- 临时课程 -->
                        <TabPane :label="$t('studentWeb.tempClass')" name="tab2">
                        <!--剛加入的課程-->
                        <!-- <li
                            class="list-item"
                            @click="
                            sentSelectedEventTitle(
                                courseList[courseList.length - index - 2]
                            )
                            "
                            :class="{
                            'list-item-selected': selectedCondition(
                                courseList[courseList.length - index - 2]
                            ),
                            }"
                            v-for="(item,
                            index) in this.$store.getters.getMycID.myCourseID
                            .slice()
                            .reverse()"
                            :key="`c+${index}`"
                        >
                            <ul>
                            <li class="list-item-info">
                                <p class="list-item-title">
                                <span class="list-item-typeMark">{{ item }}</span>
                                {{ "新加課程名稱" }}
                                </p>
                            </li>
                            </ul>
                        </li> -->
                        <!--剛加入的課程-->
                            <div  v-if="personList.length > 0">
                                <div v-for="(item, index) in timeTable" :key="index">
                                    <li
                                        class="list-item"
                                        v-for="(person, num) in item.personList"
                                        @click="clickCell(item, num, 'list')"
                                        :class="{ 'list-item-selected': unique == person.unique }"
                                        :key="`j+${num}`"
                                    >
                                        <ul>
                                            <li class="list-item-info">
                                                <p class="list-item-title">
                                                    <span class="list-item-typeMark">{{ person.no }}</span>
                                                    {{ person.name }}（{{ person.teaName }}）
                                                </p>
                                            </li>
                                        </ul>
                                    </li>
                                </div>
                            </div>
                            <div v-else class="list-item-no">
                                暂无课程
                            </div>
                        </TabPane>
                    </Tabs>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import Loading from "vue-loading-overlay";
import "vue-loading-overlay/dist/vue-loading.css";
export default {
    name: "CourseList",
    components: {
        Loading
    },
    data() {
        return {
            isLoad: false,
            fullPage: true,
            opacity: 0.6,
            currentView: 'table',
            onlyStu: true, //是不是学生
            courseTime: [
                {
                    title: this.$t("studentWeb.week.time"),
                    slot: "time",
                    width: "140"
                },
                {
                    title: this.$t("studentWeb.week.mon"),
                    slot: "Mon",
                    width: "115"
                },
                {
                    title: this.$t("studentWeb.week.tue"),
                    slot: "Tue",
                    width: "115"
                },
                {
                    title: this.$t("studentWeb.week.wed"),
                    slot: "Wed",
                    width: "115"
                },
                {
                    title: this.$t("studentWeb.week.thu"),
                    slot: "Thu",
                    width: "115"
                },
                {
                    title: this.$t("studentWeb.week.fri"),
                    slot: "Fri",
                    width: "115"
                },
                {
                    title: this.$t("studentWeb.week.sat"),
                    // slot: "Fri",
                    width: "100"
                },
                {
                    title: this.$t("studentWeb.week.sun"),
                    // slot: "Fri",
                    width: "100"
                }
            ],
            courseList: this.$api.studentWeb.courseList, //moke数据
            fixList: [],
            personList: [],
            nowClassInfor: {},
            timeTable: [],
            unique: '',
        };
    },
    props: {
        period: {
            type: Array,
            default: []
        },
        teaList: {
            type: Array,
            default: []
        }
    },
    created() {
        this.$store.state.userInfo.roles.map(item => {
            if(item == "teacher") {
                this.onlyStu = false
            }
        })
        this.getClassList()
    },
    mounted () {
        // console.log(this.timeTable);
    },
    methods: {
        getClassList() {
            this.isLoad = true
            let param = {
                userid: this.$store.state.userInfo.sub,
                school: this.$store.state.userInfo.azp
            }
            this.$api.studentWeb.getClassList(param).then(res => {
                if(res.courses.length > 0) {
                    // 表定课程
                    var fixList = []
                    // 临时课程
                    var personList = []
                    var list = res.courses
                    for (let i = 0; i < list.length; i++) {
                        if(list[i].course) {
                            for (let j = 0; j < list[i].course.schedule.length; j++) {
                                // 有classId，表定课程
                                if(list[i].course.schedule[j].classId == list[i].stuCourse.classId[0]) {
                                    if(list[i].course.schedule[j].time.length > 0) {
                                        for (let m = 0; m < list[i].course.schedule[j].time.length; m++) {
                                            var data = this._.cloneDeep(list[i].course)
                                            delete data.schedule
                                            data.school = list[i].stuCourse.school
                                            data.scope = list[i].stuCourse.scope
                                            // 拼接得到一个唯一的标识（目前有同一天的同一节数的课程，所以加入j 和m 来区分）
                                            data.unique = 'class' + list[i].course.no + list[i].course.schedule[j].time[m].week + list[i].course.schedule[j].time[m].id + j + m
                                            fixList.push(this.getNewClass(data, list[i].course.schedule[j], m))
                                        }
                                    }
                                }
                                // 有stulist，临时课程
                                else if (list[i].course.schedule[j].stulist) {
                                    if(list[i].course.schedule[j].time.length > 0) {
                                        for (let m = 0; m < list[i].course.schedule[j].time.length; m++) {
                                            var data = this._.cloneDeep(list[i].course)
                                            delete data.schedule
                                            data.school = list[i].stuCourse.school
                                            data.scope = list[i].stuCourse.scope
                                            data.unique = 'person' + list[i].course.no + list[i].course.schedule[j].time[m].week + list[i].course.schedule[j].time[m].id + j + m
                                            personList.push(this.getNewClass(data, list[i].course.schedule[j], m))
                                        }
                                    }
                                }
                            }
                        }
                    }
                    console.log(fixList)
                    console.log(personList)
                    this.fixList = fixList
                    this.personList = personList
                    this.getClassTime()
                }
            }).finally(()=>{
                this.isLoad = false
            })
            
        },
        /* getNewClass(nowCourse, j) {
            if(nowCourse.course.schedule[j].time.length > 0) {
                var list = []
                for (let m = 0; m < nowCourse.course.schedule[j].time.length; m++) {
                    var data = this._.cloneDeep(nowCourse.course)
                    delete data.schedule
                    data.school = nowCourse.stuCourse.school
                    data.scope = nowCourse.stuCourse.scope
                    // 拼接得到一个唯一的标识
                    data.unique = nowCourse.course.no + nowCourse.course.schedule[j].time[m].week + nowCourse.course.schedule[j].time[m].id
                    data.classId = nowCourse.course.schedule[j].classId
                    data.room = nowCourse.course.schedule[j].room
                    data.teacherId = nowCourse.course.schedule[j].teacherId
                    data.notice = nowCourse.course.schedule[j].notice
                    data.stuList = nowCourse.course.schedule[j].stulist
                    data.timeId = nowCourse.course.schedule[j].time[m].id
                    data.timeWeek = nowCourse.course.schedule[j].time[m].week
                    list.push(data)
                }
                console.log(list);
                return list
            }
        }, */
        // 新增数组
        getNewClass(data, schedule, m) {
            data.classId = schedule.classId
            data.room = schedule.room
            data.teacherId = schedule.teacherId
            data.notice = schedule.notice
            data.stuList = schedule.stulist
            data.timeId = schedule.time[m].id
            data.timeWeek = schedule.time[m].week
            data.teaName = ""
            // 获取老师名单
            if(this.teaList.length > 0) {
                this.teaList.map(item => {
                    if(item.id == schedule.teacherId) {
                        data.teaName = item.name
                    }
                })
            }
            return data
        },
        // 处理上课时间
        getClassTime() {
            if(this.period != undefined) {
                // 选出该年级的上课时间
                var grades = this._.cloneDeep(this.period)
                for (let i = 0; i < grades.length; i++) {
                    // 所有的period.id 都一样，选定fixList[0]
                    if(grades[i].id == this.fixList[0].period.id) {
                        this.timeTable = grades[i].timetable
                    }
                }
                // 在时间中加入对应的课程
                for (let j = 0; j < this.timeTable.length; j++) {
                    var newfixLis = []
                    var newpersonList = []
                    for (let i = 0; i < this.fixList.length; i++) {
                        if(this.timeTable[j].id == this.fixList[i].timeId) {
                            newfixLis.push(this.fixList[i])
                        }
                    }
                    for (let i = 0; i < this.personList.length; i++) {
                        if(this.timeTable[j].id == this.personList[i].timeId) {
                            newpersonList.push(this.personList[i])
                        }
                    }
                    this.timeTable[j].fixList = newfixLis
                    this.timeTable[j].personList = newpersonList
                }
            }
        },
        // 点击单节课，显示基本信息
        /* row：timeTable的某一个
           index：fixList/personList中的当前这一数据的下标
           type：传'list'就是临时课程，不传就是表定课程
        */
        clickCell(row, index, type) {
            this.nowClassInfor = this._.cloneDeep(row)
            if(type) {
                this.nowClassInfor.course = this._.cloneDeep(row.personList[index])
            } else {
                this.nowClassInfor.course = this._.cloneDeep(row.fixList[index])
            }
            this.unique = this.nowClassInfor.course.unique
            this.sentSelectedEventTitle(this.nowClassInfor)
        },
        changeView(type) {
            this.currentView = type
        },
        // 跳转到当前课程
        sentSelectedEventTitle: function (item) {
            // 改變ItemName的狀態 vuex mutations
            this.$store.commit("ChangeItemName", item);
            // 螢幕寬度<767px時，直接關掉sidebar
            if (window.innerWidth <= 991) {
                this.$store.commit("ToggleSidebar", false);
            }
        },
    },
};
</script>

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