<template>
    <div class="course-classroom-box">
        <!--课程班级列表-->
        <div class="course-classroom-list">
            <div class="course-classroom-list-header">
                <span class="course-classroom-label">{{$t('courseManage.classroom.classroomList')}}</span>
                <Poptip trigger="hover" placement="left-start" class="add-classroom-icon" v-if="listType == 'personal'">
                    <Icon type="md-add" color="white" size="18" />
                    <div slot="content">
                        <p @click="addClassroom(1)"><Icon type="ios-barcode-outline" color="white" size="18" style="margin-right:8px;" />创建动态名单</p>
                        <p @click="addClassroom(0)" style="margin-top:10px;"><Icon type="md-person" color="white" size="18" style="margin-right:8px;" />选择系统班级</p>
                    </div>
                </Poptip>
            </div>
            <div class="course-classroom-list-content" v-if="JSON.stringify(courseInfo) !== '{}'">
                <div v-if="courseInfo.classes">
                    <div v-for="(item,index) in courseInfo.classes" :key="index" @click="changeClassroom(index)" :class="curClassIndex === index ? 'course-classroom-item block-bg block-bg-active':'course-classroom-item block-bg'">
                        <p class="classroom-code">
                            <!--<Icon :type="item.code === $store.state.userInfo.schoolCode ? 'ios-barcode-outline' : 'md-person'" color="white" size="18" style="margin-right:8px;" />-->
                            <span :class="item.code === $store.state.userInfo.schoolCode ? 'class-type-sys':'class-type-dym'">{{item.code === $store.state.userInfo.schoolCode ? '系统班级':'动态名单'}}</span>
                            {{item.classroomCode}}
                        </p>
                        <p class="classroom-name">{{item.classroomName}}</p>
                        <p class="classroom-info ">
                            <span class="classroom-info-label">{{$t('courseManage.classroom.studentCount')}}</span>
                            <span class="classroom-info-value">{{item.studentCount}}</span>
                            <span class="classroom-info-label">{{$t('courseManage.classroom.headmaster')}}</span>
                            <span class="classroom-info-value">{{item.headMaster}}</span>
                        </p>
                        <Icon type="md-qr-scanner" class="qr-code-icon" @click="showQrCode" v-if="$store.state.userInfo.TEAMModelId == item.code" />
                    </div>
                </div>
                <EmptyData v-else :top="0" textContent="暂无班级" style="padding-top:100px;"></EmptyData>
            </div>
        </div>
        <div class="course-classroom-info" v-if="JSON.stringify(courseInfo) !== '{}'">
            <div class="course-classroom-info-header" style="padding-right:50px;">
                <span @click="tabName = 'record'" :class="tabName == 'record' ? 'course-classroom-label line-bottom line-bottom-active':'course-classroom-label line-bottom'">课堂记录</span>
                <span @click="tabName = 'stus'" :class="tabName == 'stus' ? 'course-classroom-label line-bottom line-bottom-active':'course-classroom-label line-bottom'">{{$t('courseManage.classroom.studentList')}}</span>
            </div>
            <!--学生名单-->
            <div class="course-classroom-info-content dark-iview-table animated fadeIn" v-show="tabName == 'stus'">
                <vuescroll style="height:100%;">
                    <Table v-if="courseInfo.classes" :columns="studentColumn" :data="courseInfo.classes[curClassIndex].students" max-height="800" class="system-classroom-table" :loading="studentTabelLoading" @on-selection-change="getSelections" no-data-text="暂无学生">
                        <Loading slot="loading" bgColor="rgba(103, 103, 103, 0.27)"></Loading>
                        <template slot-scope="{ row ,index}" slot="action">
                            <strong></strong>
                        </template>
                    </Table>
                    <EmptyData v-else :top="0" textContent="暂无学生" style="padding-top:100px;"></EmptyData>
                </vuescroll>
            </div>
            <!--课堂记录-->
            <div v-show="tabName == 'record'" class="animated fadeIn class-record-wrap">
                <vuescroll>
                    <List>
                        <ListItem v-for="(item,index) in itemNum" :key="index">
                            <ListItemMeta @click.native="toClassRecoerd">
                                <p slot="title" class="record-name">力的组成</p>
                                <span slot="avatar" style="margin-top:4px;display: inline-block;margin-left:10px;">
                                    <Icon custom="iconfont icon-whiteboard" size="30" color="white" />
                                </span>
                                <div slot="description" style="color:white;">
                                    <span class="hiteacher-version">
                                        系统版本：3.0.32
                                    </span>
                                    <Time class="record-time" :time="((new Date()).getTime() - 60 * 3 * 1000)" />
                                    <div class="record-action-wrap">
                                        <Icon class="action-icon" type="md-analytics" title="课程记录" @click="toClassRecoerd"/>
                                        <Icon class="action-icon" type="ios-stats" title="苏格拉底报告" @click="toClassRecoerd"/>
                                        <Icon class="action-icon" custom="iconfont icon-video" title="苏格拉底影片/桌面" @click="toClassRecoerd"/>
                                        <Icon class="action-icon" custom="iconfont icon-hi" title="电子笔记" @click="toClassRecoerd"/>
                                        <Icon class="action-icon" custom="iconfont icon-textbook" title="课例教材" @click="toClassRecoerd"/>
                                        <Icon class="action-icon" type="md-share" title="分享到频道" @click="toClassRecoerd"/>
                                    </div>
                                </div>
                            </ListItemMeta>
                        </ListItem>
                    </List>
                </vuescroll>
            </div>
        </div>
        <Modal v-model="newPersonalStatus"
               :title="$t('courseManage.classroom.personalClassroomTitle')"
               @on-ok="confirmNewClassroom"
               class-name="dark-iview-modal dark-iview-form"
               v-if="JSON.stringify(courseInfo) !== '{}'">
            <Form ref="personalClassroom" :model="personalClassroom" label-position="top" label-colon>
                <FormItem :label="$t('courseManage.classroom.invitationCode')" prop="classroomCode">
                    <span style="font-size:18px;color:white;">{{personalClassroom.classroomCode}}</span>
                </FormItem>
                <FormItem label="班级名称" prop="classroomName">
                    <Input v-model="personalClassroom.classroomName" :placeholder="$t('courseManage.classroom.classroomName')">
                    </Input>
                </FormItem>
            </Form>
        </Modal>
        <Modal v-model="selectClassStatus"
               title="选择预设班级"
               @on-ok="confirmBindingClass(sysClass.classroomCode)"
               class-name="dark-iview-modal dark-iview-select dark-iview-form"
               v-if="JSON.stringify(courseInfo) !== '{}'">
            <Form ref="personalClassroom" :model="personalClassroom" label-position="top" label-colon>
                <FormItem label="班级名称" prop="classroomName">
                    <Select v-model="sysClass.classroomName" filterable>
                        <Option @click.native="sysClass.classroomCode = item.classroomCode" v-for="(item, index) in $store.state.user.schoolProfile.school_classes" :value="item.classroomCode" :key="index">{{ item.classroomName }}</Option>
                    </Select>
                </FormItem>
                <FormItem :label="$t('courseManage.classroom.invitationCode')" prop="classroomCode">
                    <span style="font-size:18px;color:white;">{{sysClass.classroomCode}}</span>
                </FormItem>
            </Form>
        </Modal>
        <Modal v-model="addStudentStatus"
               title="添加学生"
               width="1000"
               class-name="dark-iview-modal"
               @on-ok="confirmAddStudent"
               v-if="JSON.stringify(courseInfo) !== '{}'">
            <StudentList @selectedStudent="handleSelectStudent"></StudentList>
        </Modal>
        <div class="qr-code-wrap" v-show="showQrStatus" @click="showQrStatus = false">
            <div id="qrcode" :class="showQrStatus ? 'animated zoomIn':'animated zoomOut'" ref="qrcode" style="padding:20px;background-color:white;width:320px;margin:auto;"></div>
        </div>
    </div>
