<template>
    <div class="ad-report">

        <el-card class="report-card round-12" shadow="never">
            <div class="flex-between tab-row">
                <div class="flex gap-30">
                    <button v-for="item in platformTabs" :key="item" class="text-tab"
                        :class="{ active: platform === item }" @click="platform = item">
                        {{ item }}
                    </button>
                </div>
                <div class="w-300">
                    <el-date-picker v-model="sForm.range" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" style="width: 100%;" />
                </div>
            </div>
            <div class="mt-16 flex gap-10">
                <el-radio-group v-model="metric" class="mr-10">
                    <el-radio-button v-for="(item, index) in metricTabs" :label="item" :value="item" :key="index" />
                </el-radio-group>
                <el-select v-model="sForm.department" placeholder="请选择部门" style="width: 200px">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-select v-model="sForm.group" placeholder="请选择分组" style="width: 200px">
                    <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-select v-model="sForm.userId" placeholder="请选择账户" style="width: 200px">
                    <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-select v-model="sForm.type" placeholder="请选择分类" style="width: 200px">
                    <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-button @click="reset">重置</el-button>
            </div>
        </el-card>

        <el-card class="report-card round-12 mt-16" shadow="never">
            <div class="flex-between mb-16">
                <el-radio-group v-model="promotion" class="mr-10">
                    <el-radio-button v-for="(item, index) in promotionTabs" :label="item" :value="item" :key="index" />
                </el-radio-group>
                <div class="flex-between gap-16">
                    <div class="toolbar-left">
                        <el-input v-model="sForm.advertiserId" class="w-170" placeholder="请输入广告主ID" clearable />
                        <el-input v-model="sForm.advertiserName" class="w-170" placeholder="请输入广告主名称" clearable />
                        <span class="muted">未绑定数据</span>
                        <el-button link type="primary" @click="openBind">点击前往</el-button>
                        <el-button @click="reset">重置</el-button>
                    </div>
                    <div class="toolbar-right">
                        <el-button @click="exportData">导出</el-button>
                        <el-button class="icon-button" @click="settingVisible = !settingVisible">☷</el-button>
                    </div>
                </div>
            </div>

            <el-alert v-if="settingVisible" class="mb-10" title="已打开字段配置面板" type="info" show-icon :closable="false" />

            <SeTable v-if="metric === '直播间汇总'" :data-list="pagedRows" class="analysis-table" :total="currentTableRows.length" :default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
                <el-table-column fixed prop="room" label="直播间" min-width="200" show-overflow-tooltip />
                <el-table-column prop="owner" label="负责人" width="130" align="center" />
                <el-table-column prop="cost" label="消耗 ↑↓" width="140" align="center">
                    <template #default="{ row }"><span
                            :class="row.highlightCost ? 'color-main font-bold' : 'font-bold'">{{ row.cost
                            }}</span></template>
                </el-table-column>
                <el-table-column prop="roi" label="roi" width="110" align="center">
                    <template #default="{ row }"><span class="color-red font-bold">{{ row.roi }}</span></template>
                </el-table-column>
                <el-table-column prop="amount" label="成交金额" width="150" align="center" />
                <el-table-column prop="coupon" label="智能优惠券" width="150" align="center" />
                <el-table-column prop="conversion" label="转化数" width="120" align="center" />
                <el-table-column prop="rate" label="转化率" width="120" align="center" />
                <el-table-column prop="unitCost" label="转化成本" width="130" align="center" />
                <el-table-column prop="show" label="展示数" width="150" align="center" />
            </SeTable>

            <SeTable v-else-if="metric === '人员数据'" :data-list="pagedRows" class="analysis-table" :total="currentTableRows.length" :default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
                <el-table-column fixed prop="name" label="人员名称" min-width="220">
                    <template #default="{ row }"><span :class="row.link ? 'link-text font-bold' : 'font-bold'">{{
                        row.name }}</span></template>
                </el-table-column>
                <el-table-column prop="accountCount" label="关联账户数" min-width="130" align="center" />
                <el-table-column prop="cost" label="消耗" min-width="140" align="center">
                    <template #default="{ row }"><span
                            :class="row.highlightCost ? 'color-main font-bold' : 'font-bold'">{{ row.cost
                            }}</span></template>
                </el-table-column>
                <el-table-column prop="roi" label="roi" min-width="110" align="center">
                    <template #default="{ row }"><span class="color-red font-bold">{{ row.roi }}</span></template>
                </el-table-column>
                <el-table-column prop="amount" label="成交金额" min-width="150" align="center" />
                <el-table-column prop="coupon" label="智能优惠券" min-width="150" align="center" />
                <el-table-column prop="conversion" label="转化数" min-width="120" align="center" />
                <el-table-column prop="rate" label="转化率" min-width="120" align="center" />
                <el-table-column prop="unitCost" label="转化成本" min-width="130" align="center" />
            </SeTable>

            <SeTable v-else-if="metric === '分类数据'" :data-list="pagedRows" class="analysis-table" :total="currentTableRows.length" :default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
                <el-table-column fixed prop="firstCategory" label="一级分类" min-width="180" />
                <el-table-column prop="secondCategory" label="二级分类" min-width="200" />
                <el-table-column prop="accountCount" label="关联账户数" min-width="130" align="center" />
                <el-table-column prop="cost" label="消耗" min-width="140" align="center">
                    <template #default="{ row }"><span
                            :class="row.highlightCost ? 'color-main font-bold' : 'font-bold'">{{ row.cost
                            }}</span></template>
                </el-table-column>
                <el-table-column prop="roi" label="roi" min-width="110" align="center">
                    <template #default="{ row }"><span class="color-red font-bold">{{ row.roi }}</span></template>
                </el-table-column>
                <el-table-column prop="amount" label="成交金额" min-width="150" align="center" />
                <el-table-column prop="coupon" label="智能优惠券" min-width="150" align="center" />
                <el-table-column prop="conversion" label="转化数" min-width="120" align="center" />
            </SeTable>

            <SeTable v-else :data-list="pagedRows" class="analysis-table" :total="currentTableRows.length" :default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
                <el-table-column fixed prop="account" label="广告账户" min-width="240">
                    <template #default="{ row }">
                        <div class="font-bold">{{ row.account }}</div>
                        <div v-if="row.id" class="fs-12 color-8aa">{{ row.id }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="department" label="部门" min-width="140">
                    <template #default="{ row }"><span :class="row.linkDepartment ? 'link-text' : ''">{{ row.department
                    }}</span></template>
                </el-table-column>
                <el-table-column prop="group" label="分组" min-width="140">
                    <template #default="{ row }"><span :class="row.linkGroup ? 'link-text' : ''">{{ row.group
                    }}</span></template>
                </el-table-column>
                <el-table-column prop="user" label="用户" min-width="120" />
                <el-table-column prop="firstCategory" label="一级分类" min-width="150">
                    <template #default="{ row }"><span :class="row.linkCategory ? 'link-text' : ''">{{ row.firstCategory
                    }}</span></template>
                </el-table-column>
                <el-table-column prop="secondCategory" label="二级分类" min-width="150">
                    <template #default="{ row }"><span :class="row.linkCategory ? 'link-text' : ''">{{
                        row.secondCategory }}</span></template>
                </el-table-column>
                <el-table-column prop="cost" label="消耗 ↑↓" min-width="140" align="center">
                    <template #default="{ row }"><span
                            :class="row.highlightCost ? 'color-main font-bold' : 'font-bold'">{{ row.cost
                            }}</span></template>
                </el-table-column>
                <el-table-column prop="roi" label="roi" min-width="110" align="center">
                    <template #default="{ row }"><span class="color-red font-bold">{{ row.roi }}</span></template>
                </el-table-column>
                <el-table-column prop="amount" label="成交金额" min-width="150" align="center" />
                <el-table-column prop="coupon" label="智能优惠券" min-width="150" align="center" />
            </SeTable>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';

