<template>
    <div class="voice-play-list-page">
        <div class="top-filter-wrap">
            <el-select 
                v-model="selectSec" 
                placeholder="请选择板块名称"
                clearable
                @change="handleFilter"
            >
                <el-option
                    v-for="item in sectionOpts"
                    :key="item.SectionId"
                    :label="item.SectionName"
                    :value="item.SectionId"
                >
                </el-option>
            </el-select>
            <el-cascader 
                v-model="selectVari"
                placeholder="请选择品种"
                :options="varietyOpts" 
                :props="{value:'ChartPermissionId',label:'ClassifyName',children:'Items',emitPath:false}"
                :show-all-levels="false"
                ref="cascader"
                clearable
                @change="handleFilter"
                style="margin:0 20px"
            ></el-cascader>
            <el-select 
                v-model="selectUser" 
                filterable 
                placeholder="请选择语音管理员"
                clearable
                @change="handleFilter"
            >
                <el-option
                    v-for="item in userOpts"
                    :key="item.AdminId"
                    :label="item.RealName"
                    :value="item.AdminId"
                >
                </el-option>
            </el-select>
            <el-input
				placeholder="请输入"
				v-model="keyword"
				style="maxWidth:400px;marginBottom:8px;float: right;"
				@input="handleFilter"
				clearable
            >
				<i slot="prefix" class="el-input__icon el-icon-search"></i>
			</el-input>
        </div>
        <div>
            <el-table
                :data="tableData"
                border
                style="width: 100%"
                @sort-change="sortChangeHandle"
            >
                <el-table-column
                    prop="BroadcastName"
                    label="语音标题"
                    align="center"
                />
                <el-table-column
                    prop="SectionName"
                    label="板块名称"
                    align="center"
                />
                <el-table-column
                    prop="VarietyName"
                    label="品种"
                    align="center"
                    width="200"
                />
                <el-table-column
                    prop="PublishTime"
                    label="发布时间"
                    align="center"
                    width="200"
                />
                <el-table-column
                    prop="Author"
                    label="语音管理员"
                    align="center"
                    width="200"
                />
                <el-table-column
                    prop="VisitCount"
                    label="点击量"
                    width="200"
                    align="center"
                    sortable="custom"
                >
                    <template slot-scope="scope">
                        <span style="color:#409EFF;cursor: pointer;" @click="handleShowDetail(scope.row)">{{scope.row.VisitCount}}</span>
                    </template>
                </el-table-column>
                <template slot="empty">
                    <div style="margin:50px 0">
                        <img style="width:150px" src="~@/assets/img/cus_m/nodata.png" alt="">
                        <div>暂无数据~</div>
                    </div>
                </template>
            </el-table>
            <el-pagination
				layout="total,prev,pager,next,jumper" 
				background
				:current-page="page_no"
				@current-change="handleCurrentChange"
				:page-size="pageSize" 
				:total="totals"
				style="float:right;margin-top:20px">
			</el-pagination>
        </div>

        <!-- 点击量弹窗 -->
        <el-dialog
            :visible.sync="showDia"
            :close-on-click-modal="false"
            :modal-append-to-body='false'
            custom-class="dialog"
            center
            width="900px"
            v-dialogDrag
            title='点击量详情'
        >
            <div class="click-detail-dia-warp">
                <div class="title">{{curTitle}}</div>
                <div class="num">点击量：{{curNum}}</div>
                <el-table
                    :data="clickTableData"
                    border
                    style="width: 100%"
                >
                    <el-table-column
                        prop="RealName"
                        label="用户姓名"
                        align="center"
                    />
                    <el-table-column
                        prop="CompanyName"
                        label="公司名称"
                        align="center"
                    />
                    <el-table-column
                        prop="CompanyStatus"
                        label="客户状态"
                        align="center"
                        width="100"
                    />
                    <el-table-column
                        prop="VisitCount"
                        label="点击次数"
                        align="center"
                        width="100"
                    />
                    <el-table-column
                        prop="Source"
                        label="点击来源"
                        align="center"
                        width="100"
                    >
                        <template slot-scope="scope">
                            <span>{{scope.row.Source|formatSource}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="CreateTime"
                        label="最近一次点击时间"
                        align="center"
                        width="180"
                    />
                    <template slot="empty">
                        <div style="margin:50px 0">
                            <img style="width:100px" src="~@/assets/img/cus_m/nodata.png" alt="">
                            <div>暂无数据~</div>
                        </div>
                    </template>
                </el-table>
                <el-pagination
                    layout="total,prev,pager,next,jumper" 
                    background
                    :current-page="page_no_click"
                    @current-change="handleClickCurrentChange"
                    :page-size="pageSizeClick" 
                    :total="totalsClick"
                    style="float:right;margin-top:20px">
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { dataMainInterface,interactiveInterface,customInterence } from '@/api/api.js'
export default {
    filters:{
        formatSource(e){
            if(e==1){
                return '小程序'
            }else if(e==2){
                //实际为小程序pc
                return 'PC端'
            }else if(e==3){
                //实际为web pc
                return 'PC端'
            }else{
                return '--'
            }
        }
    },
    data() {
        return {
            sectionOpts:[],//板块选项
            selectSec:'',//选择的板块
            varietyOpts:[],//品种选项
            selectVari:'',//选择的品种
            userOpts:[],//
            selectUser:'',
            keyword:'',
            ClickSort:'',

            tableData:[],
            page_no:1,
            pageSize:15,
            totals:0,

            showDia:false,
            clickTableData:[],
            page_no_click:1,
            pageSizeClick:15,
            totalsClick:0,
            curTitle:'',
            curNum:'',
            curId:0,
        }
    },
    created() {
        this.geTableList()
        this.getUserOpts()
        this.getClassifyList()
        this.getSectionList()
    },
    methods: {
        async geTableList(){
            const res=await dataMainInterface.voicePlayStatistic({
                CurrentIndex: this.page_no,
				PageSize:this.pageSize,
                SectionId:this.selectSec,
                VarietyId:this.selectVari,
                AdminId:this.selectUser,
                Title:this.keyword,
                ClickSort:this.ClickSort
            })
            if(res.Ret!=200) return
            const { List,Paging } = res.Data;

			this.tableData = List || [];
			this.totals = Paging.Totals;
        },

        handleCurrentChange(e){
            this.page_no=e
            this.geTableList()
        },

        handleFilter(){
            this.page_no=1
            this.geTableList()
        },

        sortChangeHandle(item){
            if(item.order=="descending"){
                this.ClickSort=2
            }else if(item.order=="ascending"){
                this.ClickSort=1
            }else{
                this.ClickSort=''
            }
            this.page_no=1
            this.geTableList()
        },


        handleShowDetail(item){
            this.curTitle=item.BroadcastName
            this.curNum=item.VisitCount
            this.curId=item.BroadcastId
            this.clickTableData=[]
            this.page_no_click=1
            this.totalsClick=0
            this.getDetail()
            this.showDia=true
        },

        //获取某个语音播报详情数据
        async getDetail(){
            const res=await dataMainInterface.voicePlayDetailSta({
                CurrentIndex: this.page_no_click,
				PageSize:this.pageSizeClick,
                BroadcastId:Number(this.curId)
            })
            if(res.Ret!=200) return 
            const { List,Paging } = res.Data;

			this.clickTableData = List || [];
			this.totalsClick = Paging.Totals;
        },

        handleClickCurrentChange(e){
            this.page_no_click=e
            this.getDetail()
        },

        //获取语音管理员筛选项
        async getUserOpts(){
            const res=await interactiveInterface.messageManageList({
                RoleTypeCode:'yb_voice_admin',
                PageSize:10000,
                CurrentIndex:1
            })
            if(res.Ret===200){
                this.userOpts=res.Data.List||[]
            }
        },

        //获取品种数据
        async getClassifyList(){
            const res=await customInterence.getvariety({CompanyType:"ficc"})
            if(res.Ret!==200) return 
            this.varietyOpts=res.Data.List||[]
        },

        //获取板块数据
        async getSectionList(){
            const res=await interactiveInterface.voiceList({
                CurrentIndex: this.page_no,
				PageSize:100000
            })
            if(res.Ret!==200) return
            const { List,Paging } = res.Data;

			this.sectionOpts = List || [];
        }

    }
}
</script>

<style lang="scss" scoped>
.voice-play-list-page{
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    padding: 30px 30px 100px 30px;
    min-height: 80vh;
}
.top-filter-wrap{
    margin-bottom: 30px;
}

.click-detail-dia-warp{
    padding-bottom: 100px;
    .title{
        font-size: 14px;
        margin-bottom: 10px;
    }
    .num{
        margin-bottom: 10px;
    }
}
</style>