<template>
    <div class="bgmr vh100 over-y-auto">
        <section class="bg-fff px-20 py-10 analysis-tabs">
            <div class="flex-items-center gap-16">
                <div
                    v-for="item in tabs"
                    :key="item.value"
                    class="px-12 py-8 round-6 font-bold pointer"
                    :class="activeTab === item.value ? 'bg-main color-fff' : 'color-000'"
                    @click="activeTab = item.value"
                >
                    {{ item.label }}
                </div>
            </div>
        </section>
        <div class="p-16">
            <component :is="currentComponent" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import AdPlatformTags from './components/video/AdPlatformTags.vue';
import TagAnalysis from './components/video/TagAnalysis.vue';
import TencentDeliveryReport from './components/video/TencentDeliveryReport.vue';
import DeliveryReport from './components/video/DeliveryReport.vue';

const activeTab = ref('platform');
const tabs = [
    { label: '广告平台标签', value: 'platform', component: AdPlatformTags },
    { label: '标签分析', value: 'tag', component: TagAnalysis },
    { label: '腾讯投放报表', value: 'tencent', component: TencentDeliveryReport },
    { label: '投放报表', value: 'delivery', component: DeliveryReport },
];

const currentComponent = computed(() => tabs.find((item) => item.value === activeTab.value)?.component);
</script>

<style scoped lang="scss">
.analysis-tabs {
    border-bottom: 1px solid #dfe7f2;
}
</style>
