<template>
    <div class="p-6">
        <el-card class="bg-fff round-12 mt-10" shadow="hover">
            <div class="flex-items-center gap-30 header-tabs">
                <div v-for="item in dataTabs" :key="item" class="pb-16 font-bold pointer"
                    :class="{ active: dataTab === item }" @click="dataTab = item">{{ item }}</div>
            </div>
            <div class="pt-16">
                <div class="flex-between">
                    <div class="flex">
                        <el-radio-group v-model="radioVal" class="mr-10">
                            <el-radio-button label="汇总" :value="1" />
                            <el-radio-button label="明细" :value="2" />
                        </el-radio-group>
                        <el-select v-model="department" class="w-180 mr-10" placeholder="请选择团队"><el-option label="默认团队"
                                value="默认团队" /></el-select>
                        <el-select v-model="group" class="w-180 mr-10" placeholder="请选择"><el-option label="华南电商一队"
                                value="华南电商一队" /></el-select>

                        <el-button type="primary" plain>查询</el-button>
                        <el-button>重置</el-button>
                    </div>
                    <div class="w-240">
                        <el-date-picker v-model="range" type="daterange" range-separator="至" start-placeholder="开始时间"
                            end-placeholder="结束时间" style="width: 100% !important;" />
                    </div>
                </div>

            </div>
        </el-card>

        <el-card class="bg-fff round-12 mt-16" shadow="hover">
            <div class="pb-12 flex-between table-title">
                <span class="fs-16 font-bold">汇总数据</span>
                <el-button type="default" plain>导出数据</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="department" label="团队" min-width="180" />
                <el-table-column prop="cost" label="消耗" align="center" />
                <el-table-column prop="conversions" label="转化数" align="center" />
                <el-table-column prop="rate" label="转化率" align="center" />
                <el-table-column prop="costRate" label="转化成本" align="center" />
                <el-table-column prop="show" label="展示数" align="center" />
                <el-table-column prop="click" label="点击数" align="center" />
                <el-table-column prop="clickRate" label="点击率" align="center" />
                <el-table-column prop="avgPrice" label="平均点击单价" align="center" />
                <el-table-column prop="play" label="播放量" align="center" />
                <el-table-column prop="complete" label="3S完播率" align="center" />
            </SeTable>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
const dataTab = ref('团队数据');
const department = ref('');
const group = ref('');
const range = ref('');
const radioVal = ref(1)
const pageData = reactive({
    currentPage: 1,
    pageSize: 10,
});
const dataTabs = ['团队数据', '分组数据', '个人数据'];
const tableData = [
    { department: '总计', cost: '361051.50', conversions: '11,550', rate: '4.27%', costRate: '¥31.26', show: '6,880,000', click: '270,530', clickRate: '3.93%', avgPrice: '1.33', play: '5,860,000', complete: '20.6%' },
    { department: '默认团队', cost: '128450.50', conversions: '4,210', rate: '4.12%', costRate: '¥30.50', show: '2,450,000', click: '98,200', clickRate: '4.01%', avgPrice: '1.31', play: '2,100,000', complete: '22.5%' },
    { department: '华南电商一队', cost: '96200.80', conversions: '3,120', rate: '3.95%', costRate: '¥30.83', show: '1,820,000', click: '74,620', clickRate: '4.10%', avgPrice: '1.29', play: '1,560,000', complete: '21.2%' },
    { department: '华东投放二队', cost: '84300.00', conversions: '2,680', rate: '3.78%', costRate: '¥31.45', show: '1,590,000', click: '62,010', clickRate: '3.90%', avgPrice: '1.36', play: '1,320,000', complete: '20.4%' },
    { department: '海外品牌推广组', cost: '52100.20', conversions: '1,540', rate: '3.45%', costRate: '¥33.83', show: '1,020,000', click: '35,700', clickRate: '3.50%', avgPrice: '1.46', play: '880,000', complete: '18.5%' },
];
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,
.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);
}

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