<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search,Plus } from '@element-plus/icons-vue'
import MediaUpload from './components/MediaUpload.vue';
import MediaPlayer from './components/MediaPlayer.vue';

import {apiVideo} from '@/api/media'

const tableQuery = reactive({
    keyWord:'',
    currentPage:1,
    pageSize:10,
    totals:0,
    sortParam:'',
    sortType:''
})

const tableColumns = [
    {label:'视频封面',key:'coverSrc',},
    {label:'视频名称',key:'mediaName',},
    {label:'研究员',key:'authorName',},
    {label:'标签',key:'permission_names',},
    {label:'添加时间',key:'publishedTime',width:250,sortable:true}
]

let mediaUploadShow = ref(false)

const tableLoading = ref(false)
const tableData = ref([])
function getTableData(){
    tableLoading.value = true
    apiVideo.getVideoList({
        PageSize:tableQuery.pageSize,
        CurrentIndex:tableQuery.currentPage,
        SortType:tableQuery.sortType,
        KeyWord:tableQuery.keyWord
    }).then(res=>{
        tableLoading.value = false
        if(res.Ret!==200) return 
        tableData.value = res.Data.List||[]
        tableQuery.totals = res.Data.Paging.Totals||0
    })
}
getTableData()
function handlePageChange(page){
    tableQuery.currentPage = page
    getTableData()
}
let mediaPlayerShow = ref(false)
function handlePreviewVideo(data={}){
    setCurData(data)
    mediaPlayerShow.value = true
}
let curData = ref({})
function setCurData(data={}){
    curData.value = {
        fileUrl:data.src||'',
        mediaName:data.mediaName||'',
        author:data.authorId||'',
        labels:data.permissionIds||'',
        mediaCover:data.coverSrc||'',
        duration:data.mediaPlayMilliseconds||0
    }
}
let modifyType = ref('add')
function handleEdit(data={}){
    setCurData(data)
    modifyType.value = data.mediaId?'edit':'add'
    curData.value.mediaId = data.mediaId||0
    mediaUploadShow.value = true
}
function handleDelete(data){
    ElMessageBox.confirm(
        '删除后不可恢复，是否确认删除该视频？',
        '提示',
        {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        }
    )
    .then(() => {
        apiVideo.deleteVideo({
            VideoId:data.mediaId
        }).then(res=>{
            if(res.Ret!==200) return 
            ElMessage.success('删除成功')
            getTableData()
        })
    }).catch(() => {})
}
function handleSortChange({order,prop}){
    tableQuery.sortType = order==='ascending'?'asc':'desc'
    getTableData()
}
</script>

<template>
    <div class="video-list-wrap">
        <div class="top-box">
            <el-button type="primary" :icon="Plus" @click="handleEdit" v-permission="'media:uploadVideo'">上传视频</el-button>
            <el-input style="width:400px;margin-left: auto;" placeholder="视频名称" 
                v-model="tableQuery.keyWord" :prefix-icon="Search" clearable 
                @input="handlePageChange(1)"/>
        </div>
        <div class="table-box">
            <el-table stripe border :data="tableData" @sort-change="handleSortChange" element-loading-text="数据加载中..." v-loading="tableLoading">
                <el-table-column 
                    align="center"
                    v-for="column in tableColumns" :key="column.key"
                    :prop="column.key" :label="column.label" :sortable="column.sortable" :width="column.width">
                    <template #default="{row}">
                        <span v-if="column.key==='mediaName'" @click="handlePreviewVideo(row)" style="color:#086CE0;cursor: pointer;">
                            {{ row.mediaName }}
                        </span>
                        <div v-else-if="column.key==='coverSrc'" style="color:#086CE0;cursor: pointer;">
                            <el-image 
                                v-if="row[column.key]"
                                fit="cover"
                                :src="row[column.key]||''" 
                                :preview-src-list="[row[column.key]||'']" 
                                style="display: inline-block;width:60px;height: 60px;" preview-teleported/>
                            <span v-else style="display: inline-block;width:60px;height: 60px;line-height: 60px;">-</span> 
                        </div>
                        <span v-else>{{ row[column.key]||'-' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="{row}">
                        <el-link type="primary" :underline="false" @click="handleEdit(row)" style="margin-right: 20px;" v-permission="'media:editVideo'">编辑</el-link>
                        <el-link type="danger" :underline="false" @click="handleDelete(row)" v-permission="'media:deleteVideo'">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                background
                layout="total,prev,pager,next,jumper"
                :current-page="tableQuery.currentPage"
                :page-size="tableQuery.pageSize"
                :total="tableQuery.totals"
                @current-change="handlePageChange"
                style=" justify-content: flex-end;border:1px solid #ebeef5;border-top: none;"
            />
        </div>
    </div>
    <MediaUpload
        v-model:show="mediaUploadShow"
        :modifydata="curData"
        mediaType="video"
        :modifyType="modifyType"
        ImageUploadWidth="192px"
        ImageUploadHeight="108px"
        @save="getTableData"
    ></MediaUpload>
    <MediaPlayer 
        v-model:show="mediaPlayerShow"
        :title="curData.mediaName"
        :src="curData.fileUrl"
        mediaType="video"
    >
    </MediaPlayer>
</template>

<style scoped lang="scss">
.video-list-wrap{
    .top-box{
        display: flex;
        margin-bottom: 20px;
    }
}
</style>
