<template>
    <div class="voice-play-list-page">
        <div>
            <el-table :data="tableData" @sort-change="sortChangeHandle" border style="width: 100%">
                <el-table-column prop="VarietyTagName" label="价格驱动标签" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.ClassifyName != ''">{{ scope.row.ClassifyName }}/{{
                                scope.row.VarietyTagName
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="MainVariable" label="关键变量" align="center" />
                <el-table-column prop="CoreDrivenType" label="多/空" align="center" width="200">
                    <template slot-scope="scope">
                        <span v-if="scope.row.CoreDrivenType === 0">多</span>
                        <span v-else>空</span>
                    </template>
                </el-table-column>
                <el-table-column prop="CoreDrivenContent" label="核心驱动" align="center" width="200" />
                <el-table-column prop="LastModifyTime" label="上次更新时间" align="center" width="200" />
                <el-table-column prop="TotalClickNum" label="累计点击量" width="200" align="center" sortable='custom'>
                    <template slot-scope="scope">
                        <span style="color:#409EFF;cursor: pointer;" @click="handleShowDetail(scope.row, '累计点击量')">{{
                                scope.row.TotalClickNum
                        }}</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-column prop="RecentClickNum" label="最近点击量" width="200" align="center" sortable='custom'>
                    <template slot-scope="scope">
                        <span style="color:#409EFF;cursor: pointer;" @click="handleShowDetail(scope.row, '最近点击量')">{{
                                scope.row.RecentClickNum
                        }}</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-column prop="RecentClickTime" label="最近一次点击时间" align="center" width="200" />
            </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="this.dialogTitle">
            <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">
                        <template slot-scope="scope">
                            <span v-if="scope.row.RealName == ''">--</span>
                            <span v-else>{{ scope.row.RealName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="CompanyName" label="公司名称" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.CompanyName == ''">--</span>
                            <span v-else>{{ scope.row.CompanyName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="CompanyStatus" label="客户状态" align="center" width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.CompanyStatus == ''">--</span>
                            <span v-else>{{ scope.row.CompanyStatus }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="CountNum" label="点击次数" align="center" width="100" />
                    <el-table-column prop="SourceAgent" label="点击来源" align="center" width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.SourceAgent == 1">小程序</span>
                            <span v-else>PC端</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="RecentClickTime" 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 } 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 {
            tableData: [],
            page_no: 1,
            pageSize: 15,
            totals: 0,

            showDia: false,
            clickTableData: [],
            page_no_click: 1,
            pageSizeClick: 15,
            totalsClick: 0,
            curTitle: '',
            curNum: '',
            curId: 0,
            dialogTitle: '点击量详情',
            varietyTagId: 0,
            sortField: 0,
            sortRule: 0,
        }
    },
    created() {
        this.geTableList()
    },
    methods: {
        async geTableList() {
            const res = await dataMainInterface.priceDrivenStatisticsList({
                CurrentIndex: this.page_no,
                PageSize: this.pageSize,
                SortField: this.sortField,
                SortRule: this.sortRule
            })
            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()
        },

        handleShowDetail(item, title) {
            this.dialogTitle = title;
            this.curTitle = item.VarietyTagName
            if (title == '累计点击量') {
                this.curNum = item.TotalClickNum
                this.varietyTagId = item.VarietyTagId;
                this.curId = 0;
            } else {
                this.curNum = item.RecentClickNum
                this.curId = item.PriceDrivenId;
                this.varietyTagId = 0;
            }

            this.clickTableData = []
            this.page_no_click = 1
            this.totalsClick = 0
            this.getDetail()
            this.showDia = true
        },
        //获取某个语音播报详情数据
        async getDetail() {
            const res = await dataMainInterface.priceDrivenStatisticsDetail({
                CurrentIndex: this.page_no_click,
                PageSize: this.pageSizeClick,
                VarietyTagId: Number(this.varietyTagId),
                PriceDrivenId: 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()
        },
        /* 全局排序 */
        sortChangeHandle(item) {
            console.info(item.column.label)
            if (item.column.label === '累计点击量') {
                this.sortField = 1
            } else if (item.column.label === '最近点击量') {
                this.sortField = 2
            }
            if (item.order === 'descending') {
                this.sortRule = 2
            } else {
                this.sortRule = 1
            }
            console.info(item.order);
            this.page_no = 1;
            this.geTableList();
        },
    }
}
</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;
}

.click-detail-dia-warp {
    padding-bottom: 100px;

    .title {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .num {
        margin-bottom: 10px;
    }
}
</style>