<template>
    <div class="settlement-content">
        <el-tag type="success" effect="light" size="large">{{
            verifyPeriodText
        }}</el-tag>
        <span
            v-if="detail.verifyPeriodDays == 15 && detail.verifyUpMoney != null"
            class="settlement-up-money"
        >
            书款上浮金额：¥{{ detail.verifyUpMoney }}
        </span>
    </div>
</template>

<script setup>
    const VERIFY_PERIOD_MAP = {
        7: '7天极速验货',
        15: '15天安心验货'
    };

    const props = defineProps({
        detail: { type: Object, default: () => ({}) }
    });

    const verifyPeriodText = computed(() => {
        return VERIFY_PERIOD_MAP[props.detail.verifyPeriodDays] || '';
    });
</script>

<style lang="scss" scoped>
    .settlement-content {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .settlement-up-money {
        color: #303133;
    }
</style>
