<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.RatedCapacity || "-" }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">车牌号:</span>
                        <span>{{ data.LicensePlate || "-" }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">车身颜色:</span>
                        <span>{{
                            bodyColorMapping[data.BodyColor] || "-"
                        }}</span>
                    </div>
                    <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.EngineNumber || "-" }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">燃料种类:</span>
                        <span>{{ data.FuelType || "-" }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800"
                            >是否为营运车辆:</span
                        >
                        <span>{{
                            data.IsOperation === "1" ? "是" : "否"
                        }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800">排放标准:</span>
                        <span>{{ data.EmiStandard || "-" }}</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.LicensePlate || "-" }}</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.VehicleStatus || "-" }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800"
                            >强制报废期止:</span
                        >
                        <span>{{ data.ExpireDate || "-" }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800"
                            >检验有效期止:</span
                        >
                        <span>{{ data.ValidationDate || "-" }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800"
                            >初次登记日期:</span
                        >
                        <span>{{ data.FirstRegDate || "-" }}</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.CommercialPolicyDangerCount.split(":")[1]
                            }}次</span
                        >
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800"
                            >交强险出险次数:</span
                        >
                        <span
                            >{{
                                data.CompulsoryPolicyDangerCount.split(":")[1]
                            }}次</span
                        >
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800"
                            >重大事故标志:</span
                        >
                        <div class="tags">
                            <span
                                v-for="(value, key) in majorAccidents"
                                :key="key"
                                class="tag"
                            >
                                {{ key }}
                            </span>
                        </div>
                    </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.IsHighriskVehicle === "1" ? "是" : "否"
                        }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800"
                            >商业险保单倒计时:</span
                        >
                        <span>{{
                            formatPolicyTime(data.CommercialPolicyTime)
                        }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800"
                            >交强险保单倒计时:</span
                        >
                        <span>{{
                            formatPolicyTime(data.CompulsoryPolicyTime)
                        }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium text-gray-800"
                            >是否投保车损险:</span
                        >
                        <span>{{
                            data.IfCarDamage === "1" ? "是" : "否"
                        }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed } from "vue";
const props = defineProps({
    data: Object,
});
const { data } = props;

// 号牌种类映射
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 formatPolicyTime = (policyTime) => {
    const parts = policyTime.split(":");
    if (parts[0] === "2" || parts[0] === "4") {
        return "当期保单天数小于0";
    }
    if (parts[1] === "null") {
        return "无保单";
    } else {
        return `剩余${parts[0]}天`;
    }
};

// 重大事故出险
const accidentDescriptions = {
    A: "碰撞",
    B: "火自燃",
    C: "水淹",
    D: "盗抢",
};

const majorAccidents = computed(() => {
    const accidents = {};
    data.MajorAccident.split(",").forEach((part) => {
        const [key, value] = part.split(":");
        if (value === "1") {
            const description = accidentDescriptions[key] || key;
            accidents[description] = "是出过";
        }
    });
    return accidents;
});
</script>

<style scoped>
/* 适用tailwindcss的样式 */
.card {
    margin: 8px 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0px 0px 1px #d0d0d0;
}

.tags {
    display: flex;
    flex-wrap: wrap;
}

.tag {
    background-color: #e0e0e0;
    border-radius: 3px;
    padding: 5px 10px;
    margin: 5px;
    font-size: 14px;
}
</style>
