<!-- 加价营销管理 -->
<template>
    <ele-page flex-table>
        <div class="ip-markup-management">
            <el-tabs
                v-model="activeTab"
                class="ip-markup-tabs"
                @tab-click="handleTabClick"
            >
                <el-tab-pane label="IP加价营销" name="ipMarkup">
                    <ip-activity v-if="activeTab === 'ipMarkup'" />
                </el-tab-pane>
                <el-tab-pane label="加价营销数据" name="datalist">
                    <data-list
                        ref="dataListRef"
                        v-if="activeTab === 'datalist'"
                    />
                </el-tab-pane>
                <el-tab-pane label="加价营销规则" name="rules">
                    <markup-rules v-if="activeTab === 'rules'" />
                </el-tab-pane>
                <el-tab-pane label="加价营销书单" name="booklist">
                    <book-list v-if="activeTab === 'booklist'" />
                </el-tab-pane>
                <el-tab-pane label="裂变分析" name="fission">
                    <fission-analysis v-if="activeTab === 'fission'" />
                </el-tab-pane>
            </el-tabs>
        </div>
    </ele-page>
</template>

<script setup>
    import { ref, onMounted } from 'vue';
    import DataList from './datalist/index.vue';
    import MarkupRules from './rules/index.vue';
    import BookList from './booklist/index.vue';
    import FissionAnalysis from './fission/index.vue';
    import IpActivity from './ipActivity/index.vue';

    // 当前激活的标签页
    const activeTab = ref(
        localStorage.getItem('ipMarkupActiveTab') || 'ipMarkup'
    );
    const dataListRef = ref(null);

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

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

        .ip-markup-tabs {
            margin: 16px;
            height: calc(100vh - 110px);
            overflow: hidden;
            .el-tab-pane {
                height: 100%;
                display: flex;
                flex-direction: column;
                overflow: auto;
            }
            :deep(.el-tabs__header) {
                margin-bottom: 0;
            }
        }
    }
</style>
