<template>
    <div class="courselist-view">
        <!-- <loading :active.sync="isLoad"
                  :is-full-page="true"
                  background-color="#000"
                  :opacity="0.6">
            <template slot="default">
                <svg-icon icon-class="loader" class="loader-icon" />
            </template>
        </loading> -->
        <Loading v-show="isLoad" bgColor="rgba(0, 0, 0, 0.3)"></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>
                            <div v-show="currentView == 'list'">
                                <!-- <div v-for="(item, index) in timeTable" :key="index"> -->
                                    <li
                                        class="list-item"
                                        v-for="(fix, num) in fixList"
                                        :class="{'list-item-selected': unique == fix.unique}"
                                        @click="clickCell(fix, num, 'list')"
                                        :key="`j+${num}`"
                                    >
                                        <ul>
                                            <li class="list-item-info">
                                                <span v-if="fix.timeId">{{ fix.classTime }}</span>
                                                <p class="list-item-title">
                                                    <span class="list-item-typeMark">{{ fix.no }}</span>
                                                    {{ fix.name }}（{{ fix.teaName }}）
                                                </p>
                                            </li>
                                        </ul>
                                    </li>
                                <!-- </div> -->
                            </div>
                        </TabPane>
                        <!-- 临时课程 -->
                        <TabPane :label="$t('studentWeb.tempClass')" name="tab2">
                            <div v-if="personList.length">
                                <!-- <div v-for="(item, index) in timeTable" :key="index"> -->
                                    <li
                                        class="list-item"
                                        v-for="(person, num) in personList"
                                        :class="{'list-item-selected': unique == person.unique}"
                                        @click="clickCell(person, num, 'list')"
                                        :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">
                                {{ $t('studentWeb.courseContent.noCourse') }}
                            </div>
                        </TabPane>
                    </Tabs>
                </ul>
            </div>
        </div>
        <!-- 基本信息 -->
        <div class="course-content"
            :class="{ courseContentEn: this.$store.getters.getCurrentLaguage == 'en-us' }"
            v-if="showInfo"
        >
            <h2>{{ courseNow.name }}</h2>
            <!-- <h3 class="course-subject">國中/二年級/{{courseNow.courseSubject}}</h3> -->
            <div @click="changeGroupView()"
                :class="{ 'group-on': isChangeGroupView }"
                v-if="name == 'tab3'"
            >
                <svg-icon icon-class="group" class="group-btn" />
            </div>

            <Tabs v-model="name">
                <!-- 基本资讯 -->
                <TabPane :label="$t('studentWeb.courseContent.baseInfo')" name="tab1">
                    <Row :gutter="30">
                        <i-col :xs="24" :sm="24" :md="8" :lg="8">
                            <h4 class="basic-title">{{ $t("studentWeb.courseContent.classID") }}</h4>
                            <h4 class="basic-data">{{ courseNow.no }}</h4>

                            <h4 class="basic-title">{{ $t("studentWeb.courseContent.classTime") }}</h4>
                            <h4 class="basic-data">{{ courseNow.classTime }}</h4>

                            <h4 class="basic-title">{{ $t("studentWeb.courseContent.classroom") }}</h4>
                            <h4 class="basic-data">{{ courseNow.roomName }}</h4>

                            <h4 class="basic-title">{{ $t("studentWeb.courseContent.teacher") }}</h4>
                            <h4 class="basic-data">{{ courseNow.teaName }}</h4>

                            <h4 class="basic-title">{{ $t("studentWeb.courseContent.co-teacher") }}</h4>
                            <!-- <span class="basic-data"
                                v-for="(teacher, index) in courseNow.assistantTeachers"
                                :key="index"
                            >
                                {{ teacher }}
                                <span v-if="index < courseNow.assistantTeachers.length - 1">、</span>
                            </span> -->

                            <h4 class="basic-title">{{ $t("studentWeb.courseContent.addedTime") }}</h4>
                            <h4 class="basic-data">{{ courseNow.courseAddDate }}</h4>
                        </i-col>
                        <i-col :xs="24" :sm="24" :md="16" :lg="16">
                            <h4 class="basic-title">{{ $t("studentWeb.courseContent.courseCode") }}</h4>
                            <img src="mockqrcode.jpg" width="30%" style='margin-left: -12px'>
                        </i-col>
                    </Row>
                </TabPane>
                <!-- 课程概述 -->
                <TabPane :label="$t('studentWeb.courseContent.description')" name="tab2">
                    {{ courseNow.notice }}
                    <h3 style="margin-top: 30px; margin-bottom: 10px">{{ $t("studentWeb.courseContent.syllabus") }}</h3>
                    <Collapse simple>
                        <Panel name="1">
                            1. 史蒂夫·乔布斯
                            <div slot="content">
                                史蒂夫·乔布斯（Steve
                                Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。
                                <br />
                                <br />
                                <Collapse simple>
                                    <Panel name="1-1">
                                        iPhone
                                        <p slot="content">
                                        iPhone，是美国苹果公司研发的智能手机，它搭载iOS操作系统。第一代iPhone于2007年1月9日由苹果公司前首席执行官史蒂夫·乔布斯发布，并在2007年6月29日正式发售。
                                        </p>
                                    </Panel>
                                    <Panel name="1-2">
                                        iPad
                                        <p slot="content">
                                        iPad是由苹果公司于2010年开始发布的平板电脑系列，定位介于苹果的智能手机iPhone和笔记本电脑产品之间，（屏幕中有4个虚拟程序固定栏）与iPhone布局一样，提供浏览网站、收发电子邮件、观看电子书、播放音频或视频、玩游戏等功能。由英国出生的设计主管乔纳森·伊夫（Jonathan
                                        Ive）（有些翻译为
                                        乔纳森·艾维）领导的团队设计的，这个圆滑、超薄的产品反映出了伊夫对德国天才设计师Dieter
                                        Rams的崇敬之情。
                                        </p>
                                    </Panel>
                                </Collapse>
                            </div>
                        </Panel>
                        <Panel name="2">
                            2. 斯蒂夫·盖瑞·沃兹尼亚克
                            <p slot="content">
                            斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary
                            Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC
                            Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。
                            </p>
                        </Panel>
                        <Panel name="3">
                            3. 乔纳森·伊夫
                            <p slot="content">
                            乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。
                            </p>
                        </Panel>
                    </Collapse>
                </TabPane>
                <!-- 同学名单 -->
                <TabPane :label="$t('studentWeb.courseContent.classmates')" name="tab3">
                    <div v-show="!isChangeGroupView">
                        <Table :columns="stuCol" :data="stuList">
                            <template slot-scope="{ row }" slot="no">
                                <p :class="{'my-name': row.id == $store.state.userInfo.sub}">
                                    {{row.no}}
                                </p>
                            </template>
                            <template slot-scope="{ row }" slot="id">
                                <p :class="{'my-name': row.id == $store.state.userInfo.sub}">
                                    {{row.id}}
                                </p>
                            </template>
                            <template slot-scope="{ row }" slot="name">
                                <p :class="{'my-name': row.id == $store.state.userInfo.sub}">
                                    {{row.name}}
                                </p>
                            </template>
                            <template slot-scope="{ row }" slot="groupName">
                                <p :class="{'my-name': row.id == $store.state.userInfo.sub}">
                                    {{row.groupName ? row.groupName : $t("studentWeb.courseContent.noGroup")}}
                                </p>
                            </template>
                        </Table>
                    </div>
                    <!--小組模式-->
                    <div v-show="isChangeGroupView">
                        <Card class="group-student"
                            v-for="(group, gIndex) in stuGroup"
                            :key="gIndex">
                            <h3 class="group-title" v-if="group.name">
                                {{ group.name }}
                            </h3>
                            <h3 class="group-title" v-else>{{ $t("studentWeb.courseContent.noGroup") }}</h3>
                            <table>
                                <tr v-for="(item, index) in group.info"
                                    :key="`a${index}`"
                                >
                                    <td class="student-no" :class="{ 'my-name': item.id == $store.state.userInfo.sub }">
                                        {{ item.no }}
                                    </td>
                                    <td class="student-name" :class="{ 'my-name': item.id == $store.state.userInfo.sub }">
                                        {{ item.name }}
                                        <span v-if="item.id == $store.state.userInfo.sub">({{ $t("studentWeb.courseContent.me") }})</span>
                                    </td>
                                </tr>
                            </table>
                        </Card>
                    </div>
                </TabPane>
                <!-- 醍摩豆 -->
                <TabPane :label="$t('studentWeb.courseContent.classmates1')" name="tab4" v-if="tmdList.length > 0 || $store.state.userInfo.roles.includes('teacher')">
                    <Table :columns="tmdCol" :data="tmdList">
                        <template slot-scope="{ row }" slot="id">
                            <p :class="{'my-name': row.id == $store.state.userInfo.sub}">
                                {{row.id}}
                            </p>
                        </template>
                        <template slot-scope="{ row }" slot="name">
                            <p :class="{'my-name': row.id == $store.state.userInfo.sub}">
                                {{row.name}}
                            </p>
                        </template>
                    </Table>
                </TabPane>
            </Tabs>
        </div>
    </div>
