<template>
    <view class="car-info-wrap">
        <view class="car-info">
            <view class="car-title">车辆估值</view>
            <!-- 若数据为空，显示“未估值” -->
            <view class="car-num">{{ formattedAssessment }}</view>
        </view>
    </view>
</template>

<script setup>
import { defineProps, computed } from "vue";

// 接收父组件传递的`data`对象
const props = defineProps({
    data: Object,
});

// 计算属性用于处理估值显示，防止数据为空时的异常
const formattedAssessment = computed(() => {
    // 如果没有估值数据，则显示"未估值"
    return props.data?.assessment ? `${props.data.assessment}元` : "未估值";
});
</script>

<style scoped>
.car-info-wrap {
    width: 100vw;
}

.car-info {
    margin: 8px 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0px 0px 1px #d0d0d0;
    text-align: center;
}

.car-num {
    font-size: 38px;
    color: green;
    font-weight: bold;
}

.car-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}
</style>