</template>
<script>
    import QRCode from 'qrcodejs2'
    import E from '@/utils/wangEditor.js'
    import StudentList from '@/components/coursemgmt/StudentList.vue'
    import '@/utils/Math.uuid'
    export default {
        components: {
            StudentList
        },
        props: {
            listType: {
                type: String,
                default: 'school'
            },
            courseInfo: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        data() {
            return {
                itemNum:50,
                tabName:'record',
                sysClass: {
                    classroomCode: '',
                    classroomName:''
                },
                selectClassStatus: false,
                showQrStatus: false,
                joinQRcode: undefined,
                newPersonalStatus: false,
                addStudentStatus: false,
                curClassIndex: 0,
                studentColumn: [],
                studentTabelLoading: false,
                selections: [],
                addStudentStatus: false,
                personalClassroom: {
                    classroomCode: '',
                    classroomName: '',
                    notice: ''
                },
            }
        },
        methods: {
            toClassRecoerd() {
                this.$router.push({ path: '/home/classRecord' })
            },
            //创建二维码
            createQRCode(url) {
                this.$nextTick(() => {
                    // 此时已经渲染完成
                    if (this.joinQRcode == undefined) {
                        let qrcode = new QRCode('qrcode', {
                            width: 280, // 设置宽度，单位像素
                            height: 280, // 设置高度，单位像素
                            text: url // 设置二维码内容或跳转地址
                        })
                        this.joinQRcode = qrcode
                    } else {
                        this.joinQRcode.clear()
                        this.joinQRcode.makeCode(url)
                    }
                })
            },
            showQrCode() {
                this.showQrStatus = true
                this.createQRCode('https://www.habook.com.cn/')
            },
            //添加上课班级
            addClassroom(value) {
                if (value == 1) {
                    this.selectClassStatus = true
                } else if (value == 0) {
                    let randomCode = 'P'
                    for (let i = 0; i < 8; i++) {
                        randomCode += this.$jsFn.getBtwRandom(0, 9)
                    }
                    this.personalClassroom.classroomCode = randomCode
                    this.newPersonalStatus = true
                }
            },
            //手动设置组别
            setGroup() {
                if (this.currentGroup == '') {
                    this.$Message.warning('请设置组别')
                    return
                }
                if (this.selections.length == 0) {
                    this.$Message.warning('请选择需要设置组别的学生')
                    return
                }
                let groupInfo = this.groupList[this.currentGroup]
                for (let item of this.selections) {
                    let index = this.$jsFn.getIndex(this.courseInfo.classes[this.curClassIndex].students, item)
                    if (index !== -1) {
                        this.courseInfo.classes[this.curClassIndex].students[index].groupCode = groupInfo.groupCode
                        this.courseInfo.classes[this.curClassIndex].students[index].groupName = groupInfo.groupName
                    } else {
                        this.$Message.error('error!')
                    }
                }
                this.updated = true
            },
            confirmNewClassroom() {
                this.personalClassroom['scope'] = 'personal'
                this.personalClassroom['code'] = this.$store.state.userInfo.TEAMModelId
                this.personalClassroom['headMaster'] = this.$store.state.userInfo.TEAMModelId
                this.$api.schoolSetting.classUpsert(this.personalClassroom).then(
                    (res) => {
                        if (res.error == null) {
                            this.confirmBindingClass(this.personalClassroom.classroomCode)
                        }
                    },
                    (err) => {
                        this.$Message.error('个人班级添加失败！')
                    }
                )
            },
            confirmBindingClass(classroomCode) {
                this.$api.courseMgmt.upsertPlanDto({
                    courseId: this.courseInfo.course.id,
                    classroomCode: classroomCode,
                    code: this.$store.state.userInfo.TEAMModelId
                }).then(
                    (res) => {
                        if (res.error == null) {
                            this.$Message.success('班级添加成功！')
                        } else {
                            this.$Message.error('班级添加失败！')
                        }
                    },
                    (err) => {
                        this.$Message.error('班级添加失败！')
                    }
                )
            },
            //确认添加学生
            confirmAddStudent() {
                let requestData = []
                for (let item of this.selectedStudent) {
                    requestData.push({
                        id: item.classroomCode,
                        code: item.studentId
                    })
                }
                this.$api.courseMgmt.addClassroom(requestData).then(
                    (res) => {
                        if (!res.error) {
                            this.$Message.success('添加成功！')
                        } else {
                            this.$Message.error('添加失败！')
                        }
                    },
                    (err) => {
                        this.$Message.error('添加失败！')
                    }
                )
            },
            //获取班级关联的学生
            getClassroomStudent() {
                this.studentTabelLoading = true
                this.$api.courseMgmt.getClassroomStudent(
                    {
                        classroomCode: [this.courseInfo.classes[this.curClassIndex].classroomCode],
                        schoolCode: this.courseInfo.classes[this.curClassIndex].code == this.$store.state.userInfo.schoolCode ? this.courseInfo.classes[this.curClassIndex].code : 'dynamic'
                    }
                ).then(
                    (res) => {
                        this.courseInfo.classes[this.curClassIndex].getStatus = true
                        let students = res.result.extend.students
                        for (let index in students) {
                            let currentClassroomlInfo = this.$JSONPath.query(this.$store.state.user.schoolProfile.school_classes, "$..[?(@.classroomCode=='" + students[index].classroomCode + "')]")
                            if (currentClassroomlInfo.length > 0) {
                                let currentSchoolInfo = this.$JSONPath.query(this.$store.state.user.schoolProfile.school_base, "$..period[?(@.periodCode=='" + currentClassroomlInfo[0].periodCode + "')]")
                                students[index].periodName = currentSchoolInfo[0].periodName
                                students[index].periodCode = currentSchoolInfo[0].periodCode
                                students[index].gradeName = this.$JSONPath.query(currentSchoolInfo, "$..grades[?(@.gradeCode=='" + currentClassroomlInfo[0].gradeCode + "')]")[0].gradeName
                                students[index].gradeCode = currentClassroomlInfo[0].gradeCode
                                students[index].classroomName = currentClassroomlInfo[0].classroomName
                                //分组信息
                                let groupInfo = this.courseInfo.classes[this.curClassIndex].groups.filter((item) => {
                                    return item.studentId == students[index].studentId
                                })
                                students[index].groupName = groupInfo.length > 0 ? groupInfo[0].groupName : '未分组'
                                students[index].groupCode = groupInfo.length > 0 ? groupInfo[0].groupCode : '- -'
                            }
                        }
                        this.$set(this.courseInfo.classes[this.curClassIndex], 'students', students)
                        this.studentTabelLoading = false
                    },
                    (err) => {
                        this.studentTabelLoading = false
                    }
                )
            },
            //处理选择学生事件
            handleSelectStudent(students) {
                this.selectedStudent = students
            },
            showStudentList() {
                this.addStudentStatus = true
            },
            getSelections(selection) {
                this.selections = selection
            },
            changeClassroom(index) {
                this.curClassIndex = index
                if (!this.courseInfo.classes[this.curClassIndex].getStatus) {
                    this.getClassroomStudent()
                }
            },
            initData() {
                this.studentColumn = [
                    {
                        title: ' ',
                        type: 'selection',
                        width: 80,
                        align: 'center'
                    },
                    {
                        title: this.$t('courseManage.classroom.studentTableC1'),
                        key: 'seatNo',
                        //width: 140,
                        align: 'center',
                        sortable: true
                    },
                    {
                        title: this.$t('courseManage.classroom.studentTableC2'),
                        key: 'name',
                        align: 'left '
                    },
                    {
                        title: this.$t('courseManage.classroom.studentTableC5'),
                        key: 'groupCode',
                        //width: 150,
                        align: 'center',
                        sortable: true
                    },
                    {
                        title: this.$t('courseManage.classroom.studentTableC6'),
                        key: 'groupName',
                        //width: 150,
                        align: 'center'
                    }
                ]
            }
        },
        mounted() {
        },
        created() {
            this.initData()
        },
        watch: {
            courseInfo: {
                handler(n, o) {
                    if (this.courseInfo.classes) {
                        for (let index in this.courseInfo.classes) {
                            let classroom = this.$store.state.user.schoolProfile.school_classes.filter((item) => {
                                return item.classroomCode == this.courseInfo.classes[index].classroomCode
                            })
                            if (classroom.length > 0) {
                                this.$set(this.courseInfo.classes[index], 'classroomName', classroom[0].classroomName)
                                this.$set(this.courseInfo.classes[index], 'headMaster', classroom[0].headMaster)
                                this.$set(this.courseInfo.classes[index], 'studentCount', classroom[0].studentCount)
                                this.$set(this.courseInfo.classes[index], 'code', classroom[0].code)
                            } else {
                                this.$api.schoolSetting.findClassInfo({
                                    code: this.$store.state.userInfo.TEAMModelId,
                                    classroomCode: this.courseInfo.classes[index].classroomCode
                                }).then(
                                    (res) => {
                                        if (res.error == null) {
                                            if (res.result.data.length > 0) {
                                                this.$set(this.courseInfo.classes[index], 'headMaster', res.result.data[0].headMaster)
                                                this.$set(this.courseInfo.classes[index], 'studentCount', 0)
                                                this.$set(this.courseInfo.classes[index], 'classroomName', res.result.data[0].classroomName)
                                                this.$set(this.courseInfo.classes[index], 'code', this.$store.state.userInfo.TEAMModelId)
                                            } else {
                                                this.$set(this.courseInfo.classes[index], 'headMaster', '- -')
                                                this.$set(this.courseInfo.classes[index], 'studentCount', 0)
                                                this.$set(this.courseInfo.classes[index], 'classroomName', '暂无班级信息')
                                                this.$set(this.courseInfo.classes[index], 'code', this.$store.state.userInfo.TEAMModelId)
                                            }
                                        } else {
                                            this.$set(this.courseInfo.classes[index], 'headMaster', '- -')
                                            this.$set(this.courseInfo.classes[index], 'studentCount', 0)
                                            this.$set(this.courseInfo.classes[index], 'classroomName', '暂无班级信息')
                                            this.$set(this.courseInfo.classes[index], 'code', this.$store.state.userInfo.TEAMModelId)
                                        }
                                    },
                                    (err) => {
                                        this.$set(this.courseInfo.classes[index], 'headMaster', '- -')
                                        this.$set(this.courseInfo.classes[index], 'studentCount', 0)
                                        this.$set(this.courseInfo.classes[index], 'classroomName', '暂无班级信息')
                                        this.$set(this.courseInfo.classes[index], 'code', this.$store.state.userInfo.TEAMModelId)
                                    }
                                )

                            }
                        }
                        if (!this.courseInfo.classes[this.curClassIndex].getStatus) {
                            this.getClassroomStudent()
                        }
                    }
                },
                deep: true
            }
        },
        computed: {}
    }
</script>
<style scoped lang="less">
    @import './CourseClassroom.less';
</style>

<style lang="less">

    .course-classroom-info-content #loadingBox {
        margin-top: 0px !important;
    }

    .course-classroom-info-content .ivu-spin-fix {
        background: rgba(103, 103, 103, 0.27);
    }

    .course-classroom-list-header .ivu-poptip-inner {
        background-color: #404040;
        color: white;
    }

    .course-classroom-list-header .ivu-poptip-arrow::after {
        display: none;
    }

    .course-classroom-list-header .ivu-poptip-title:after, .course-classroom-list-header .ivu-poptip-title {
        display: none;
    }


    .classroom-base-info .w-e-toolbar {
        background: #383838 !important;
        border-radius: 5px 5px 0px 0px;
        border-color: #383838 !important;
    }

    .classroom-base-info .w-e-text-container {
        border-color: #383838 !important;
        border-radius: 0px 0px 5px 5px;
        overflow-y: auto !important;
        height: 220px !important;
    }

    

    .classroom-base-info .w-e-toolbar .w-e-menu:hover i {
        color: white !important;
    }

    

    .course-classroom-box .__view {
        height: 100%;
    }
    .class-record-wrap .ivu-list-split .ivu-list-item {
        border-color:#505050;
        cursor:pointer;   
        transition:background-color 1s;
    }
    .class-record-wrap .ivu-list-split .ivu-list-item:hover {
        background-color:#505050;
        
    }
</style>
