<template>
    <ele-page flex-table>
        <div class="message-push-container">
            <el-tabs v-model="activeTab">
                <el-tab-pane label="模板管理" name="template">
                    <template-manage ref="templateRef" />
                </el-tab-pane>
                <el-tab-pane label="消息推送" name="push">
                    <message-push ref="pushRef" />
                </el-tab-pane>
            </el-tabs>
        </div>
    </ele-page>
</template>

<script setup>
    import { ref } from 'vue';
    import TemplateManage from './components/template-manage.vue';
    import MessagePush from './components/message-push.vue';

    defineOptions({ name: 'MessagePush' });

    const activeTab = ref('template');
    const templateRef = ref(null);
    const pushRef = ref(null);
</script>

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

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