<template>
    <div class="bullet-chat-page">
        <div class="top-box">
            <el-select v-model="source" clearable placeholder="请选择所属模块" @change="typeChange">
                <el-option
                    v-for="item in sourceOpt"
                    :key="item.val"
                    :label="item.label"
                    :value="item.val">
                </el-option>
            </el-select>
            <el-input 
                v-model="keyWord"
                placeholder="请输入弹幕内容或视频标题" 
                @input="search" 
                clearable
                style="width: 400px;float:right" 
                prefix-icon="el-icon-search"
            ></el-input>
        </div>
        <div class="main">
            <el-table
				ref='table'
				border
				:data="tableData"
				v-loading="showDataLoading"
				element-loading-text="加载中..."
				style="margin-top: 20px"
			>
                <el-table-column
					v-for="item in tableColums"
					:key="item.label"
					:label="item.label"
					:width="item.widthsty"
					:min-width="item.minwidthsty"
                    :show-overflow-tooltip="item.toolTip"
					align="center"
					:prop="item.key"
				>
                    <template slot-scope="{row}">
                        <span v-if="item.key=='Source'">{{row.Source===1?'视频社区':'线上路演'}}</span>
                        <span v-else-if="item.key==='Seconds'">{{row.Seconds|formatSeconds}}</span>
                        <span v-else-if="item.key==='SourceAgent'">{{row.SourceAgent=='1'?'小程序':'pc端'}}</span>
                        <span v-else-if="item.key==='opt'" style="color:#ff0000;cursor: pointer;" @click="handleDel(row)">删除</span>
                        <span v-else>{{ row[item.key] || '——' }}</span>
                    </template>
                </el-table-column>

            </el-table>
            <div>
                <el-pagination 
                    layout="total,prev,pager,next" 
                    background
                    :current-page="page"
                    @current-change="handlePageChange"
                    :page-size="pageSize" 
                    :total="total"
                    style="float:right;margin-top:20px">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import {videoInterface} from '@/api/api.js'
export default {
    filters:{
        formatSeconds(e){
            let tem=parseInt(e)
            let min=parseInt(tem/60)
            let sen=parseInt(tem%60)
            if(min>1){
                return `${min}分${sen}秒`
            }else{
                return `${sen}秒`
            }
        }
    },
    data() {
        return {
            source:'',
            sourceOpt:[{label:'视频社区',val:1},{label:'线上路演',val:2}],
            keyWord:'',

            showDataLoading:false,
            tableData:[],
            page:1,
            pageSize:15,
            total:0,
            tableColums:[
                {
					label: '弹幕内容',
					key: 'Content',
                    minwidthsty:'200px',
                    toolTip:true
				},
                {
					label: '视频标题',
					key: 'Title',
                    minwidthsty:'150px'
				},
                {
					label: '所属模块',
					key: 'Source',
				},
                {
					label: '时间点',
					key: 'Seconds',
				},
                {
					label: '发送时间',
					key: 'CreateTime',
                    minwidthsty:'120px'
				},
                {
					label: '发送人',
					key: 'UserName',
				},
                {
					label: '弹幕来源',
					key: 'SourceAgent',
				},
                {
					label: '操作',
					key: 'opt',
				},
            ]


        }
    },
    created() {
        this.getList()
    },
    methods: {
        async getList(){
            this.showDataLoading=true
            const res=await videoInterface.bulletChatList({
                PageSize:this.pageSize,
                CurrentIndex:this.page,
                Source:this.source,
                Keywords:this.keyWord
            })
            this.showDataLoading=false
            if(res.Ret===200){
                this.total=res.Data.Paging.Totals 
                this.tableData=res.Data.List||[]
            }
        },

        search(){
            this.page=1
            this.source=''
            this.getList()
        },

        handlePageChange(e){
            this.page=e
            this.getList()
        },

        typeChange(){
            this.keyWord=''
            this.page=1
            this.getList()
        },

        // 删除弹幕
        handleDel(item){
            this.$confirm('是否确认删除该条弹幕，删除后不可恢复!', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                videoInterface.bulletChatDel({Id:item.Id}).then(res=>{
                    if(res.Ret===200){
                        this.$message.success('删除成功')
                        this.page=1
                        this.source=''
                        this.getList()
                    }
                })
            }).catch(() => {
                             
            });
        }
    },
}
</script>

<style lang="scss" scoped>
.bullet-chat-page{
    min-height: 70vh;
    padding: 20px 30px;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 4px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
}
</style>