<template>
    <el-alert class="ba-table-alert mall-page-intro" type="info" show-icon :closable="false">
        <template #title>{{ title }}</template>
        <div class="mall-page-intro__desc">{{ desc }}</div>
    </el-alert>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

const props = defineProps<{
    /** 与 mall.pageIntro.<pageKey> 对应，如 dailyPush、userAsset */
    pageKey: string
}>()

const { t } = useI18n()

const title = computed(() => t(`mall.pageIntro.${props.pageKey}.title`))
const desc = computed(() => t(`mall.pageIntro.${props.pageKey}.desc`))
</script>

<style scoped lang="scss">
.mall-page-intro {
    margin-bottom: 12px;
}
.mall-page-intro__desc {
    margin: 0;
    line-height: 1.6;
    color: var(--el-text-color-regular);
    white-space: pre-line;
}
</style>
