<template>
    <ele-modal
        v-model="visible"
        title="红包数据"
        width="1280px"
        :footer="null"
        custom-class="red-packet-data-dialog"
        top="4vh"
    >
        <el-tabs v-model="activeTab">
            <el-tab-pane label="模板数据" name="template">
                <TemplateData v-if="visible && activeTab === 'template'" />
            </el-tab-pane>
            <el-tab-pane label="领取查询" name="collection">
                <CollectionQuery v-if="visible && activeTab === 'collection'" />
            </el-tab-pane>
        </el-tabs>
    </ele-modal>
</template>

<script setup>
    import { ref, computed } from 'vue';
    import TemplateData from './TemplateData.vue';
    import CollectionQuery from './CollectionQuery.vue';

    const visible = ref(false);
    const redPacketId = ref('');

    const activeTab = ref('template');

    const open = (id) => {
        redPacketId.value = id;
        visible.value = true;
    };

    defineExpose({ open });
</script>

<style scoped>
    :deep(.red-packet-data-dialog .el-dialog__header) {
        display: none;
        /* Hide default header if we want tabs at the very top, but EleModal usually has a header. */
        /* If we want tabs inside the modal body, we can keep the header or set title to empty string */
    }

    /* Adjustments to make tabs look like the screenshot */
    :deep(.el-tabs__nav-wrap::after) {
        height: 1px;
    }

    :deep(.el-tabs__item) {
        font-size: 16px;
        height: 50px;
        line-height: 50px;
    }
</style>
