<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 Tab1 from './components/AD/Tab1.vue';
import Tab2 from './components/AD/Tab2.vue';
import Tab3 from './components/AD/Tab3.vue';
import Tab4 from './components/AD/Tab4.vue';

const activeTab = ref('tab1');
const tabs = [
    { label: '广告账户数据', value: 'tab1', component: Tab1 },
    { label: '广告账户财务报表', value: 'tab2', component: Tab2 },
    { label: '投放状态报表', value: 'tab3', component: Tab3 },
    { label: 'TikTok店铺', value: 'tab4', component: Tab4 },
];

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

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