const platform = ref('巨量千川');
const promotion = ref('标准推广');
const metric = ref('直播间汇总');
const settingVisible = ref(false);
const pageData = reactive({
    currentPage: 1,
    pageSize: 50,
    pageSizes: [10, 20, 50, 100],
});
const sForm = ref({
    department: undefined,
    group: undefined,
    userId: undefined,
    type: undefined,
    range: undefined,
    advertiserId: '',
    advertiserName: ''
})

const platformTabs = ['巨量千川', '巨量广告', '巨量本地推', '磁力智投', '磁力金牛', '腾讯ADQ', 'TikTok', '百度营销', '淘宝超级短视频'];
const promotionTabs = ['标准推广', '直播全域推广', '商品全域推广'];
const metricTabs = ['直播间汇总', '人员数据', '分类数据', '广告主明细'];
const options1 = ref([
    { label: 'A部门', value: 1 },
    { label: 'B部门', value: 2 },
    { label: '外部部门', value: 3 },
    { label: '未绑定部门分组', value: 4 },
])
const options2 = ref([
    { label: '核心二组', value: 1 },
    { label: 'B部门', value: 2 },
    { label: '外部部门', value: 3 },
    { label: '未绑定部门分组', value: 4 },
])
const options3 = ref([
    { label: '张伟', value: 1 },
    { label: '瑶光', value: 2 },
    { label: '徐振', value: 3 },
])
const options4 = ref([
    { label: '美妆护肤', value: 1 },
    { label: '3C数码', value: 2 },
])

