<template>
    <ele-modal
        v-model="visible"
        :title="dialogTitle"
        :width="700"
        :footer="null"
        :close-on-click-modal="false"
    >
        <div class="detail-content" v-loading="loading">
            <el-descriptions :column="2" border>
                <el-descriptions-item label="活动名称">{{
                    detail.couponName || '-'
                }}</el-descriptions-item>
                <el-descriptions-item label="红包类型">
                    {{
                        detail.type === '2' || detail.type === 2
                            ? '惊喜红包'
                            : '普通红包'
                    }}
                </el-descriptions-item>
                <el-descriptions-item label="活动状态">
                    <dict-data
                        code="red_packet_status"
                        :model-value="detail.status"
                        type="tag"
                    />
                </el-descriptions-item>
                <el-descriptions-item label="红包数量"
                    >{{ detail.totalNum || 0 }} 张</el-descriptions-item
                >
                <el-descriptions-item label="红包面额">
                    <template v-if="detail.type === '2' || detail.type === 2">
                        {{ detail.minMoney || 0 }} -
                        {{ detail.maxMoney || 0 }} 元（随机）
                    </template>
                    <template v-else> {{ detail.faceMoney || 0 }} 元 </template>
                </el-descriptions-item>
                <el-descriptions-item label="使用门槛">
                    <template
                        v-if="
                            !detail.thresholdMoney ||
                            detail.thresholdMoney === 0
                        "
                    >
                        无门槛
                    </template>
                    <template v-else>
                        满 {{ detail.thresholdMoney }} 元可用
                    </template>
                </el-descriptions-item>
                <el-descriptions-item label="是否可以叠加使用">
                    {{
                        detail.stackType === '1' || detail.stackType === 1
                            ? '是'
                            : '否'
                    }}
                </el-descriptions-item>
                <el-descriptions-item label="每人限领"
                    >{{ detail.limitedPerUser || 1 }} 张</el-descriptions-item
                >
                <el-descriptions-item label="使用商品">
                    <template
                        v-if="
                            !detail.scope ||
                            detail.scope === '1' ||
                            detail.scope === 1
                        "
                    >
                        所有商品
                    </template>
                    <template v-else> 指定商品 </template>
                </el-descriptions-item>
                <el-descriptions-item label="有效期类型" :span="2">
                    <template
                        v-if="!detail.effectDays || detail.effectDays === 0"
                    >
                        固定日期范围
                    </template>
                    <template v-else>
                        领取后 {{ detail.effectDays }} 天有效
                    </template>
                </el-descriptions-item>
                <el-descriptions-item
                    label="有效期起始时间"
                    v-if="!detail.effectDays || detail.effectDays === 0"
                >
                    {{ detail.effectStartTime || '-' }}
                </el-descriptions-item>
                <el-descriptions-item
                    label="有效期结束时间"
                    v-if="!detail.effectDays || detail.effectDays === 0"
                >
                    {{ detail.effectEndTime || '-' }}
                </el-descriptions-item>
                <el-descriptions-item label="剩余数量"
                    >{{ detail.restNum || 0 }} 张</el-descriptions-item
                >
                <el-descriptions-item
                    label="口令"
                    v-if="detail.type === '2' || detail.type === 2"
                >
                    {{ detail.commandWord || '-' }}
                </el-descriptions-item>
            </el-descriptions>
        </div>
    </ele-modal>
</template>

<script setup>
    import { ref } from 'vue';
    import request from '@/utils/request';

    const visible = ref(false);
    const loading = ref(false);
    const detail = ref({});
    const dialogTitle = ref('红包详情');

    const open = async (id) => {
        visible.value = true;
        loading.value = true;
        detail.value = {};

        try {
            const res = await request.get('/shop/couponInfo/getInfo/' + id);
            if (res.data.code === 200) {
                detail.value = res.data.data || {};
                const typeName =
                    detail.value.type === '2' || detail.value.type === 2
                        ? '惊喜红包'
                        : '普通红包';
                dialogTitle.value = `${typeName}详情`;
            } else {
                console.error('获取红包详情失败:', res.data.msg);
            }
        } catch (error) {
            console.error('获取红包详情失败:', error);
        } finally {
            loading.value = false;
        }
    };

    defineExpose({ open });
</script>

<style scoped>
    .detail-content {
        padding: 10px 0;
    }

    :deep(.el-descriptions__label) {
        width: 140px;
        font-weight: 500;
        background-color: #fafafa;
    }

    :deep(.el-descriptions__content) {
        color: #303133;
    }
</style>
