<template>
    <div class="default-main">
        <!-- 语言包注入是异步的：把 t() 调用和子组件渲染都延后到注入完成后，避免 intlify Not found -->
        <template v-if="langReady">
            <el-card shadow="never" class="mb-4">
                <template #header>
                    <div class="card-header">{{ t('mall.playxCenter.title') }}</div>
                </template>
                <div class="desc">{{ t('mall.playxCenter.desc') }}</div>
            </el-card>

            <el-tabs v-model="activeName" type="border-card">
                <el-tab-pane :label="t('mall.playxCenter.orders')" name="orders">
                    <PlayxOrderIndex />
                </el-tab-pane>
                <el-tab-pane :label="t('mall.playxCenter.dailyPush')" name="dailyPush">
                    <PlayxDailyPushIndex />
                </el-tab-pane>
                <el-tab-pane :label="t('mall.playxCenter.claimLog')" name="claimLog">
                    <PlayxClaimLogIndex />
                </el-tab-pane>
                <el-tab-pane :label="t('mall.playxCenter.userAsset')" name="userAsset">
                    <PlayxUserAssetIndex />
                </el-tab-pane>
            </el-tabs>
        </template>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import PlayxOrderIndex from '/@/views/backend/mall/playxOrder/index.vue'
import PlayxDailyPushIndex from '/@/views/backend/mall/playxDailyPush/index.vue'
import PlayxClaimLogIndex from '/@/views/backend/mall/playxClaimLog/index.vue'
import PlayxUserAssetIndex from '/@/views/backend/mall/playxUserAsset/index.vue'
import { useConfig } from '/@/stores/config'
import { mergeMessage } from '/@/lang/index'

defineOptions({
    name: 'mall/playxCenter',
})

const { t } = useI18n()
const activeName = ref('orders')
const langReady = ref(false)

/**
 * 由于语言包是按“路由”懒加载的：
 * playxCenter 内部直接渲染了多个子页面组件（订单/推送/领取/资产），
 * 如果对应菜单被禁用，子页面路由可能不会触发语言包加载，导致 t('mall.playx*') 显示为 key。
 * 关键点：子页面组件在首次渲染阶段就会执行 t()。
 * 因此语言包需要在首次渲染前（而不是 onMounted）完成 merge。
 */
async function ensurePlayxCenterLang() {
    const config = useConfig()
    const locale = config.lang.defaultLang
    const prefix = `./backend/${locale}`

    const loadPaths = [
        `${prefix}/mall/playxCenter.ts`,
        `${prefix}/mall/playxOrder.ts`,
        `${prefix}/mall/playxDailyPush.ts`,
        `${prefix}/mall/playxClaimLog.ts`,
        `${prefix}/mall/playxUserAsset.ts`,
    ]

    // 某些场景下 i18n 初始化可能晚于组件创建，这里做一次最小等待。
    // 不会阻塞很久：通常 window.loadLangHandle 会在应用启动阶段就准备好。
    while (!window.loadLangHandle) {
        await new Promise((r) => setTimeout(r, 0))
    }

    const handleMap = window.loadLangHandle
    for (const p of loadPaths) {
        const loader = handleMap[p]
        if (!loader) continue
        const mod = await loader()
        // 与 getLangFileMessage 的命名规则一致：namespace 应为 `mall/playxOrder` 这类路径
        const pathName = p.slice(p.lastIndexOf(prefix) + (prefix.length + 1), p.lastIndexOf('.'))
        mergeMessage(mod?.default ?? {}, pathName)
    }
}

onMounted(async () => {
    await ensurePlayxCenterLang()
    langReady.value = true
})
</script>

<style scoped lang="scss">
.mb-4 {
    margin-bottom: 16px;
}
.card-header {
    font-weight: 600;
}
.desc {
    color: var(--el-text-color-secondary);
}
</style>

