<template>
    <div class="p-6">
        <div class="bg-fff pt-16 px-16 round-8">
            <div class="flex-items-center gap-34 header-tabs">
                <div v-for="item in platforms" :key="item" class="pb-16 font-bold pointer"
                    :class="{ active: platform === item }" @click="platform = item">{{ item }}</div>
            </div>
        </div>


        <el-card class="round-12 mt-16 filter-card" shadow="hover">
            <div class="flex-between pb-16 sub-tabs">
                <div class="flex-items-center gap-30">
                    <span v-for="item in scopes" :key="item" class="pointer" :class="{ 'color-main': scope === item }"
                        @click="scope = item">{{ item }}</span>
                </div>
                <div class="flex-items-center gap-10">
                    <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="deliveryRange" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100% !important;" />
                    </div>
                </div>
            </div>
            <div class="flex-between my-16">
                <el-radio-group v-model="radioVal" class="mr-10">
                    <el-radio-button label="视频作者" :value="1" />
                    <el-radio-button label="下单运营" :value="2" />
                </el-radio-group>
                <div class="flex">
                    <el-select v-model="department" class="w-180 mr-10" placeholder="请选择团队" />
                    <el-select v-model="category" class="w-180 mr-10" placeholder="请选择分类" />
                    <el-button type="primary" class="w-66" plain>查询</el-button>
                    <el-button>重置</el-button>
                    <el-button>导出数据</el-button>
                    <el-button class="w-34">☷</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="department" label="团队" min-width="160" />
                <el-table-column prop="cost" label="消耗" width="120" align="center" />
                <el-table-column prop="roi" label="roi" width="90" align="center" />
                <el-table-column prop="totalAmount" label="总成交金额" width="130" align="center" />
                <el-table-column prop="amount" label="成交金额" width="130" align="center" />
                <el-table-column prop="coupon" label="智能优惠券" width="130" align="center" />
                <el-table-column prop="conversions" label="转化数" width="110" align="center" />
                <el-table-column prop="rate" label="转化率" width="110" align="center" />
                <el-table-column prop="costRate" label="转化成本" width="110" align="center" />
                <el-table-column prop="show" label="展示数" width="130" align="center" />
                <el-table-column prop="avgCost" label="平均千次展现费用" width="160" align="center" />
                <el-table-column prop="click" label="点击数" width="120" align="center" />
                <el-table-column prop="clickRate" label="点击率" width="110" align="center" />
                <el-table-column prop="avgPrice" label="平均点击单价" width="140" align="center" />
                <el-table-column prop="play" label="播放量" width="130" align="center" />
            </SeTable>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
const platform = ref('巨量广告');
const scope = ref('团队');
const department = ref('');
const category = ref('');
const uploadRange = ref('');
const deliveryRange = ref('');
const radioVal = ref(1)
const pageData = reactive({
    currentPage: 1,
    pageSize: 10,
});
const platforms = ['巨量广告', '巨量千川', '磁力智投', '磁力金牛', '百度营销', '小红书'];
const scopes = ['团队', '分组', '个人', '明细', '分日', '分月'];
const tableData = [
    { department: '总计', cost: '1375201.50', roi: '3.69', totalAmount: '¥5,074,860', amount: '¥4,740,000', coupon: '¥334,860', conversions: '44,240', rate: '4.54%', costRate: '¥31.09', show: '26,040,000', avgCost: '¥52.81', click: '974,510', clickRate: '3.74%', avgPrice: '¥1.41', play: '22,300,000' },
    { department: '项目1-爆款电商', cost: '342100.80', roi: '4.12', totalAmount: '¥1,409,450', amount: '¥1,320,000', coupon: '¥89,450', conversions: '11,400', rate: '5.10%', costRate: '¥30.01', show: '6,450,000', avgCost: '¥53.03', click: '223,500', clickRate: '3.46%', avgPrice: '¥1.53', play: '5,600,000' },
    { department: '达人测试团队', cost: '285400.00', roi: '3.85', totalAmount: '¥1,098,790', amount: '¥1,020,000', coupon: '¥78,790', conversions: '9,240', rate: '4.82%', costRate: '¥30.88', show: '5,120,000', avgCost: '¥55.74', click: '191,980', clickRate: '3.75%', avgPrice: '¥1.48', play: '4,320,000' },
    { department: 'xx素颜霜项目', cost: '220500.00', roi: '3.68', totalAmount: '¥811,440', amount: '¥760,000', coupon: '¥51,440', conversions: '7,350', rate: '4.50%', costRate: '¥30.00', show: '4,100,000', avgCost: '¥53.78', click: '163,330', clickRate: '3.98%', avgPrice: '¥1.35', play: '3,680,000' },
    { department: '小真测试团队', cost: '196200.50', roi: '3.42', totalAmount: '¥671,000', amount: '¥630,000', coupon: '¥41,000', conversions: '6,150', rate: '4.25%', costRate: '¥31.90', show: '3,820,000', avgCost: '¥51.36', click: '144,700', clickRate: '3.78%', avgPrice: '¥1.35', play: '3,100,000' },
    { department: '抖音投放一组', cost: '189000.20', roi: '3.52', totalAmount: '¥665,280', amount: '¥620,000', coupon: '¥45,280', conversions: '5,980', rate: '4.15%', costRate: '¥31.60', show: '3,600,000', avgCost: '¥52.50', click: '144,000', clickRate: '4.00%', avgPrice: '¥1.31', play: '3,150,000' },
];
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">
.filter-card,
.table-card {
    border: 1px solid #dfe7f2;
}

.sub-tabs {
    border-bottom: 1px solid #edf0f5;
}

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

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