<template>
    <div>
        <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>
        <div class="course-content"
            :class="{ courseContentEn: this.$store.getters.getCurrentLaguage == 'en-us' }"
            v-if="showInfo"
        >
            <h2>{{ course.course.name }}</h2>
            <!-- <h3 class="course-subject">國中/二年級/{{course.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">{{ course.course.no }}</h4>

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

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

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

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

                            <h4 class="basic-title">{{ $t("studentWeb.courseContent.addedTime") }}</h4>
                            <h4 class="basic-data">{{ course.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">
                    {{ course.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 { mapGetters } from 'vuex';
export default {
    name: "courseContent",
    components: {
        loading
    },
    data(vm) {
        return {
            isLoad: false,
            showInfo: false,
            isChangeGroupView: false, //控制名单样式
            name: "tab1",
            istab3Now: false,
            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: [], //醍摩豆列表
        };
    },
    props: {
        roomList: {
            type: Array,
            default: []
        },
        course: {
            type: Object,
            default: {}
        }
    },
    mounted () {
        if(Object.keys(this.course).length) {
            this.isLoad = true
            this.isNoInfo = false
            this.showInfo = true
            // 处理时间
            if(this.course.course.timeWeek) {
                this.week.map(item => {
                    if(item.name == this.course.course.timeWeek) {
                        this.course.classTime = item.cn + " " + this.course.time
                    }
                })
            }
            else {
                this.course.classTime = this.$t("studentWeb.courseContent.noTime")
            }
            this.course.roomName = this.$t("studentWeb.courseContent.noRoom")
            // 获取教室名称
            if(this.roomList) {
                for (let i = 0; i < this.roomList.length; i++) {
                    if(this.roomList[i].id == this.course.course.room) {
                        this.course.roomName = this.roomList[i].name
                        break
                    }
                }
            }
            // 获取学生名单
            if(this.course.course.classId != "" && this.course.course.classId) {
                this.findStuInfor(this.course.course)
            } else if(this.course.course.stuList != "") {
                this.findPersonInfo(this.course.course)
            }
        }  
    },
    methods: {
        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--
                    }
                }
            }
        },
    },
    computed: {
        // 当前的活动
        ...mapGetters(["getItemTitle"]),
    },
    watch: {
        course: {
            /* handler(n, o) {
                console.log('2101010')
                this.showInfo = false
                if(Object.keys(n).length) {
                    this.isLoad = true
                    this.isNoInfo = false
                    this.showInfo = true
                    // 处理时间
                    if(n.course.timeWeek) {
                        this.week.map(item => {
                            if(item.name == n.course.timeWeek) {
                                n.classTime = item.cn + " " + n.time
                            }
                        })
                    }
                    else {
                        n.classTime = this.$t("studentWeb.courseContent.noTime")
                    }
                    n.roomName = this.$t("studentWeb.courseContent.noRoom")
                    // 获取教室名称
                    if(this.roomList) {
                        for (let i = 0; i < this.roomList.length; i++) {
                            if(this.roomList[i].id == n.course.room) {
                                n.roomName = this.roomList[i].name
                                break
                            }
                        }
                    }
                    // 获取学生名单
                    if(n.course.classId != "" && n.course.classId) {
                        this.findStuInfor(n.course)
                    } else if(n.course.stuList != "") {
                        this.findPersonInfo(n.course)
                    }
                }
                else {
                    console.log(222222, n);
                }
            } */
        },
        immediate: true,
        deep:true
    }
}
</script>

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