<template>
    <div class="p-6">
        <el-card class="bg-fff round-12" shadow="hover">
            <div class="flex-items-center gap-34 header-tabs">
                <div v-for="item in topTabs" :key="item" class="pb-16 font-bold pointer"
                    :class="{ active: topTab === item }" @click="topTab = item">
                    {{ item }}
                </div>
            </div>
            <div class="pt-20">
                <div class="flex mb-18 round-4 platform-box">
                    <div v-for="item in platforms" :key="item" class="px-20 py-6 round-4 font-bold pointer"
                        :class="{ active: platform === item }" @click="platform = item">
                        {{ item }}
                    </div>
                </div>
                <div class="flex-items-center">
                    <el-select v-model="category" class="w-240 mr-10" placeholder="请选择分类">
                        <el-option label="全部分类" value="all" />
                        <el-option label="美妆护肤" value="beauty" />
                    </el-select>
                    <el-select v-model="tag" class="w-220 mr-10" placeholder="请选择标签">
                        <el-option label="全部标签" value="all" />
                        <el-option label="主打模特" value="model" />
                    </el-select>
                    <div class="w-300 flex-items-center mr-10">
                        <div class="w-90">上传时间:</div>
                        <el-date-picker v-model="uploadRange" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100% !important;" />
                    </div>
                    <div class="w-300 flex-items-center mr-10">
                        <div class="w-90">消耗时间:</div>
                        <el-date-picker v-model="costRange" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100% !important;" />
                    </div>
                    <el-button type="primary" plain>查询</el-button>
                    <el-button>重置</el-button>
                </div>
            </div>
        </el-card>

        <el-card class="bg-fff round-12 mt-16" shadow="hover">
            <div class="flex-between pb-16 section-title">
                <div class="flex-items-center gap-10">
                    <span class="fs-24 color-main">◔</span>
                    <span class="font-bold fs-16">占比分析</span>
                </div>
                <span class="color-888">数据汇总范围: 2025-10-06 ~ 2025-10-21</span>
            </div>
            <div class="flex minh-400 chart-area">
                <div class="w-400 h-400">
                    <v-chart class="w-full h-full" :option="pieOption" autoresize />
                </div>
                <div class="flex-1 legend-grid gap-10 ml-60 pt-20">
                    <div v-for="item in chartData" :key="item.name" class="px-14 py-12 round-6 flex-between border-eee">
                        <div class="flex-items-center gap-10">
                            <span class="w-12 h-12 round-2" :style="{ backgroundColor: item.color }"></span>
                            <span class="font-bold">{{ item.name }}</span>
                        </div>
                        <div class="text-right">
                            <div class="font-bold">¥{{ item.value.toLocaleString() }}</div>
                            <div class="fs-12 color-888">{{ item.rate }}%</div>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>

        <el-card class="bg-fff round-12 mt-16" shadow="hover">
            <div class="pb-16 flex-between table-title">
                <span class="fs-16 font-bold">详细数据</span>
                <div class="flex-items-center gap-8">
                    <el-button class="round-6">导出</el-button>
                    <el-button class="w-34 h-34 round-6">⌯</el-button>
                </div>
            </div>
            <SeTable :data-list="pagedTableData" class="analysis-table" :total="tableData.length"
                :default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
                <el-table-column prop="name" label="模特姓名 / 标签" width="130" />
                <el-table-column prop="videos" label="视频数量" width="100" align="center" />
                <el-table-column prop="cost" label="消耗" width="130" align="center" />
                <el-table-column prop="roi" label="roi" width="90" align="center" />
                <el-table-column prop="amount" label="成交金额" width="130" align="center" />
                <el-table-column prop="coupon" label="智能优惠券" width="120" align="center" />
                <el-table-column prop="subsidy" label="电商平台补贴金额" width="150" align="center" />
                <el-table-column prop="conversions" label="转化数" width="100" align="center" />
                <el-table-column prop="rate" label="转化率" width="100" align="center" />
                <el-table-column prop="costRate" label="转化成本" width="110" align="center" />
                <el-table-column prop="show" label="展示数" width="120" align="center" />
                <el-table-column prop="avgCost" label="平均千次展现费用" width="150" align="center" />
                <el-table-column prop="click" label="点击数" width="110" align="center" />
                <el-table-column prop="clickRate" label="点击率" width="100" align="center" />
                <el-table-column prop="price" label="平均点击单价" width="130" align="center" />
                <el-table-column prop="play" label="播放量" width="130" align="center" />
                <el-table-column prop="complete" label="3S完播率" width="110" align="center" />
                <el-table-column prop="deal" label="净成交金额" width="140" align="center" />
                <el-table-column prop="orders" label="净成交订单数" width="130" align="center" />
                <el-table-column prop="netRoi" label="净成交ROI" width="110" align="center" />
                <el-table-column prop="unit" label="净成交订单成本" width="140" align="center" />
            </SeTable>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import VChart from 'vue-echarts';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import { GraphicComponent, TooltipComponent } from 'echarts/components';

use([CanvasRenderer, PieChart, TooltipComponent, GraphicComponent]);

