<template>
    <div class="video-add-page">
        <el-form ref="form" :model="formData" label-width="80px" :rules="rules">
            <div style="display: flex;">
                <div style="width: 50%;">
                    <el-form-item label="分类" prop="classify">
                        <el-cascader 
                            style="width:100%"
                            :options="options" 
                            :show-all-levels="true"
                            :props="{
                                value:'Id',
                                label:'ClassifyName',
                                children:'Child'
                            }"
                            v-model="formData.classify"
                            placeholder="请选择分类"
                            @change="handleClassifyChange"
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item label="标题" prop="title">
                        <el-input v-model="formData.title" placeholder="请填写标题"></el-input>
                    </el-form-item>
                    <el-form-item label="摘要" prop="des">
                        <el-input v-model="formData.des" type="textarea" :rows="2" placeholder="请填写摘要"></el-input>
                    </el-form-item>
                </div>
                <div style="width: 50%;">
                    <el-form-item label="视频" prop="videoUrl">
                        <div style="display:flex">
                        <el-input readonly v-model="formData.videoUrl" placeholder="请上传视频"></el-input>
                        <el-upload
                            style="display: inline-block;margin-left:5px"
                            action=""
                            accept=".mp4"
                            :http-request="handleUpload"
                            :before-upload="handelBeforeUploadVideo"
                            :show-file-list="false"
                            :disabled="startUpload"
                        >
                            <el-button type="primary" :loading="startUpload">上传视频</el-button>
                        </el-upload>
                        <el-progress type="circle" :percentage="percentage" width="40" style="margin-left:10px" v-if="startUpload"></el-progress>
                        </div>
                        <p style="color:#999">*注：要求视频格式为mp4，编码器为H.264</p>
                    </el-form-item>
                    <el-form-item label="封面" prop="imgUrl">
                        <el-image 
                            style="width: 120px; height: 120px"
                            :src="require('@/assets/img/icons/add-img.png')" 
                            v-if="!formData.imgUrl"
                            @click="handleshowChooseImgPop"
                        />
                        <div v-else class="pre-img-box">
                            <el-image 
                                style="width: 120px; height: 120px"
                                :src="formData.imgUrl" 
                                :preview-src-list="[formData.imgUrl]">
                            </el-image>
                            <span class="del" @click="formData.imgUrl=''">删除</span>
                        </div>
                        
                    </el-form-item>
                </div>
            </div>
            <el-form-item label="Overview" prop="overview">
                <div id="leftoverview">
                    <froala 
                        :id="`overview-editor`" 
                        :style="{display:'none'}"
                        :ref="`overviewEditor`" 
                        :tag="'textarea'" 
                        :config="overviewConfig" 
                        v-model="formData.overview"
                    >
                    </froala> 
                </div>
            </el-form-item>
            <div style="text-align:left;margin:50px 0">
                <el-button type="primary" @click="handleSave">保存</el-button>
                <el-button type="primary" plain @click="handleSave('publish')">发布</el-button>
                <el-button @click="$router.back()">取消</el-button>
            </div>
        </el-form>

        <!-- 选择视频封面弹窗 -->
        <el-dialog
            :visible.sync="chooseImgPop"
            :modal-append-to-body='false'
            v-dialogDrag
            width="60vw"
            title="视频封面库"
        >
            <div class="choose-img-wrap">
                <div class="list">
                    <div 
                        class="item" 
                        v-for="item in popImgList" 
                        :key="item.CommunityVideoCoverId"
                        @click="handleChooseImg(item)"
                    >
                        <el-image 
                            style="width: 120px; height: 120px"
                            :src="item.CoverUrl"
                        >
                        </el-image>
                        <div>{{item.CoverName}}</div>
                    </div>
                </div>
                <div>
                    <el-pagination 
                        layout="total,prev,pager,next" 
                        background
                        :current-page="imgPopPage"
                        @current-change="handleimgPopPageChange"
                        :page-size="imgPopPagesize" 
                        :total="imgPopTotal"
                        style="float:right;margin-top:20px">
                    </el-pagination>
                </div>
            </div>
            
        </el-dialog>
    </div>
</template>

