<template>
    <div class="flex flex-col items-center card">
        <div class="max-w-4xl w-full space-y-6">

            <!-- 基本信息 -->
            <div>
                <LTitle title="基本信息" type="blue-green" class="mb-4"></LTitle>

                <div class="grid grid-cols-1 gap-4">
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">号牌种类:</span>
                        <span>{{ plateTypeMapping[data.plateType] }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">核定载客数:</span>
                        <span>{{ data.passengers }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">车牌号:</span>
                        <span>{{ data.plate }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">车架号:</span>
                        <span>{{ data.vin }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">使用性质:</span>
                        <span>{{ data.properties }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">车辆类型:</span>
                        <span>{{ data.vehicleType }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">品牌名称:</span>
                        <span>{{ data.brandName }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">车身颜色:</span>
                        <span>{{ filterDataNull(bodyColorMapping[data.bodyColor]) }}</span>
                    </div>
                </div>
            </div>

            <!-- 一致性核验 -->
            <div>
                <LTitle title="一致性核验" type="blue-green" class="mb-4"></LTitle>

                <div class="grid grid-cols-1 gap-4">
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">车牌种类一致性:</span>
                        <span>{{ data.carType }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">车牌号一致性:</span>
                        <span>{{ data.carNumber }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">姓名一致性:</span>
                        <span>{{ data.name }}</span>
                    </div>
                </div>
            </div>

            <!-- 发动机信息 -->
            <div>
                <LTitle title="发动机信息" type="blue-green" class="mb-4"></LTitle>
                <div class="grid grid-cols-1 gap-4">
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">发动机型号:</span>
                        <span>{{ data.engineModel }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">发动机号:</span>
                        <span>{{ data.engineNumber }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">排量:</span>
                        <span>{{ data.cc }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">燃料种类:</span>
                        <span>{{ data.fuelType }}</span>
                    </div>
                </div>
            </div>

            <!-- 车辆状态 -->
            <div>
                <LTitle title="车辆状态" type="blue-green" class="mb-4"></LTitle>
                <div class="grid grid-cols-1 gap-4">
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">机动车状态:</span>
                        <span>{{ data.vehicleStatus }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">强制报废期止:</span>
                        <span>{{ filterDataNull(data.retirementDate) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">检验有效期止:</span>
                        <span>{{ filterDataNull(data.validityDayEnd) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">初次登记日期:</span>
                        <span>{{ filterDataNull(data.firstIssueDate) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">年检日期:</span>
                        <span>{{ filterDataNull(data.jianCheTime) }}</span>
                    </div>
                </div>
            </div>
            <!-- 尺寸及重量 -->
            <div>
                <LTitle title="车辆尺寸及重量" type="blue-green" class="mb-4"></LTitle>
                <div class="grid grid-cols-1 gap-4">
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">总质量:</span>
                        <span>{{ filterDataNull(data.crossWeight) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">整备质量:</span>
                        <span>{{ filterDataNull(data.curbWeight) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">轴数:</span>
                        <span>{{ filterDataNull(data.shaft) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">轴距:</span>
                        <span>{{ filterDataNull(data.wheelBase) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">前轮距:</span>
                        <span>{{ filterDataNull(data.frontTread) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">后轮距:</span>
                        <span>{{ filterDataNull(data.rearTread) }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

// 号牌种类映射
const plateTypeMapping = {
    "02": "小型汽车",
    "01": "大型汽车",
    "03": "使馆汽车",
    "04": "领馆汽车",
    "05": "境外汽车",
    "06": "外籍汽车",
    "07": "普通摩托车",
    "08": "轻便摩托车",
    "09": "使馆摩托车",
    "10": "领馆摩托车",
    "11": "境外摩托车",
    "12": "外籍摩托车",
    "13": "低速车",
    "14": "拖拉机",
    "15": "挂车",
    "16": "教练汽车",
    "17": "教练摩托车",
    "20": "临时入境汽车",
    "21": "临时入境摩托车",
    "22": "临时行驶车",
    "23": "警用汽车",
    "24": "警用摩托",
    "51": "新能源大型汽车",
    "52": "新能源小型汽车"
};

// 车身颜色映射
const bodyColorMapping = {
    "A": "白",
    "B": "灰",
    "C": "黄",
    "D": "粉",
    "E": "红",
    "F": "紫",
    "G": "绿",
    "H": "蓝",
    "I": "棕",
    "J": "黑",
    "K": "香槟",
    "L": "银",
    "M": "橙",
    "N": "金",
    "Z": "其他"
};

// 对请求参数中的姓名进行脱敏
const maskValue = (value, type) => {
    if (type === "name") {
        return value.length > 1 ? value[0] + "*".repeat(value.length - 1) : "*";
    } else if (type === "car_license") {
        return value.slice(0, 2) + "*".repeat(value.length - 2) + value.slice(-2);
    }
    return value;
};
const filterDataNull = (data) => {
    return data ? data : '-'
}

</script>

<style scoped></style>