<template>
    <div class="video-manage-wrap traing-manage">
        <div class="top-wrap">
            <div class="select-box">
                <el-date-picker
                    v-model="datePick"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    clearable
                    @change="handleCurrentChange(1)">
                </el-date-picker>
                <el-cascader placeholder="选择分类" 
                    v-model="ClassifyId"
                    :options="classifyList"
                    clearable
                    :show-all-levels="false"
                    :props="{emitPath:false,
                            checkStrictly:true,
                            label:'ClassifyName',
                            value:'ClassifyId',
                            children:'Children'}"
                    @change="handleCurrentChange(1)">
                </el-cascader>
                <el-select placeholder="选择标签" 
                    v-model="TagIds" multiple clearable
                    @change="handleCurrentChange(1)">
                    <el-option
                        v-for="item in tagList"
                        :key="item.TagId"
                        :label="item.TagName"
                        :value="item.TagId">
                    </el-option>
                </el-select>
                <el-select placeholder="选择状态" 
                    v-model="PublishState" clearable
                    @change="handleCurrentChange(1)">
                    <el-option label="未发布" :value="1"/>
                    <el-option label="已发布" :value="2"/>
                </el-select>
            </div>
            <el-input v-model="searchText" clearable 
                prefix-icon="el-icon-search" placeholder="请输入视频名称" @input="handleCurrentChange(1)" 
                style="width:240px;"></el-input>
        </div>
        <div class="table-wrap">
            <el-button type="primary" @click="handleModifyVideo(0)">新增视频</el-button>
            <el-table border :data="tableData">
                <el-table-column v-for="column in tableColumn" :key="column.key" 
                    :label="column.label" align="center"
                    :prop="column.key"
                    :width="column.Width"
                    :min-width="column.minWidth">
                    <template slot-scope="{row}">
                        <!-- 视频封面 -->
                        <div class="img-box" v-if="column.key==='CoverImg'">
                            <img :src="row.CoverImg" @click="handlePreviewVideo(row)">
                        </div>
                        <!-- 分类 -->
                        <span v-else-if="column.key==='Classify'">
                            {{getDataClassify(row.Classify).join('/')}}
                        </span>
                        <!-- 标签 -->
                        <div class="label-box" v-else-if="column.key==='Tags'">
                            <span class="label-item" v-for="tag in row.Tags" :key="tag.TagId">{{tag.TagName}}</span>
                        </div>
                        <!-- 发布状态 -->
                        <span v-else-if="column.key==='PublishState'">{{row.PublishState===0?'未发布':'已发布'}}</span>
                        <span v-else>{{row[column.key]}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="150">
                    <template slot-scope="{row}">
                        <el-button type="text" @click="handleModifyVideo(row.VideoId)" v-show="row.PublishState===0">编辑</el-button>
                        <el-button type="text" @click="publishVideo(row)">{{row.PublishState===0?'发布':'取消发布'}}</el-button>
                        <el-button type="text" @click="deleteVideo(row)" style="color:red;">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                layout="total,prev,pager,next,jumper" 
                background
                :current-page="currentPage"
                @current-change="handleCurrentChange"
                :page-size="pageSize" 
                :total="total"
                style="text-align:right;margin-top:30px;">
            </el-pagination>
        </div>
        <!-- 预览视频弹窗 -->
        <el-dialog
            :visible.sync="previewPop"
            :modal-append-to-body='false'
            v-dialogDrag
            width="60vw"
            :title="previewPopTitle"
            @close="endingPreview"
        >
            <video style="width: 100%;height: 100%;max-height: 70vh;outline: none;" 
            controls :src="previewVideoUrl" autoplay ref="previewVideo">
            您的浏览器暂不支持,请更换浏览器
            </video>
        </el-dialog>
    </div>
</template>

<script>
import {videoTableColumn} from './config/tableColumn'
import {VideoInterface} from '@/api/modules/trainingApi'
import mixin from './mixins/videoMixins'
export default {
    mixins:[mixin],
    data() {
        return {
            /* search options */
            searchText:'',
            datePick:[],
            ClassifyId:'',
            TagIds:[],
            PublishState:'',

            tableData: [],
            tableColumn:videoTableColumn,
            tableLoading: false,

            currentPage: 1,
            pageSize: 10,
            total: 0,

            previewPop:false,
            previewVideoUrl:'',
            previewPopTitle:''


        };
    },
    methods: {
        //获取视频分类路径
        getDataClassify(classify,classifyArr=[]){
            classifyArr.push(classify.ClassifyName)
            if(classify.Children&&classify.Children.length){
                return this.getDataClassify(classify.Children[0],classifyArr)
            }
            return classifyArr
        },
        //获取视频列表
        getTableData(){
            VideoInterface.getVideoList({
                PageSize:this.pageSize,
                CurrentIndex:this.currentPage,
                Keyword:this.searchText,
                StartTime:this.datePick[0],
                EndTime:this.datePick[1],
                ClassifyId:Number(this.ClassifyId),
                TagIds:this.TagIds.join(','),
                PublishState:Number(this.PublishState)
            }).then(res=>{
                if(res.Ret!==200) return 
                if(!res.Data){
                    this.tableData = []
                    this.total = 0
                    return
                } 
                this.tableData = res.Data.List||[]
                this.total = res.Data.Paging.Totals
            })
        },
        handleModifyVideo(VideoId){
            this.$router.push({path:'/modifyVideo',query:{VideoId}})
        },
        deleteVideo(data){
            const hint = data.PublishState===0?'删除后不可恢复,是否确认删除?':'该视频已发布,删除后取消发布并删除,是否确认删除?'
            this.$confirm(
                    hint,'提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',  
                    }
            ).then(()=>{
                VideoInterface.deleteVideo({
                    VideoId:data.VideoId,
                }).then(res=>{
                    if(res.Ret!==200) return 
                    this.$message.success("删除成功")
                    this.getTableData()
                })
            })
        },
        publishVideo(data){
            const hint = data.PublishState===0?'是否确认发布':'是否取消发布'
            this.$confirm(
                    hint,'提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',  
                    }
            ).then(()=>{
                VideoInterface.publishVideo({
                    VideoId:data.VideoId,
                    PublishState:data.PublishState===0?1:0
                }).then(res=>{
                    if(res.Ret!==200) return 
                    this.$message.success(`${data.PublishState?'取消发布':'发布'}成功`)
                    this.getTableData()
                })
            })
        },
        handleCurrentChange(page){
            this.currentPage = page
            this.getTableData()
        },
        handlePreviewVideo(data){
            if(!data.VideoUrl) return
            this.$refs.previewVideo && this.$refs.previewVideo.play()
            this.previewPopTitle = data.Title||'暂无标题'
            this.previewVideoUrl = data.VideoUrl
            this.previewPop = true
        },
        // 结束预览弹窗关闭回调 -- 暂停视频
        endingPreview(){
            this.$refs.previewVideo && this.$refs.previewVideo.pause()
        },
    },
    mounted(){
        this.getClassifyList()
        this.getTagList()
        this.getTableData()
    }
};
</script>

<style scoped lang="scss">
@import "./css/manage.scss";
.video-manage-wrap{
    .table-wrap{
        .el-table{
            margin-top:20px;
            .img-box{
                text-align: center;
                img{
                    width:150px;
                    height:100px;
                }
            }
            .label-box{
                display: flex;
                justify-content: center;
                gap:8px;
                .label-item{
                    padding:6px 12px;
                    border: 1px solid #409EFF;
                    color: #409EFF;
                    background-color: #EAF3FE;
                    box-sizing: border-box;
                    border-radius: 4px;
                }
            }
        }
    }
}
</style>