<script>
import MD5 from 'js-md5'
import {getOSSSign} from '@/api/api.js'
import {customInterence,videoInterface,departInterence} from '@/api/api.js'
import * as classifyEnInterface from "@/api/modules/classifyEnApi.js";
import { videoENInterface } from '@/api/modules/reportEnApi'
let ALOSSINS=null //阿里云上传实例
let ALOSSAbortCheckpoint=null //阿里云上传实例中断点
export default {
    data() {
        return {
            overviewConfig:{
                toolbarButtons: [
					'textColor',
					'bold',
					'italic',
					'underline',
					'strikeThrough',
					'subscript',
					'superscript',
					'fontFamily',
					'fontSize',
					'color',
					'inlineClass',
					'inlineStyle',
					'paragraphStyle',
					'lineHeight',
					'paragraphFormat',
					'align',
					'outdent',
					'indent',
					'quote',
					'specialCharacters',
					'insertHR',
					'selectAll',
					'clearFormatting',
					'undo',
					'redo',
                ],
                height:300,
                fontSizeDefaultSelection: "16",
                quickInsertEnabled: false,
                theme: "dark", //主题
                placeholderText:'请输入overview',
                language: "zh_cn",
                //允许粘贴的样式
                pasteAllowedStyleProps: ['font-family', 'font-size', 'color']
            },
            formData:{
                id:0,
                title:'',
                classify:[],
                des:'',
                videoUrl:'',
                VideoSeconds:0,//时长
                imgUrl:'',
                overview:'',
                state:1,
            },
            rules:{
                title:[{required: true, message: '请输入标题', trigger: 'blur'}],
                classify:[{required: true, message: '请选择标签', trigger: 'change'}],
                des:[{required: true, message: '请填写摘要', trigger: 'blur'}],

                videoUrl:[{required: true, message: '请上传视频', trigger: 'change'}],
                imgUrl:[{required: true, message: '请上传视频封面', trigger: 'change'}],
                overview:[{required: true, message: '请填写overview', trigger: 'blur'}],
            },
            options:[],

            percentage:0,
            startUpload:false,//开始上传

            chooseImgPop:false,
            imgPopPage:1,
            imgPopPagesize:20,
            imgPopTotal:0,
            popImgList:[],
        }
    },
    created(){
        this.init()
        this.getClassify()
    },
    beforeDestroy(){
        if(ALOSSAbortCheckpoint){
            console.log('终止上传');
            ALOSSINS.abortMultipartUpload(ALOSSAbortCheckpoint.name,ALOSSAbortCheckpoint.uploadId)
        }
    },
    methods: {
        // 分类变化设置标题
        handleClassifyChange(e){
            if(this.formData.id) return //编辑情况不改
            let name=''
            this.options.forEach(item => {
                if(item.Id==this.formData.classify[0]){
                    item.Child.forEach(_item=>{
                        if(_item.Id==this.formData.classify[1]){
                            _item.Child.forEach(_it =>{
                                if(_it.Id==this.formData.classify[2]){
                                    name=_it.ClassifyName
                                }
                            })
                        }
                    })
                }
            });
            this.formData.title='Online Presentation:'+name

        },

        //获取视频时长的promise
        handleGetDuration(file){
            return new Promise((resolve,reject)=>{
                const fileUrl=URL.createObjectURL(file)
                const audioEl=new Audio(fileUrl)
                audioEl.addEventListener('loadedmetadata',(e)=>{
                    console.log('e.path',e.path)
                    console.log('e.composedPath',e.composedPath())
                    console.log('获取视频时长',e.composedPath()[0].duration);
                    console.log(audioEl.duration);
                    const t=e.composedPath()[0].duration
                    resolve(t)
                })
            })
        },

        //上传视频判断格式
        handelBeforeUploadVideo(e){
            if(e.type!='video/mp4'){
                this.$message.warning('上传失败，上传视频格式不正确')
                return false
            }
        },

        // 上传视频
        async handleUpload(e){
            const duration=await this.handleGetDuration(e.file)
            if(duration>600&&this.navType===1){
                this.$message.warning('视频时长不得超过10分钟')
                return 
            }
            console.log(e);
            this.formData.VideoSeconds=duration
            const res=await getOSSSign()
            if(res.Ret===200){
                let accessKeyId=res.Data.AccessKeyId
                let accessKeySecret=res.Data.AccessKeySecret
                let stsToken=res.Data.SecurityToken
                this.handleUploadToOSS(e.file,accessKeyId,accessKeySecret,stsToken)
            }
        },

         //上传到阿里云
         async handleUploadToOSS(file,accessKeyId,accessKeySecret,stsToken){
            this.startUpload=true
            ALOSSINS=new OSS({
                // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
                region: "oss-cn-shanghai",
                // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
                accessKeyId: accessKeyId,
                accessKeySecret: accessKeySecret,
                // 从STS服务获取的安全令牌（SecurityToken）。
                stsToken: stsToken,
                // 填写Bucket名称，例如examplebucket。
                bucket: "hzchart",
                endpoint:'hzstatic.hzinsights.com',
                cname:true,
                timeout:600000000000
            });
            // 生成文件名
            const t=new Date().getTime().toString()
            const temName=`static/yb/en/video/${MD5(t)}.${file.type.split('/')[1]}`
            console.log(temName);

            const options = {
                // 获取分片上传进度、断点和返回值。
                progress: (p, cpt, res) => {
                    console.log(p);
                    ALOSSAbortCheckpoint=cpt
                    this.percentage=parseInt(p*100)
                },
                // 设置并发上传的分片数量。
                parallel: 10,
                // 设置分片大小。默认值为1 MB，最小值为100 KB。
                partSize: 1024 * 1024 * 10, // 10MB
            };
            try {
                const res=await ALOSSINS.multipartUpload(temName,file,{...options})
                console.log('上传结果',res);
                if(res.res.status===200){
                    this.formData.videoUrl='https://hzstatic.hzinsights.com/'+res.name
                    this.startUpload=false
                    this.percentage=0
                    ALOSSAbortCheckpoint=null
                }
            } catch (error) {
                console.log('上传到阿里云失败',error);
                if(error.name!=="cancel"){//不是取消上传的则给错误提示
                    this.$message.warning('上传失败，请刷新重试')
                }
                this.startUpload=false
                this.percentage=0
                ALOSSAbortCheckpoint=null
            }
        },

        //显示选择视频封面列表
        handleshowChooseImgPop(){
            this.imgPopPage=1
            this.handleGetPopImgList()
            this.chooseImgPop=true
        },

        //弹窗中选择视频封面的列表数据
        async handleGetPopImgList(){
            const res=await videoENInterface.videoCoverImgList({
                PageSize:this.imgPopPagesize,
                CurrentIndex:this.imgPopPage,
            })
            if(res.Ret===200){
                this.imgPopTotal=res.Data.Paging.Totals 
                this.popImgList=res.Data.List||[]
            }
        },

        handleChooseImg(item){
            this.formData.imgUrl=item.CoverUrl
            this.chooseImgPop=false
        },

        //保存数据
        handleSave(e){
            this.$refs.form.validate(async (valid)=>{
                if(!valid) return
                let params={
                    Id:this.formData.id,
                    // 传二级和三级分类
                    ClassifyIdFirst:this.formData.classify[1],
                    ClassifyIdSecond:this.formData.classify[2],
                    Title:this.formData.title,
                    Abstract:this.formData.des,
                    State:this.formData.state,//状态：1:未发布，2:已发布
                    VideoUrl:this.formData.videoUrl,
                    VideoCoverUrl:this.formData.imgUrl,
                    VideoSeconds:this.formData.VideoSeconds.toString(),
                    Overview:this.formData.overview.replace(/<p data-f-id=\"pbf\".*?<\/p>/g,'')
                }

                const res=await videoENInterface.roadVideoSave(params)
                if(res.Ret===200){
                    if(e==='publish'){
                        let res2=await videoENInterface.roadVideoPublished({Id:res.Data.Id})
                        if(res2.Ret===200){
                            this.$message.success('发布成功')
                            this.$router.back()
                        }
                    }else{
                        this.$message.success('保存成功')
                        this.$router.back()
                    }
                }
            })
            
        },

        //初始化
        init(){
            const obj=sessionStorage.getItem('videoENItem')?JSON.parse(sessionStorage.getItem('videoENItem')):''
            console.log(obj);
            if(obj){
                this.formData.id=obj.Id
                this.formData.title=obj.Title
                this.formData.classify=[obj.ClassifyIdRoot,obj.ClassifyIdFirst,obj.ClassifyIdSecond]
                this.formData.des=obj.Abstract
                this.formData.videoUrl=obj.VideoUrl
                this.formData.VideoSeconds=obj.VideoSeconds
                this.formData.imgUrl=obj.VideoCoverUrl
                this.formData.overview=obj.Overview
                this.formData.state=obj.State
            }
            
        },

        //获取分类数据
        async getClassify(){
            const res=await classifyEnInterface.classifyList({CurrentIndex:1,PageSize:1000,ClassifyType:1})
            if(res.Ret===200){
                const arr=res.Data.List||[]
                this.options=arr.map(item=>{
                    if(item.Child && item.Child.length>0){
                        item.Child.map(it =>{
                            console.log(it);
                            it.disabled = it.Child?false:true
                        })
                    }

                    return{
                        ...item,
                        disabled:item.Child?false:true
                    }
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.video-add-page{
    border: 1px solid #DCDFE6;
    background-color: #fff;
    border-radius: 4px;
    padding: 30px;
    .choose-img-wrap{
        padding-bottom: 80px;
        .list{
            display:flex;
        flex-wrap:wrap;
        }
        .item{
            flex-shrink:0;
            text-align:center;
            margin-right:20px;
            margin-bottom:20px;
            border: 1px solid rgb(199, 198, 198);
            padding: 5px;
            border-radius: 4px;
        }
    }
    .pre-img-box{
        position: relative;
        width: 120px;
        height: 120px;
        .del{
            display: none;
            color: #fff;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
            line-height: 24px;
            background-color: rgba($color: #000000, $alpha: 0.8);
            cursor: pointer;
        }
        &:hover{
            .del{
                display: block;
            }
        }
    }
}

</style>