<template>
    <div class="class-memoir">
        <Tabs value="name1" v-show="showStatus === false">
            <TabPane :label="$t('jyzx.classRecord.myRecod')" name="name1">
                <Card :bordered="false">
                    <div>
                        <AbilityUpload :auth="curSas" :acceptTypes="['mp4','avi','flv','mkv','rmvb']" :scope="'school'" mode='other' :prefix="uploadId" @uploadFinish="uploadFinish"></AbilityUpload>
                        <Button type="info" size="large" :long="true" @click="confirm">{{ $t('jyzx.classRecord.loadOK') }}</Button>
                    </div>
                    <div v-if="calssListinfo.length" style="height: calc(100vh - 255px); overflow: auto">
                        <Table :columns="classCol" :data="calssListinfo" height="680">
                            <template slot-scope="{ row, index }" slot="action">
                                <Button size="small" @click="checkevaluate(row,true)" style="margin-right:2%">{{ $t('jyzx.common.seeEvaluate') }}</Button>
                                <Button size="small" @click="delClass(row)">{{ $t('jyzx.common.delete') }}</Button>
                            </template>
                        </Table>
                    </div>
                </Card>
            </TabPane>
            <TabPane :label="$t('jyzx.classRecord.groupRecord')" name="name2">
                <div v-if="teamVideo.length" style="height: calc(100vh - 255px); overflow: auto">
                    <Table :columns="teamclassCol" :data="teamVideo" height="680">
                        <template slot-scope="{ row, index }" slot="actions">
                            <Button size="small" @click="checkevaluate(row)">{{ $t('jyzx.classRecord.see') }}</Button>
                        </template>
                    </Table>
                </div>
            </TabPane>
        </Tabs>
        <div v-show="showStatus === true">
            <p><Icon type="md-arrow-back" size="26" @click="showStatus=false" class="backward"/><span class="teachnames">罗老师</span><span class="coursename">【{{courseName}}】</span></p>
            <Table border :columns="columns1aa" :data="data1"></Table>
            <!--<div class="appraise">
                <div>
                    <span>评价结果：</span>
                    <RadioGroup v-model="border">
                        <Radio label="不合格" border></Radio>
                        <Radio label="合格" border></Radio>
                        <Radio label="优秀" border></Radio>
                    </RadioGroup>
                </div>
                <div>
                    <span>评价内容：</span>
                    <div id="div1"></div>
                </div>
            </div>-->
        </div>
    </div>
</template>

