<template>
    <div class="p-6">
        <el-card class="bg-fff round-12" shadow="hover">
            <div class="flex-items-center gap-34 filter-header">
                <div v-for="item in platformTabs" :key="item.value"
                    class="pb-18 flex-items-center gap-10 pointer platform-tab"
                    :class="{ active: platform === item.value }" @click="platform = item.value">
                    <span class="w-24 h-24 round-6 flex-center platform-icon">{{ item.icon }}</span>
                    <span class="fs-16 font-bold">{{ item.label }}</span>
                </div>
            </div>
            <div class="pt-20">
                <div class="flex-items-center mb-18">
                    <el-button v-for="item in scopes" :key="item" :type="scope === item ? 'primary' : ''"
                        @click="scope = item">
                        {{ item }}
                    </el-button>
                </div>
                <div class="flex-items-center">
                    <el-select v-model="category" class="w-140" placeholder="请选择分类">
                        <el-option label="全部分类" value="all" />
                        <el-option label="服饰鞋包" value="clothes" />
                    </el-select>
                    <div class="w-400 mx-10 flex-items-center">
                        <div class="minw-70 color-888">消耗时间：</div>
                        <el-date-picker v-model="dateRange" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100% !important;" />
                    </div>
                    <el-button type="primary" @click="query">查询</el-button>
                    <el-button @click="reset">重置</el-button>
                </div>
            </div>
        </el-card>

        <el-card class="bg-fff round-12 mt-16" shadow="hover">
            <div class="pb-16 flex-between ratio-title">
                <span class="fs-16 font-bold color-000">占比分析</span>
                <el-button type="primary" link @click="collapsed = !collapsed">{{ collapsed ? '展开' : '收起'
                    }}</el-button>
            </div>
            <div v-show="!collapsed" class="p-20 flex gap-26">
                <div class="flex-1 gap-14 card-grid">
                    <div v-for="item in ratioList" :key="item.name" class="p-18 round-6 flex-between metric-card">
                        <div class="flex-items-center w-full">
                            <span class="w-42 h-42 round-8 flex-center fs-20"
                                :style="{ color: item.color, backgroundColor: item.bg }">
                                {{ item.icon }}
                            </span>
                            <div class="ml-16 flex-1">
                                <div class="font-bold color-000">{{ item.name }}</div>
                                <div class="flex flex-between mt-10">
                                    <div>
                                        <div>数量: <span class="font-bold">{{ item.count.toLocaleString()
                                                }}</span>
                                        </div>
                                        <div>消耗: <span class="font-bold">¥{{ item.cost.toLocaleString()
                                                }}</span>
                                        </div>
                                    </div>
                                    <div class="lh-24">
                                        <div>数量占比: <span class="font-bold">{{ item.countRate }}%</span></div>
                                        <div>消耗占比: <span class="font-bold">{{ item.costRate }}%</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex-1 minw-400 flex-items-center justify-center chart-panel">
                    <div class="w-240 h-240">
                        <v-chart class="w-full h-full" :option="pieOption" autoresize />
                    </div>
                    <div class="ml-40 flex-1">
                        <div v-for="item in ratioList" :key="item.name" class="flex-between mb-18">
                            <div class="flex-items-center gap-10">
                                <span class="w-10 h-10 round-2" :style="{ backgroundColor: item.color }"></span>
                                <span>{{ item.name }}</span>
                            </div>
                            <span class="fs-12 color-666">{{ item.count }} ({{ item.countRate }}%)</span>
                        </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">
                <div class="flex-items-center gap-8">
                    <span class="fs-16 font-bold color-000">详细数据</span>
                    <span class="color-888">⊙</span>
                </div>
                <el-button class="round-6" @click="query">⇩ 导出表格</el-button>
            </div>
            <SeTable :data-list="pagedTableData" class="analysis-table" :total="tableData.length"
                :default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
                <el-table-column prop="account" label="广告账户" min-width="210" show-overflow-tooltip />
                <el-table-column prop="subject" label="主体" min-width="180" show-overflow-tooltip />
                <el-table-column prop="department" label="团队" width="130" />
                <el-table-column prop="group" label="分组" width="120" />
                <el-table-column prop="user" label="用户" width="100" />
                <el-table-column prop="category1" label="一级分类" width="110" />
                <el-table-column prop="category2" label="二级分类" width="110" />
                <el-table-column prop="total" label="总素材数" width="110" align="center" />
                <el-table-column prop="first" label="首发素材" width="120" align="center">
                    <template #default="{ row }">
                        <MetricText :value="row.first" sub="28.5%" />
                    </template>
                </el-table-column>
                <el-table-column prop="firstCost" label="首发素材消耗" width="140" align="center" />
                <el-table-column prop="good" label="优质素材" width="110" align="center">
                    <template #default="{ row }"><span class="font-bold color-green">{{ row.good }}</span></template>
                </el-table-column>
                <el-table-column prop="goodCost" label="优质素材消耗" width="140" align="center">
                    <template #default="{ row }"><span class="font-bold color-green">{{ row.goodCost
                            }}</span></template>
                </el-table-column>
                <el-table-column prop="low" label="低效素材" width="110" align="center">
                    <template #default="{ row }"><span class="font-bold color-main">{{ row.low }}</span></template>
                </el-table-column>
                <el-table-column prop="bad" label="低质素材" width="110" align="center">
                    <template #default="{ row }"><span class="font-bold color-orange">{{ row.bad }}</span></template>
                </el-table-column>
                <el-table-column prop="same" label="同质化挤压严重素材" width="160" align="center">
                    <template #default="{ row }"><span class="font-bold color-pink">{{ row.same }}</span></template>
                </el-table-column>
                <el-table-column prop="risk" label="同质化素材风险-排队投放素材" width="230" align="center">
                    <template #default="{ row }"><span class="font-bold color-green">{{ row.risk }}</span></template>
                </el-table-column>
            </SeTable>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { computed, defineComponent, h, 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, LegendComponent, TooltipComponent } from 'echarts/components';