const liveRoomRows = [
    { room: '总计', owner: '-', cost: '406200.50', roi: '3.58', amount: '¥1,454,649.9', coupon: '¥90,400', conversion: '13,020', rate: '-', unitCost: '-', show: '8,250,000', highlightCost: true },
    { room: '未绑定直播间', owner: '-', cost: '0.00', roi: '0.00', amount: '¥0', coupon: '¥0', conversion: '0', rate: '-', unitCost: '-', show: '0' },
    { room: '直播间-美妆旗舰店爆品 (ID: 89021)', owner: '展展', cost: '185400.50', roi: '3.92', amount: '¥726,769.9', coupon: '¥42,100', conversion: '6,180', rate: '4.85%', unitCost: '30.00', show: '3,820,000' },
    { room: '直播间-3C数码科技专场 (ID: 89035)', owner: '李强', cost: '124000.00', roi: '3.45', amount: '¥427,800', coupon: '¥28,500', conversion: '3,950', rate: '4.12%', unitCost: '31.39', show: '2,450,000' },
    { room: '直播间-服装鞋包新品发布 (ID: 89048)', owner: '王丹', cost: '96800.00', roi: '3.10', amount: '¥300,080', coupon: '¥19,800', conversion: '2,890', rate: '3.80%', unitCost: '33.49', show: '1,980,000' },
];
const peopleRows = [
    { name: '总计', accountCount: '28', cost: '481500.50', roi: '3.62', amount: '¥1,740,760', coupon: '¥102,500', conversion: '15,380', rate: '-', unitCost: '-', highlightCost: true },
    { name: '张伟 (投放主管)', accountCount: '12 个', cost: '215000.00', roi: '3.88', amount: '¥834,200', coupon: '¥48,000', conversion: '6,980', rate: '4.65%', unitCost: '30.80', link: true },
    { name: '李娜 (高级优化师)', accountCount: '8 个', cost: '168000.50', roi: '3.52', amount: '¥591,360', coupon: '¥35,000', conversion: '5,320', rate: '4.30%', unitCost: '31.58', link: true },
    { name: '王磊 (主播运营)', accountCount: '6 个', cost: '98500.00', roi: '3.20', amount: '¥315,200', coupon: '¥19,500', conversion: '3,080', rate: '3.90%', unitCost: '31.98', link: true },
    { name: '未绑定人员账号', accountCount: '2 个', cost: '0.00', roi: '0.00', amount: '¥0', coupon: '¥0', conversion: '0', rate: '-', unitCost: '-', link: true },
];
const categoryRows = [
    { firstCategory: '总计', secondCategory: '-', accountCount: '32', cost: '476000.00', roi: '3.63', amount: '¥1,728,230', coupon: '¥96,500', conversion: '15,020', highlightCost: true },
    { firstCategory: '美妆护肤', secondCategory: '面部精华/霜', accountCount: '15 个', cost: '245000.00', roi: '3.95', amount: '¥967,750', coupon: '¥52,000', conversion: '7,850' },
    { firstCategory: '3C数码', secondCategory: '智能穿戴与耳机', accountCount: '9 个', cost: '142000.00', roi: '3.40', amount: '¥482,800', coupon: '¥28,000', conversion: '4,420' },
    { firstCategory: '个人护理', secondCategory: '身体洗护', accountCount: '6 个', cost: '89000.00', roi: '3.12', amount: '¥277,680', coupon: '¥16,500', conversion: '2,750' },
    { firstCategory: '未绑定分类', secondCategory: '未绑定分类', accountCount: '2 个', cost: '0.00', roi: '0.00', amount: '¥0', coupon: '¥0', conversion: '0' },
];
const advertiserRows = [
    { account: '总计', id: '', department: '-', group: '-', user: '-', firstCategory: '-', secondCategory: '-', cost: '292800.50', roi: '3.55', amount: '¥1,038,165.7', coupon: '¥63,400', highlightCost: true },
    { account: '直播-铃音-牧唐-芜湖1', id: '1787869271614468', department: '未绑定分组..', group: '未绑定分组', user: '-', firstCategory: '未绑定分类..', secondCategory: '未绑定分类', cost: '0.00', roi: '0.00', amount: '¥0', coupon: '¥0', linkDepartment: true, linkGroup: true, linkCategory: true },
    { account: '直播-颜姿2-牧唐-芜湖', id: '1783526642794571', department: '未绑定分组..', group: '未绑定分组', user: '-', firstCategory: '未绑定分类..', secondCategory: '未绑定分类', cost: '0.00', roi: '0.00', amount: '¥0', coupon: '¥0', linkDepartment: true, linkGroup: true, linkCategory: true },
    { account: '千川直通车-美妆03', id: '1792182049182310', department: 'A部门', group: '核心二组', user: '张伟', firstCategory: '美妆护肤', secondCategory: '精华面霜', cost: '142500.00', roi: '3.85', amount: '¥548,625', coupon: '¥31,200', linkDepartment: true, linkGroup: true, linkCategory: true },
    { account: '千川直播号-数码01', id: '1795123019823122', department: 'C部门', group: '管理层组', user: '李娜', firstCategory: '3C数码', secondCategory: '蓝牙耳机', cost: '98200.50', roi: '3.42', amount: '¥335,845.7', coupon: '¥21,000', linkDepartment: true, linkGroup: true, linkCategory: true },
    { account: '巨量信息流-洗护备用', id: '1781203912039102', department: '外部部门', group: '分组一', user: 'zs_test', firstCategory: '个人护理', secondCategory: '洗发护发', cost: '52100.00', roi: '2.95', amount: '¥153,695', coupon: '¥11,200', linkDepartment: true, linkGroup: true, linkCategory: true },
];

