<!-- DetailItem.vue -->
<template>
    <div class="detail-item">
        <div class="item-label">{{ label }}</div>
        <div class="item-value">
            <slot>
                <span v-if="value !== null && value !== undefined && value !== ''">
                    {{ value }}{{ suffix }}
                </span>
                <span v-else class="empty-text">--</span>
            </slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DetailItem',
    props: {
        label: {
            type: String,
            required: true
        },
        value: {
            type: [String, Number, Boolean],
            default: ''
        },
        suffix: {
            type: String,
            default: ''
        }
    }
}
</script>

<style scoped lang="scss">
.detail-item {
    margin-bottom: 16px;

    .item-label {
        color: #424242;
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 8px;
    }

    .item-value {
        color: #424242;
        font-size: 16px;
        line-height: 1.5;

        .empty-text {
            color: #909399;
            font-style: italic;
        }
    }
}
</style>