import { ElMessage } from 'element-plus';

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

const MetricText = defineComponent({
    props: { value: [Number, String], sub: String },
    setup(props) {
        return () => h('div', [h('div', { class: 'font-bold color-000' }, String(props.value)), h('div', { class: 'fs-12 color-888' }, props.sub)]);
    },
});

const platform = ref('qianchuan');
const scope = ref('汇总');
const category = ref('');
const dateRange = ref('');
const collapsed = ref(false);
const pageData = reactive({
    currentPage: 1,
    pageSize: 10,
});
const platformTabs = [
    { label: '巨量千川', value: 'qianchuan', icon: 'Ⅲ' },
    { label: '巨量广告', value: 'ad', icon: '⊘' },
];
const scopes = ['汇总', '团队', '分组', '个人', '广告账户'];
const ratioList = [
    { name: '首发素材', count: 1280, cost: 342800, countRate: 28.5, costRate: 32.4, color: '#5046e5', bg: '#f0efff', icon: '⌘' },
    { name: '优质素材', count: 860, cost: 415200, countRate: 19.1, costRate: 39.2, color: '#ef3d3d', bg: '#fff0f0', icon: '♙' },
    { name: '低效素材', count: 940, cost: 182500, countRate: 20.9, costRate: 17.2, color: '#8656ee', bg: '#f5efff', icon: '!' },
    { name: '低质素材', count: 520, cost: 68100, countRate: 11.6, costRate: 6.4, color: '#f59e0b', bg: '#fff7e8', icon: '△' },
    { name: '同质化挤压严重素材', count: 480, cost: 32400, countRate: 10.7, costRate: 3.1, color: '#ec4899', bg: '#fff0f8', icon: '▱' },
    { name: '同质化素材风险-排队投放素材', count: 410, cost: 17900, countRate: 9.2, costRate: 1.7, color: '#10b981', bg: '#ecfdf5', icon: '♢' },
];
const tableData = [
    { account: '总计', subject: '--', department: '--', group: '--', user: '--', category1: '--', category2: '--', total: '4,490', first: '1,280', firstCost: '¥342,800', good: 860, goodCost: '¥415,200', low: 940, bad: 520, same: 480, risk: 410 },
    { account: '广州千川官方号-01 (8821941)', subject: '广州某某网络科技有限公司', department: '华南电商一队', group: '直播二组', user: '张伟', category1: '服饰鞋包', category2: '女装短袖', total: 1250, first: 380, firstCost: '¥112,000', good: 240, goodCost: '¥145,000', low: 280, bad: 150, same: 120, risk: 80 },
    { account: '杭州巨量千川-旗舰02 (9120482)', subject: '杭州电商服务有限公司', department: '华东数码二队', group: '信息流一组', user: '李娜', category1: '3C数码', category2: '智能耳机', total: 980, first: 290, firstCost: '¥89,500', good: 195, goodCost: '¥118,200', low: 210, bad: 115, same: 95, risk: 75 },
    { account: '上海巨量广告-品牌01 (7739102)', subject: '上海传媒网络科技公司', department: '华东美妆一队', group: '品牌推广组', user: '王强', category1: '美妆护肤', category2: '精华面霜', total: 1120, first: 310, firstCost: '¥95,000', good: 220, goodCost: '¥102,000', low: 245, bad: 135, same: 110, risk: 100 },
    { account: '北京千川测试户-05 (6652011)', subject: '北京互联网有限公司', department: '华北综合队', group: '效果提升组', user: '刘洋', category1: '食品饮料', category2: '休闲零食', total: 640, first: 180, firstCost: '¥32,300', good: 125, goodCost: '¥38,000', low: 135, bad: 80, same: 75, risk: 45 },
];
const pagedTableData = computed(() => {
    const start = (pageData.currentPage - 1) * pageData.pageSize;
    return tableData.slice(start, start + pageData.pageSize);
});
const pieOption = computed(() => ({
    tooltip: { trigger: 'item' },
    legend: { show: false },
    series: [{
        type: 'pie',
        radius: ['42%', '78%'],
        label: { show: false },
        data: ratioList.map((item) => ({ name: item.name, value: item.count, itemStyle: { color: item.color } })),
    }],
    graphic: [
        { type: 'text', left: 'center', top: '42%', style: { text: '总素材数', textAlign: 'center', fill: '#6b7c93', fontSize: 12 } },
        { type: 'text', left: 'center', top: '51%', style: { text: '4,490', textAlign: 'center', fill: '#0f172a', fontSize: 20, fontWeight: 700 } },
        { type: 'text', left: 'center', top: '63%', style: { text: '六维类型', textAlign: 'center', fill: '#6b7c93', fontSize: 12 } },
    ],
}));
const query = () => ElMessage.success('查询完成');
const reset = () => {
    category.value = '';
    dateRange.value = '';
};
const handleTablePageChange = (page: number, size: number) => {
    pageData.currentPage = page;
    pageData.pageSize = size;
};
</script>

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

.platform-tab {
    color: #607086;

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

.platform-icon,
.work-tag {
    background-color: rgba(var(--main-color), .08);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
}

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

.color-green {
    color: #00a86b;
}

.color-orange {
    color: #f59e0b;
}

.color-pink {
    color: #ec4899;
}
</style>
