<!-- 合伙人管理 -->
<template>
    <ele-page flex-table>
        <div class="partner-management">
            <el-tabs
                v-model="activeTab"
                class="partner-tabs"
                @tab-click="handleTabClick"
            >
                <el-tab-pane label="合伙人管理" name="list">
                    <partner-list
                        ref="partnerListRef"
                        v-if="activeTab === 'list'"
                    />
                </el-tab-pane>
                <el-tab-pane label="招募规则设置" name="rule">
                    <partner-rule v-if="activeTab === 'rule'" />
                </el-tab-pane>
                <el-tab-pane label="合伙人推广海报" name="poster">
                    <partner-poster v-if="activeTab === 'poster'" />
                </el-tab-pane>
                <el-tab-pane label="结算设置" name="settlement">
                    <partner-settlement v-if="activeTab === 'settlement'" />
                </el-tab-pane>
            </el-tabs>
        </div>
    </ele-page>
</template>

<script setup>
    import { ref } from 'vue';
    import PartnerList from './components/partner-list.vue';
    import PartnerRule from './components/partner-rule.vue';
    import PartnerPoster from './components/partner-poster.vue';
    import PartnerSettlement from './components/partner-settlement.vue';

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

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

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

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