const topTab = ref('标签分析');
const platform = ref('抖音');
const category = ref('');
const tag = ref('');
const uploadRange = ref('');
const costRange = ref('');
const pageData = reactive({
    currentPage: 1,
    pageSize: 10,
});
const topTabs = ['标签分析', '潜力 / 当月爆款', '使用数据'];
const platforms = ['抖音', '腾讯', 'TikTok'];
const chartData = [
    { name: '谭明珠（主打模特）', value: 128450.5, rate: 25.3, color: '#5572f6' },
    { name: '林启珊（高ROI）', value: 86200.2, rate: 17.0, color: '#8cc97d' },
    { name: '吴雪妮（痛点对撞）', value: 68300, rate: 13.5, color: '#f6b827' },
    { name: '李银凤（口播种草）', value: 52140.1, rate: 10.3, color: '#f87171' },
    { name: '阮丽琼（情景短剧）', value: 43200, rate: 8.5, color: '#4bb9e9' },
    { name: '马依卓（测评体验）', value: 38100, rate: 7.5, color: '#4bd0a0' },
    { name: '无模特（纯产品）', value: 32000, rate: 6.3, color: '#ff823b' },
    { name: '绿款二创标签', value: 24500, rate: 4.8, color: '#a78bfa' },
    { name: '沉浸拆箱标签', value: 18400, rate: 3.6, color: '#f472b6' },
    { name: '高反差对比', value: 16150.57, rate: 3.2, color: '#60a5fa' },
];
const pieOption = computed(() => ({
    tooltip: { trigger: 'item' },
    series: [{ type: 'pie', radius: ['48%', '82%'], label: { show: false }, data: chartData.map((item) => ({ value: item.value, name: item.name, itemStyle: { color: item.color } })) }],
    graphic: [
        { type: 'text', left: 'center', top: '42%', style: { text: '总消耗金额（元）', fill: '#8492a6', textAlign: 'center', fontSize: 12 } },
        { type: 'text', left: 'center', top: '50%', style: { text: '507441.37', fill: '#0f172a', textAlign: 'center', fontSize: 28, fontWeight: 700 } },
        { type: 'text', left: 'center', top: '61%', style: { text: '多维对比看板', fill: '#7c3aed', textAlign: 'center', fontSize: 12, fontWeight: 700 } },
    ],
}));
const tableData = [
    { name: '总计', videos: 768, cost: '¥507,441.37', roi: '2.85', amount: '¥1,446,202.00', coupon: '¥12,300.00', subsidy: '¥8,200.00', conversions: '16,200', rate: '3.65%', costRate: '¥31.32', show: '9,740,000', avgCost: '¥52.10', click: '355,501', clickRate: '3.65%', price: '¥1.43', play: '8,200,000', complete: '19.2%', deal: '¥1,380,500.00', orders: '15,350', netRoi: '2.72', unit: '¥33.05' },
    { name: '谭明珠', videos: 185, cost: '¥128,450.50', roi: '3.25', amount: '¥417,464.00', coupon: '¥3,850.00', subsidy: '¥2,400.00', conversions: '4,210', rate: '4.12%', costRate: '¥30.50', show: '2,450,000', avgCost: '¥52.42', click: '98,200', clickRate: '4.01%', price: '¥1.31', play: '2,100,000', complete: '22.5%', deal: '¥398,500.00', orders: '4,010', netRoi: '3.10', unit: '¥32.03' },
    { name: '林启珊', videos: 142, cost: '¥86,200.20', roi: '2.98', amount: '¥256,876.00', coupon: '¥2,100.00', subsidy: '¥1,800.00', conversions: '2,840', rate: '3.85%', costRate: '¥30.35', show: '1,680,000', avgCost: '¥51.30', click: '64,680', clickRate: '3.85%', price: '¥1.33', play: '1,420,000', complete: '20.8%', deal: '¥245,200.00', orders: '2,710', netRoi: '2.84', unit: '¥31.80' },
    { name: '吴雪妮', videos: 118, cost: '¥68,300.00', roi: '2.82', amount: '¥192,606.00', coupon: '¥1,650.00', subsidy: '¥1,200.00', conversions: '2,150', rate: '3.62%', costRate: '¥31.76', show: '1,320,000', avgCost: '¥51.74', click: '47,784', clickRate: '3.62%', price: '¥1.43', play: '1,110,000', complete: '19.5%', deal: '¥183,900.00', orders: '2,050', netRoi: '2.69', unit: '¥33.31' },
    { name: '李银凤', videos: 95, cost: '¥52,140.10', roi: '2.75', amount: '¥143,385.00', coupon: '¥1,200.00', subsidy: '¥950.00', conversions: '1,620', rate: '3.45%', costRate: '¥32.18', show: '1,050,000', avgCost: '¥49.65', click: '36,225', clickRate: '3.45%', price: '¥1.44', play: '890,000', complete: '18.2%', deal: '¥136,800.00', orders: '1,540', netRoi: '2.62', unit: '¥33.85' },
];
const pagedTableData = computed(() => {
    const start = (pageData.currentPage - 1) * pageData.pageSize;
    return tableData.slice(start, start + pageData.pageSize);
});
const handleTablePageChange = (page: number, size: number) => {
    pageData.currentPage = page;
    pageData.pageSize = size;
};
</script>

<style scoped lang="scss">
.header-tabs,
.section-title,
.table-title {
    border-bottom: 1px solid #edf0f5;
}

.header-tabs .active {
    color: rgba(var(--main-color), 1);
    border-bottom: 2px solid rgba(var(--main-color), 1);
}

.platform-box {
    width: fit-content;
    border: 1px solid #dfe7f2;
    overflow: hidden;
}

.platform-box .active {
    background: rgba(var(--main-color), 1);
    color: #fff;
}

.legend-grid {
    display: grid;
    grid-template-columns: repeat(2, 300px);
}

.analysis-table {
    :deep(.el-table__header th) {
        background: #f5f5f5;
        color: #888;
        padding: 12px 0;
    }
}
</style>
