<!-- 红包码营销 -->
<template>
    <ele-page flex-table>
        <div class="red-bag-marketing">
            <el-tabs
                v-model="activeTab"
                class="red-bag-tabs"
                @tab-click="handleTabClick"
            >
                <el-tab-pane label="红包码活动" name="activity">
                    <red-bag-activity v-if="activeTab === 'activity'" />
                </el-tab-pane>
                <el-tab-pane label="红包码统计" name="statistics">
                    <red-bag-statistics v-if="activeTab === 'statistics'" />
                </el-tab-pane>
                <el-tab-pane label="红包码规则" name="rule">
                    <red-bag-rule v-if="activeTab === 'rule'" />
                </el-tab-pane>
            </el-tabs>
        </div>
    </ele-page>
</template>

<script setup>
    import { ref } from 'vue';
    import RedBagActivity from './components/red-bag-activity.vue';
    import RedBagStatistics from './components/red-bag-statistics.vue';
    import RedBagRule from './components/red-bag-rule.vue';

    defineOptions({ name: 'RedBagMarketing' });

    // 当前激活的标签页
    const activeTab = ref('activity');

    // 标签页切换事件
    const handleTabClick = (tab) => {
        console.log('当前标签页:', tab.props.name);
    };
</script>

<style lang="scss" scoped>
    .red-bag-marketing {
        padding: 16px;
        height: calc(100% - 10px);
        background-color: #fff;
        box-sizing: border-box;

        .red-bag-tabs {
            :deep(.el-tabs__header) {
                margin-bottom: 0;
            }
        }
    }
</style>
