<!-- 分享降价管理 -->
<template>
    <ele-page flex-table>
        <div class="share-discount-management">
            <el-tabs
                v-model="activeTab"
                class="share-discount-tabs"
                @tab-click="handleTabClick"
            >
                <el-tab-pane label="分享降价" name="activity">
                    <activity-list v-if="activeTab === 'activity'" />
                </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">
                    <discount-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 } from 'vue';
    import ActivityList from './activity/index.vue';
    import DataList from './datalist/index.vue';
    import DiscountRules from './rules/index.vue';
    import BookList from './booklist/index.vue';
    import FissionAnalysis from './fission/index.vue';

    defineOptions({ name: 'ShareDiscount' });

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

    // 标签页切换事件
    const handleTabClick = (tab) => {
        localStorage.setItem('shareDiscountActiveTab', tab.props.name);
    };
</script>

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

        .share-discount-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>