<script>
import BlobTool from '@/utils/blobTool.js'
import { formatDate } from "../../utils/time.js"
import E from "wangeditor"
export default {
    data() {
        return {
            classCol: [
                {
                    title: this.$t("jyzx.classRecord.videoName"),
                    key: "name",
                    align: "center",
                },
                {
                    title: this.$t("jyzx.common.loadTime"),
                    key: "time",
                    align: "center",
                },
                {
                    title: this.$t("jyzx.classRecord.fileSize"),
                    key: "size",
                    align: "center",
                },
                {
                    title: this.$t("jyzx.common.action"),
                    slot: "action",
                    align: "center",
                },
            ],
            teamclassCol: [
                { title: this.$t("jyzx.classRecord.videoName"), key: 'vname', align: 'center'},
                { title: this.$t("jyzx.classRecord.loadAuth"), key: 'tmdname', align: 'center' },
                { title: this.$t("jyzx.classRecord.size"), key: 'vsize', align: 'center' },
                { title: this.$t("jyzx.common.loadTime"), key: 'vtime', align: 'center'},
                { title: this.$t("jyzx.common.action"), slot: 'actions', align: 'center' },
            ],
            classList: [
                {
                    name: "XXXXXX的视频",
                    time: "2021-07-19",
                    size: 27,
                },
                {
                    name: "第一次上课视频",
                    time: "2021-07-20",
                    size: 89,
                },
                {
                    name: "XXXXXX的视频",
                    time: "2021-07-19",
                    size: 27,
                },
            ],
            calssListinfo: [],
            curSas: {
                sas: '',
                url: '',
                name: '',
            },//验证证书
            uploadId: '',//上传人ID
            uploadData: {
                blob: '',
                createTime: '',
                extension: '',
                name: '',
                size: '',
                type: '',
                url: '',
            },
            showStatus: false,
            teachName:'',
            courseName: '',
            border: '',  //评价
            teamVideo:[],//同组课堂实录
            //虚拟数据
            columns1aa: [
                {
                    title: this.$t("jyzx.classRecord.evaName"),
                    key: 'name'
                },
                {
                    title: this.$t("jyzx.classRecord.evaType"),
                    key: 'type'
                },
                {
                    title: this.$t("jyzx.classRecord.evaResult"),
                    key: 'result'
                },
                {
                    title: this.$t("jyzx.classRecord.evaContent"),
                    key: 'content'
                },
                 {
                    title: this.$t("jyzx.classRecord.evaTime"),
                    key: 'time'
                }
            ],
            data1: [
                // {
                //     name: 'John Brown',
                //     age: 18,
                //     address: 'New York No. 1 Lake Park',
                //     date: '2016-10-03'
                // },
                {
                  name:'李老师',
                  type:'互评',
                  result:'合格',
                  content:'老师讲的很不错',
                  time:'2021-07-22 15:30:22',
                  cellClassName:{result:'qualified span'},
                },
                  {
                  name:'罗老师',
                  type:'自评',
                  result:'合格',
                  content:'还需要努力',
                  time:'2021-07-24 18:32:21',
                  cellClassName:{result:'qualified span'},
                },
                  {
                  name:'张老师',
                  type:'校评',
                  result:'优秀',
                  content:'讲的很好',
                  time:'2021-07-26 10:32:21',
                  cellClassName:{result:'excellent span'},
                },
            ]
        }
    },
    created() {
        this.uploadVerify()
        this.getvideo('default');
        this.getteamvideo();
    },
    mounted() {
       let stemEditor = new E("#div1")
       stemEditor.config.onchange = (html) => {
           this.stemContent = html
       }
       stemEditor.config.uploadImgShowBase64 = true
       stemEditor.config.zIndex = 500
       stemEditor.create()
    },
    methods: {
        delClass(row) {
            console.log(row)
            this.$Modal.confirm({
                title: this.$t("jyzx.classRecord.message1"),
                okText: this.$t("jyzx.common.delete"),
                cancelText: this.$t("jyzx.common.cancel"),
                onOk: () => {
                    this.getvideo('delete', row.id)
                    /* this.$Message.success("删除成功")*/
                },
            })


        },
        //上传课堂实录相关数据
        async uploadVerify() {
            this.curSas = await this.$tools.getSchoolSas()
            var user = this.$store.state.userInfo
            this.uploadId = user.TEAMModelId
        },
        //upload过后
        uploadFinish(res) {
            console.log(res, '回调')
            if (res[0].blob && res[0].url && res[0].size) {
                this.uploadData = res[0]
                this.getvideo('uploadafter', 11)
            } else {
                this.$Message.error(this.$t("jyzx.classRecord.message2"))
            }
        },
        //确认上传
        confirm() {
            console.log(this,'指向')
            var sssinfo = this.$children[0].$children[2].$children[0].$children[0].onConfirmUpload()
        },
        //获取自己上传列表
        getvideo(action, deleId) {
            console.log(action, deleId, '传来的数据')
            let user = this.$store.state.userInfo
            var uploadafterData = {
                "tmdid": user.TEAMModelId,
                "school": user.schoolCode,
                "opt": action === 'uploadafter' ? 'Upload' : action === 'delete' ? 'Delete' : 'Read',
                "files": [],
                "ids": [],
            }
            if (action === 'uploadafter') {
                var datainfo = { "url": this.uploadData.url, "name": this.uploadData.name, "size": this.uploadData.size }
                delete uploadafterData.ids
                uploadafterData.files.push(datainfo)
                console.log(uploadafterData)
                this.$api.jyzx.getmemoir(uploadafterData).then(
                    res => {
                        console.log(res)
                        var timeData = res.classVideo.files
                        for (var u = 0; u < timeData.length; u++) {
                            timeData[u].time = this.formatDate(timeData[u].time)
                            timeData[u].size = this.formatSize(timeData[u].size)
                        }
                        this.calssListinfo = timeData
                        this.$Message.success(this.$t("jyzx.classRecord.message3"))
                    },
                    error => {
                        this.$Message.error(this.$t("jyzx.classRecord.message2"))
                    }
                )
            } else if (action === 'delete') {
                delete uploadafterData.files
                uploadafterData.ids.push(deleId)
                this.$api.jyzx.getmemoir(uploadafterData).then(
                    res => {
                        console.log(res, '删除后的操作')
                        var timeData = res.classVideo.files
                        for (var d = 0; d < timeData.length; d++) {
                            timeData[d].time = this.formatDate(timeData[d].time)
                            timeData[d].size = this.formatSize(timeData[d].size)
                        }
                        this.calssListinfo = timeData
                        this.$Message.success(this.$t("jyzx.classRecord.message4"))
                    },
                    error => {
                        this.$Message.success(this.$t("jyzx.classRecord.message5"))
                    }
                )
            } else {
                delete uploadafterData.ids
                delete uploadafterData.files
                this.$api.jyzx.getmemoir(uploadafterData).then(
                    res => {
                        console.log(res)
                        var timeData = res.classVideo.files
                        for (var p = 0; p < timeData.length; p++) {
                            timeData[p].time = this.formatDate(timeData[p].time)
                            timeData[p].size = this.formatSize(timeData[p].size)
                        }
                        this.calssListinfo = timeData
                    },
                    error => {

                    }
                )
            }
        },
        //同组课程查看评价
        checkevaluate(data,isSelf){
            console.log(data)
            // this.showStatus=true
            // this.courseName=index.name.substring(0,index.name.lastIndexOf("."));
			this.$router.push({
				name:'video',
				params:{
					data:data,
					isSelf:isSelf
				}
			})
			this.$EventBus.$emit('goVideoAppraise',data)
        },
        //同组课堂实录
        getteamvideo() {
            this.$api.jyzx.getTeamclass(
                {
                    "tmdid": this.$store.state.userInfo.TEAMModelId,
                    "school": this.$store.state.userInfo.schoolCode
                }
            ).then(
                res => {
                    console.log(res, '同组数据')
                    if (res.groupMembers.length != 0) {
                        res.groupMembers.forEach((i) => {
                            i.vtime = this.formatDate(i.vtime)
                            i.vsize = this.formatSize(i.vsize)
                        })
                        this.teamVideo = res.groupMembers
                    } else {
                        this.$Message.info(this.$t("jyzx.classRecord.message6"))
                    }
                   
                },
                error => {

                }
            )
        },
        //处理时间戳
        formatDate(date) {
            var date = new Date(date);
            var YY = date.getFullYear() + '-';
            var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
            var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
            var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
            return YY + MM + DD + " " + hh + mm + ss;
        },
        //处理文件大小
        formatSize(bytes) {
            return bytes / 1024 < 1024 ? (bytes / 1024).toFixed(1) + 'KB' : bytes / 1024 / 1024 < 1024 ? (bytes / 1024 / 1024).toFixed(1) + 'M' : (bytes / 1024 / 1024 / 1024).toFixed(1) + 'G'
        },
    },
}
</script>

<style lang="less">
.class-memoir {
    padding:1%;
	background-color: #f7f7f7;
	font-family: 'NotoSerif', '微软正黑体', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Sans-serif;
    .ivu-card {
        height: 100%;
        margin: 20px;
    }
}
    .teachnames {
        font-size: 26px;
        margin-left:10px;
    }
    .coursename {
        font-size:26px;
    }
    .backward:hover{
        cursor:pointer
    }
/*    .appraise {
        width:100%;
        padding:3%;
        margin-top:5%;
        border:1px solid #ccc;
    }*/
    .short span {
        color: red;
    }
.qualified span{
    color:orangered
}
.excellent span{
    color:rgb(0, 119, 0)
}
</style>