</template>

<script>
/* import Loading from "vue-loading-overlay";
import "vue-loading-overlay/dist/vue-loading.css"; */
import Loading from '@/common/Loading.vue'
import { mapGetters, mapState } from 'vuex';

export default {
    name: "CourseListView",
    components: {
        Loading
    },
    data(vm) {
        return {
            MyNo: "",
            MyName: this.$t('studentWeb.courseList-title'),
            isShow: false,
            period: [], //年级列表
            isLoad: false,
            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"
                }
            ],
            fixList: [], //表定课程
            personList: [], //临时课程
            timeTable: [], //页面所有的课程
            unique: '',
            courseNow: {},
            showInfo: false,
            isChangeGroupView: false, //控制名单样式
            name: "tab1",
            week: [
                {
                    name: "MON",
                    cn: vm.$t("studentWeb.week.mon")
                }, {
                    name: "TUE",
                    cn: vm.$t("studentWeb.week.tue")
                }, {
                    name: "WED",
                    cn: vm.$t("studentWeb.week.wed")
                }, {
                    name: "THU",
                    cn: vm.$t("studentWeb.week.thu")
                }, {
                    name: "FRI",
                    cn: vm.$t("studentWeb.week.fri")
                }
            ],
            stuCol: [
                {
                    title: vm.$t("studentWeb.courseContent.seatNo"),
                    slot: "no",
                },
                {
                    title: vm.$t("studentWeb.courseContent.stuNum"),
                    slot: "id",
                },
                {
                    title: vm.$t("studentWeb.courseContent.name"),
                    slot: "name",
                },
                {
                    title: vm.$t("studentWeb.courseContent.group"),
                    slot: "groupName",
                }
            ],
            tmdCol: [
                {
                    title: vm.$t("studentWeb.courseContent.tmdNum"),
                    slot: "id",
                },
                {
                    title: vm.$t("studentWeb.courseContent.name"),
                    slot: "name",
                },
            ],
            stuGroup: [], //学生——小组名单
            stuList: [], //学生——table
            tmdList: [], //醍摩豆列表
        };
    },

    methods: {
        // 查找班级
        findSchoolInfo() {
            let params = {}
            // 醍摩豆登陆——> roles有teacher
            if (this.$store.state.userInfo.roles.includes("teacher")) {
                params = {userType: "tmdid"}
            }
            // 学生账号登陆
            else {
                params = {userType: "schoolid"}
            }
            this.$api.studentWeb.getSchoolInfo(params).then(res => {
                if(res.status == 200) {
                    this.period = res.school_base.period
                }
            })
        },
        changeGroupView() {
            this.isChangeGroupView = !this.isChangeGroupView
        },
        // 查找学生信息(标准)
        findStuInfor(course) {
            this.stuGroup = []
            this.stuList = []
            let req = {
                school_code: course.school,
                scope: course.scope,
                ids: [course.classId]
            }
            this.$api.studentWeb.getClassroomStudent(req).then(res => {
                this.stuList = this._.cloneDeep(res.stus[0])
                this.getGroup(res.stus[0])
            }).finally(() => {
                this.isLoad = false
            })
        },
        // 查找学生(个人)
        findPersonInfo(course) {
            this.stuGroup = []
            this.stuList = []
            this.tmdList = []
            let reqList = {
                code: course.scope == 'school' ? course.school : course.creatorId,
                // code: course.teacherId,
                ids: [course.stuList],
                scope: course.scope
            }
            this.$api.studentWeb.findListSummary(reqList).then(res => {
                if(res.stuList.length) {
                    if(res.stuList[0].students.length) {
                        this.$api.studentWeb.findStuSummary({
                            students: res.stuList[0].students,
                            tmdIds: res.stuList[0].tmids
                        }).then(res => {
                            if(res.stus.length) {
                                this.stuList = this._.cloneDeep(res.stus)
                                this.tmdList = this._.cloneDeep(res.tmdinfos)
                                this.getGroup(res.stus)
                            }
                        }).finally(() => {
                            this.isLoad = false
                        })
                    } else {
                        this.isLoad = false
                    }
                } else {
                    this.isLoad = false
                }
            })
        },
        // 学生分组
        getGroup(data) {
            for (let i = 0; i < data.length; i++) {
                this.stuGroup.push({
                    id: data[i].groupId,
                    name: data[i].groupName,
                    info: [data[i]]
                })
                for (let j = i + 1; j < data.length; j++) {
                    if(data[i].groupId == data[j].groupId) {
                        this.stuGroup[i].info.push(data[j])
                        data.splice(j,1)
                        j--
                    }
                }
            }
        },

        getClassList() {
            this.isLoad = true
            let param = {
                userid: this.userInfo.sub,
                school: this.userInfo.azp
            }
            if(this.userInfo.roles.includes("teacher")) {
                param.userType = "tmdid"
            } else {
                param.userType = "schoolid"
            }
            this.$api.studentWeb.getClassList(param).then(res => {
                if(res.courses.length) {
                    // 表定课程
                    var fixList = []
                    // 临时课程
                    var personList = []
                    var list = res.courses
                    list.forEach(item => {
                        if(item.course) {
                            item.course.schedule.forEach((sch, sIn) => {
                                // 有classId，表定课程
                                if(sch.classId == item.stuCourse.classId[0] && item.stuCourse.classId.length) {
                                    if(sch.time.length > 0) {
                                        for (let m = 0; m < sch.time.length; m++) {
                                            let data = this.getNewCourse("class", item, sch, sIn, m)
                                            fixList.push(data)
                                        }
                                    }
                                    else {
                                        let datanoTime = this.getNewCourse("class", item, sch, sIn)
                                        fixList.push(datanoTime)
                                    }
                                }
                                // 有stulist，临时课程
                                else if (sch.stulist == item.stuCourse.stulist[0] && item.stuCourse.stulist.length) {
                                    if(item.stuCourse.scope == "school") {
                                        if(sch.time.length) {
                                            for (let m = 0; m < sch.time.length; m++) {
                                                let data = this.getNewCourse("class", item, sch, sIn, m)
                                                fixList.push(data)
                                            }
                                        }
                                        // 没有时间
                                        else {
                                            let data = this.getNewCourse("class", item, sch, sIn)
                                            fixList.push(data)
                                        }
                                    } else {
                                        if(sch.time.length) {
                                            for (let m = 0; m < sch.time.length; m++) {
                                                let data = this.getNewCourse("person", item, sch, sIn, m)
                                                personList.push(data)
                                            }
                                        }
                                        // 没有时间
                                        else {
                                            let data = this.getNewCourse("person", item, sch, sIn)
                                            personList.push(data)
                                        }
                                    }
                                    
                                }
                            })
                        }
                    })
                    this.fixList = fixList
                    this.personList = personList
                    this.getClassTime()
                }
            }).finally(()=>{
                this.isLoad = false
            })
        },
        // 课程的相关信息(attribute: "class/person")
        getNewCourse(attribute, subject, schedule, sIndex, m) {
            let data = this._.cloneDeep(subject.course)
            delete data.schedule
            data.school = subject.stuCourse.school
            data.scope = subject.stuCourse.scope
            data.classId = schedule.classId
            // data.roomId = schedule.room
            // data.teacherId = schedule.teacherId
            data.notice = schedule.notice
            data.stuList = schedule.stulist
            data.classTime = this.$t("studentWeb.courseContent.noTime")
            if(m !== undefined) {
                data.timeId = schedule.time[m].id
                data.timeWeek = schedule.time[m].week
                this.week.map(item => {
                    if(item.name == schedule.time[m].week) {
                        data.classTime = item.cn
                    }
                })
                // 拼接得到一个唯一的标识
                data.unique = attribute + subject.course.no + sIndex + m
            }
            // 没有时间的情况
            else {
                data.timeId = 0
                data.timeWeek = 0
                data.unique = attribute + subject.course.no + sIndex
            }
            data.roomName = schedule.roomName ? schedule.roomName : this.$t("studentWeb.courseContent.noRoom")
            data.teaName = schedule.teacherName ? schedule.teacherName : this.$t('studentWeb.courseContent.noTeacher')
            return data
        },
        // 处理上课时间
        getClassTime() {
            // 学生登陆
            if(this.onlyStu) {
                this.timeTable = this.period.find(item => {
                    return item.id == this.studentProfile.classinfo.periodId
                }).timetable
                this.timeTable.forEach(item => {
                    let newfixlist = []
                    let notime = [] //没有时间的标准课程
                    this.fixList.forEach(fix => {
                        if(fix.timeId == item.id && fix.timeId) {
                            fix.classTime = fix.classTime + " " + item.time + " (" + item.label + ")"
                            newfixlist.push(fix)
                        }
                        // 没有时间的标准课程
                        else if (!fix.timeId) {
                            notime.push(fix)
                        }
                    })
                    item.fixList = newfixlist
                    item.noTime = notime
                })
                // 个人课程
                this.personList.forEach(per => {
                    if(per.timeId) {
                        this.timeTable.forEach(item => {
                            if(per.timeId == item.id) {
                                per.time = item.time
                            }
                        })
                    }
                })
            }
            // 醍摩豆登陆
            else if (this.personList.length) {
                // 年级id 存在
                if(this.personList[0].period.id != undefined) {
                    this.timetable = this.period.find(item => {
                        return item.id == this.personList[0].period.id
                    }).timetable
                    this.timeTable.forEach(item => {
                        let newpersonList = []
                        this.personList.forEach(per => {
                            if(per.timeId == item.id && per.timeId) {
                                per.classTime = per.classTime + " " + item.time + "(" + item.label + ")"
                                newpersonList.push(per)
                            } else if (!per.timeId) {
                                newpersonList.push(per)
                            }
                        })
                        item.personList = newpersonList
                    })
                }
                // 年级id 不存在
                else {
                    this.timeTable = [{
                        personList: []
                    }]
                    this.personList.forEach(per => {
                        this.timeTable[0].personList.push(per)
                    })
                }
            }
        },
        // 点击单节课，显示基本信息
        /*  row：timeTable的某一个
            index：fixList/personList中的当前这一数据的下标
            type：传'list'就是临时课程，不传就是表定课程
        */
        clickCell(row, index, type) {
            let nowClassInfor = undefined
            if(type) {
                nowClassInfor = this._.cloneDeep(row)
            } else {
                nowClassInfor = this._.cloneDeep(row.fixList[index])
            }
            this.unique = nowClassInfor.unique
            this.sentSelectedEventTitle(nowClassInfor)
        },
        // 跳转到当前课程
        sentSelectedEventTitle(item) {
            this.isLoad = true
            this.courseNow = this._.cloneDeep(item)
            // 获取学生名单
            if(this.courseNow.classId != "" && this.courseNow.classId) {
                this.findStuInfor(this.courseNow)
            } else if(this.courseNow.stuList != "") {
                this.findPersonInfo(this.courseNow)
            }
            // 螢幕寬度<767px時，直接關掉sidebar
            if (window.innerWidth <= 991) {
                this.$store.commit("ToggleSidebar", false);
            }
            this.showInfo = true
        },
        changeView(type) {
            this.currentView = type
        },
    },

    created() {
        this.$emit("onNavNo", this.MyNo);
        this.$emit("onNavName", this.MyName);
        this.$store.commit("ToggleSidebar", true);
        this.findSchoolInfo()
        this.onlyStu = !this.userInfo.roles.includes("teacher")
        this.getClassList()
    },
    mounted () {
        if(this.$route.params.course) {
            this.sentSelectedEventTitle(this.$route.params.course)
            this.unique = this.$route.params.course.unique
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.userInfo,
            studentProfile: state => state.user.studentProfile
        }),
    }
};
</script>

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

<style scoped>
.hide-sidebar * {
  width: 0px !important;
  transition: ease-out 0.3s;
}
.courselist-view{
  overflow: hidden;
}
.course-content-span{
  padding: 2% 15%;
  width: 100% !important;
  transition: 0.5s;
}
</style>