<script setup>
import {videoTableColumn} from './config/tableColumn'
import {VideoInterface} from '@/api/modules/trainingApi'
import {useVideo} from './hooks/use-video'
import { ref,reactive } from 'vue'
import { useRouter } from "vue-router"
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'


const router = useRouter()
const {
    classifyList,getClassifyList,
    tagList,getTagList,
    getDataClassify,
    previewPop,previewVideo,previewVideoUrl,previewPopTitle,
    handlePreviewVideo,endingPreview
} = useVideo()
getClassifyList()
getTagList()

/* search options */
let searchParams = reactive({
    searchText:'',
    datePick:[],
    ClassifyId:'',
    TagIds:[],
    PublishState:'',
})

let tableParams = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})
let tableData = ref([])
const tableColumn = videoTableColumn
function getTableData(){
    VideoInterface.getVideoList({
        PageSize:tableParams.pageSize,
        CurrentIndex:tableParams.currentPage,
        Keyword:searchParams.searchText,
        StartTime:searchParams.datePick?.[0]||'',
        EndTime:searchParams.datePick?.[1]||'',
        ClassifyId:Number(searchParams.ClassifyId),
        TagIds:searchParams.TagIds.join(','),
        PublishState:Number(searchParams.PublishState)
    }).then(res=>{
        if(res.Ret!==200) return 
        if(!res.Data){
            tableData.value = []
            tableParams.total = 0
            return
        } 
        tableData.value = res.Data.List||[]
        tableParams.total = res.Data.Paging.Totals
    })
}
getTableData()
function handleCurrentChange(page){
    tableParams.currentPage = page
    getTableData()
}

function handleModifyVideo(VideoId){
    router.push({path:'/modifyVideo',query:{VideoId}})
}

function deleteVideo(data){
    const hint = data.PublishState===0?'删除后不可恢复,是否确认删除?':'该视频已发布,删除后取消发布并删除,是否确认删除?'
    ElMessageBox.confirm(
            hint,'提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',  
            }
    ).then(()=>{
        VideoInterface.deleteVideo({
            VideoId:data.VideoId,
        }).then(res=>{
            if(res.Ret!==200) return 
            ElMessage.success("删除成功")
            getTableData()
        })
    })
}

function publishVideo(data){
    const hint = data.PublishState===0?'是否确认发布':'是否取消发布'
    ElMessageBox.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 
            ElMessage.success(`${data.PublishState?'取消发布':'发布'}成功`)
            getTableData()
        })
    })
}
</script>
<template>
    <div class="video-manage-wrap traing-manage">
        <div class="top-wrap">
            <div class="select-box">
                <el-date-picker
                    v-model="searchParams.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="searchParams.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="searchParams.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="searchParams.PublishState" clearable
                    @change="handleCurrentChange(1)">
                    <el-option label="未发布" :value="1"/>
                    <el-option label="已发布" :value="2"/>
                </el-select>
            </div>
            <el-input v-model="searchParams.searchText" clearable 
                :prefix-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 #default="{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 #default="{row}">
                        <el-link :underline="false" type="primary" style="margin-right: 20px;" @click="handleModifyVideo(row.VideoId)" v-show="row.PublishState===0">编辑</el-link>
                        <el-link :underline="false" type="primary" style="margin-right: 20px;" @click="publishVideo(row)">{{row.PublishState===0?'发布':'取消发布'}}</el-link>
                        <el-link :underline="false" type="danger" @click="deleteVideo(row)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                layout="total,prev,pager,next,jumper" 
                background
                :current-page="tableParams.currentPage"
                @current-change="handleCurrentChange"
                :page-size="tableParams.pageSize" 
                :total="tableParams.total"
                style="margin-top: 60px;justify-content: flex-end;">
            </el-pagination>
        </div>
        <!-- 预览视频弹窗 -->
        <el-dialog
            v-model="previewPop"
            :modal-append-to-body='false'
            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>

<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>
