<script setup>
import {ref} from "vue"

import { dataMainInterface } from '@/api/api.js'

const tableData=ref([])
const page_no=ref(1)
const pageSize=ref(15)
const totals=ref(0)

const showDia=ref(false)
const clickTableData=ref([])
const page_no_click=ref(1)
const pageSizeClick=ref(15)
const totalsClick=ref(0)
const curTitle=ref('')
const curNum=ref('')
const curId=ref(0)
const dialogTitle=ref('点击量详情')
const varietyTagId=ref(0)
const sortField=ref(0)
const sortRule=ref(0)

const geTableList=async()=>{
    const res = await dataMainInterface.priceDrivenStatisticsList({
        CurrentIndex: page_no.value,
        PageSize: pageSize.value,
        SortField: sortField.value,
        SortRule: sortRule.value
    })
    if (res.Ret != 200) return
    const { List, Paging } = res.Data;

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

const handleCurrentChange=(e)=>{
    page_no.value = e
    geTableList()
}

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

    clickTableData.value = []
    page_no_click.value = 1
    totalsClick.value = 0
    getDetail()
    showDia.value = true
}
//获取某个语音播报详情数据
const getDetail= async()=>{
    const res = await dataMainInterface.priceDrivenStatisticsDetail({
        CurrentIndex: page_no_click.value,
        PageSize: pageSizeClick.value,
        VarietyTagId: Number(varietyTagId.value),
        PriceDrivenId: Number(curId.value),
    })
    if (res.Ret != 200) return
    const { List, Paging } = res.Data;

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

const handleClickCurrentChange=(e)=>{
    page_no_click.value = e
    getDetail()
}
/* 全局排序 */
const sortChangeHandle=(item)=>{
    console.info(item.column.label)
    if (item.column.label === '累计点击量') {
        sortField.value = 1
    } else if (item.column.label === '最近点击量') {
        sortField.value = 2
    }
    if (item.order === 'descending') {
        sortRule.value = 2
    } else {
        sortRule.value = 1
    }
    console.info(item.order);
    page_no.value = 1;
    geTableList();
}


geTableList()

</script>

<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 #default="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 #default="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 #default="scope">
                        <span style="color:#409EFF;cursor: pointer;" @click="handleShowDetail(scope.row, '累计点击量')">{{
                                scope.row.TotalClickNum
                        }}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="RecentClickNum" label="最近点击量" width="200" align="center" sortable='custom'>
                    <template #default="scope">
                        <span style="color:#409EFF;cursor: pointer;" @click="handleShowDetail(scope.row, '最近点击量')">{{
                                scope.row.RecentClickNum
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="RecentClickTime" label="最近一次点击时间" align="center" width="200" />
                <template #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 v-model="showDia" :close-on-click-modal="false" :modal-append-to-body='false'
            class="dialog" center width="900px" v-dialogDrag :title="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 #default="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 #default="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 #default="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 #default="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 #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>

<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>