<script setup>
import { ref, reactive, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { apiMediaCommon } from '@/api/media'
import { apiAuthor } from '@/api/author'
import { apiMessage } from '@/api/message'
import { ElMessage } from 'element-plus'

import MediaPlayer from '@/views/media/components/MediaPlayer.vue'

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

const classifyOptions = ref([]) //报告分类 这期没做
const labelOptions = ref([])
function getLableList(){
    apiMediaCommon.getPermissionList().then(res=>{
        if(res.Ret!==200) return
        labelOptions.value = res.Data.List||[]
    })
}
getLableList()
const authorList = ref([])
function getAuthorList(){
    apiAuthor.getAuthorList({
        PageSize:999,
        CurrentIndex:1,
    }).then(res=>{
        if(res.Ret!==200) return 
        authorList.value = res.Data.List||[]
    })
}
getAuthorList()
const reportColumns = [
    {label:'报告名称',key:'Title',},
    {label:'摘要',key:'Abstract',},
    /* {label:'分类',key:'classify',}, */
    {label:'研究员',key:'Author',},
    {label:'标签',key:'PermissionNames',},
    {label:'发布/审批时间',key:'PublishedTime',width:250,sortable:true}
]
const audioColumns = [
    {label:'音频名称',key:'mediaName',},
    {label:'研究员',key:'authorName',},
    {label:'标签',key:'PermissionNames',},
    {label:'添加时间',key:'publishedTime',width:250,sortable:true}
]
const videoColumns = [
    {label:'视频封面',key:'coverSrc',},
    {label:'视频名称',key:'mediaName',},
    {label:'研究员',key:'authorName',},
    {label:'标签',key:'PermissionNames',},
    {label:'添加时间',key:'publishedTime',width:250,sortable:true}
]

const activeType = ref('report')
const tableColumns = computed(()=>{
    return {
        'report':reportColumns,
        'audio':audioColumns,
        'video':videoColumns
    }[activeType.value]
})
const placeholderText = computed(()=>{
    return {
        'report':'报告名称',
        'audio':'音频名称',
        'video':'视频名称'
    }[activeType.value]
})
function handleTabChange(){
    //清空筛选项
    tableQuery.labels=''
    tableQuery.author=''
    tableQuery.keyWord=''
    //重置页码
    handlePageChange(1)
}
function handlePageChange(page){
    tableQuery.currentPage = page
    getTableData()
}
const tableLoading = ref(false)
const tableData = ref([])
async function getTableData(){
    tableLoading.value = true
    const params = {
        KeyWord:tableQuery.keyWord,
        PermissionIds:Array.isArray(tableQuery.labels)?tableQuery.labels.join(','):'',
        SortType:tableQuery.sortType,
        CurrentIndex:tableQuery.currentPage,
        PageSize:tableQuery.pageSize,
    }
    const otherParams = activeType.value==='report'?{
        AnalystNames:Array.isArray(tableQuery.author)?tableQuery.author.map(i=>i.Name).join(','):''
    }:{
        AnalystIds:Array.isArray(tableQuery.author)?tableQuery.author.map(i=>i.Id).join(','):''
    }
    const apiMap = {
        'report':apiMessage.getReportMsgList,
        'audio':apiMessage.getAudioMsgList,
        'video':apiMessage.getVideoMsgList,
    }
    const res = await apiMap[activeType.value]({...params,...otherParams})
    tableLoading.value = false
    if(res.Ret!==200) return 
    tableData.value = res.Data.List||[]
    tableQuery.totals = res.Data.Paging.Totals||0
}
getTableData()

function handleClassifyChange(){}
function handleLabelChange(){
    handlePageChange(1)
}
function handleAuthorChange(){
    handlePageChange(1)
}
let mediaPlayerShow = ref(false)
let curData = reactive({})
function handlePreviewMedia(data){
    curData.mediaName = data.mediaName||''
    curData.fileUrl=data.src||''
    mediaPlayerShow.value = true
}
function checkDataStatus(data){
    const status = activeType.value==='report'?data.SendStatus:data.sendStatus
    return status==='UNSEND'
}
function pushMessage(data){
    apiMessage.pushMessage({
        DataId:activeType.value==='report'?data.Id:data.mediaId,
        DataType:activeType.value
    }).then(res=>{
        if(res.Ret!==200) return 
        ElMessage.success('推送成功')
        getTableData()
    })
}
function handleSortChange({order,prop}){
    tableQuery.sortType = order==='ascending'?'asc':'desc'
    getTableData()
}
</script>

<template>
    <div class="notification-list-wrap">
        <div class="select-box">
            <!-- <el-cascader style="width:160px" placeholder="分类" v-model="tableQuery.classify" :options="classifyOptions" @change="handleClassifyChange" v-if="activeType==='report'"></el-cascader> -->
            <el-cascader style="width:240px" placeholder="标签" v-model="tableQuery.labels" @change="handleLabelChange"
                :options="labelOptions"
                collapse-tags
                collapse-tags-tooltip
                clearable
                :props="{
                    value:'id',
                    label:'name',
                    emitPath:false,
                    multiple:true
                }"
            ></el-cascader>
            <el-select style="width:160px" placeholder="研究员" v-model="tableQuery.author" @change="handleAuthorChange"
                multiple collapse-tags collapse-tags-tooltip clearable value-key="Id">
                <el-option 
                    v-for="item in authorList" 
                    :key="item.Id"
                    :label="item.Name"
                    :value="item"></el-option>
            </el-select>
            <el-input style="width:400px" :placeholder="placeholderText" v-model="tableQuery.keyWord" 
            @input="handlePageChange(1)"
            :prefix-icon="Search" clearable />
        </div>
        <div class="tab-box">
            <el-tabs v-model="activeType" class="tabs" @tab-change="handleTabChange">
                <el-tab-pane label="报告" name="report"></el-tab-pane>
                <el-tab-pane label="音频" name="audio"></el-tab-pane>
                <el-tab-pane label="视频" name="video"></el-tab-pane>
            </el-tabs>
        </div>
        <div class="table-box">
            <el-table stripe border :data="tableData" element-loading-text="数据加载中..." v-loading="tableLoading" @sort-change="handleSortChange">
                <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="handlePreviewMedia(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="pushMessage(row)" v-if="checkDataStatus(row)" v-permission="'customer:sendMessage'">推送</el-link>
                        <span v-else style="color:#666666;">已推送</span>
                    </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>
    <MediaPlayer 
        v-model:show="mediaPlayerShow"
        :title="curData.mediaName"
        :src="curData.fileUrl"
        :mediaType="activeType"
    >
    </MediaPlayer>
</template>

<style scoped lang="scss">
.notification-list-wrap{
    .select-box{
        display: flex;
        gap:16px;
        .el-input{
            margin-left: auto;
        }
    }
    .tab-box{
        margin-top: 20px;
        :deep(.el-tabs__header){
            background-color: #fff;
        }
        :deep(.el-tabs--top .el-tabs__item.is-top:nth-child(2)){
            padding-left: 20px !important;
        }
        :deep(.el-tabs__nav-wrap:after){
            background-color: transparent;
        }
    }
}
</style>
