<template>
    <div class="card">
        <div class="flex flex-col gap-y-4">
            <!-- 标题部分 -->
            <div class="flex items-center justify-between">
                <span class="text-lg font-bold text-gray-800">车辆过户信息</span>
                <van-tag :type="getStatusType" round>{{ getStatusText }}</van-tag>
            </div>

            <!-- 过户次数显示 -->
            <div class="flex items-center justify-center py-6">
                <div class="text-center">
                    <div class="text-5xl font-bold" :class="getTextColorClass">
                        {{ data.status }}
                    </div>
                    <div class="text-gray-500 mt-2">历史过户次数</div>
                </div>
            </div>

            <!-- 风险提示 -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <div class="flex items-start gap-2">
                    <van-icon name="info-o" class="text-blue-500 mt-0.5" />
                    <div class="flex-1">
                        <div class="text-sm text-gray-600">风险提示</div>
                        <div class="text-sm text-gray-500 mt-1">
                            {{ getRiskTip }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- 说明信息 -->
            <div class="text-xs text-gray-400 mt-2">
                注：过户次数仅供参考，建议您在购车时详细了解车辆历史信息
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { Icon as VanIcon, Tag as VanTag } from 'vant';

const props = defineProps({
    data: {
        type: Object,
        required: true,
    },
    params: {
        type: Object,
        required: true,
    },
});

// 根据过户次数返回对应的状态类型
const getStatusType = computed(() => {
    const status = Number(props.data.status);
    if (status === 0) return 'success';
    if (status <= 2) return 'warning';
    return 'danger';
});

// 根据过户次数返回对应的状态文本
const getStatusText = computed(() => {
    const status = Number(props.data.status);
    if (status === 0) return '无过户记录';
    if (status <= 2) return '正常范围';
    return '频繁过户';
});

// 根据过户次数返回对应的文字颜色
const getTextColorClass = computed(() => {
    const status = Number(props.data.status);
    if (status === 0) return 'text-green-500';
    if (status <= 2) return 'text-orange-500';
    return 'text-red-500';
});

// 根据过户次数返回对应的风险提示
const getRiskTip = computed(() => {
    const status = Number(props.data.status);
    if (status === 0) {
        return '该车辆无过户记录，为首任车主，风险较低。';
    } else if (status <= 2) {
        return '该车辆过户次数在正常范围内，建议核实每次过户原因。';
    } else {
        return '该车辆过户频繁，请谨慎考虑并详细了解车况。';
    }
});
</script>