const currentTableRows = computed(() => {
    if (metric.value === '人员数据') return peopleRows;
    if (metric.value === '分类数据') return categoryRows;
    if (metric.value === '广告主明细') return advertiserRows;
    return liveRoomRows;
});

const pagedRows = computed(() => {
    const start = (pageData.currentPage - 1) * pageData.pageSize;
    return currentTableRows.value.slice(start, start + pageData.pageSize);
});

const reset = () => {
    sForm.value.department = undefined
    sForm.value.group = undefined
    sForm.value.userId = undefined
    sForm.value.type = undefined
    sForm.value.range = undefined
    sForm.value.advertiserId = ''
    sForm.value.advertiserName = ''
};
const openBind = () => ElMessage.info('跳转到未绑定数据处理页');
const exportData = () => ElMessage.success('已生成导出任务');
const setMetric = (value: string) => {
    metric.value = value;
    pageData.currentPage = 1;
};
const handleTablePageChange = (page: number, size: number) => {
    pageData.currentPage = page;
    pageData.pageSize = size;
};
</script>

<style scoped lang="scss">
.ad-report {
    color: #10233f;
}

.report-card {
    border: 1px solid #dfe7f2;
}

.tab-row {
    border-bottom: 1px solid #edf0f5;
}

.metric-tabs {
    gap: 34px;
}

.text-tab {
    height: 44px;
    padding: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #3f5574;
    cursor: pointer;

    &.small {
        height: 40px;
        font-size: 13px;
    }

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

.toolbar-left,
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.w-150 {
    width: 150px;
}

.w-170 {
    width: 170px;
}

.muted {
    color: #607086;
    font-size: 13px;
}

.icon-button {
    width: 34px;
    padding: 0;
}

.color-main {
    color: rgba(var(--main-color), 1);
}

.color-red {
    color: #ff0055;
}

.scroll-bar {
    height: 5px;
    margin: 10px 0 14px;
    border-radius: 999px;
    background: #dfe7f2;
}

.table-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
}
.analysis-table {
    :deep(.el-table__header th) {
        background: #f5f5f5;
        color: #888;
        padding: 12px 0;
    }
}
</style>
