<script setup>
import { computed } from 'vue'
import { plateColorLabel, vehicleTypeLabel } from '@/utils/vehicleReportBlockMaps'
import { useVehiclePayload } from '@/composables/useVehiclePayload'

const props = defineProps({
  data: Object,
  params: Object,
  apiId: { type: String, default: '' },
  index: { type: Number, default: 0 },
  notifyRiskStatus: { type: Function, default: () => {} },
  title: { type: String, default: '个人名下车辆' },
})

const { obj } = useVehiclePayload(props)

const vehicleCount = computed(() => {
  const n = obj.value.vehicleCount ?? obj.value.carNum
  if (n === '' || n == null)
    return null
  const num = Number(n)
  return Number.isFinite(num) ? num : null
})

const vehicleList = computed(() => {
  const list = obj.value.list
  return Array.isArray(list) ? list : []
})
</script>

<template>
  <div class="card bg-white rounded-lg shadow-sm border border-gray-200 p-4">
    <div class="flex justify-between items-center mb-4 pb-4 border-b border-gray-100">
      <div class="text-lg font-semibold text-gray-900">{{ title }}</div>
      <div class="bg-blue-50 text-blue-700 px-4 py-2 rounded-full text-sm font-medium">
        共 {{ vehicleCount != null ? vehicleCount : '—' }} 辆
      </div>
    </div>

    <div v-if="vehicleList.length" class="space-y-3">
      <div
        v-for="(vehicle, index) in vehicleList"
        :key="index"
        class="bg-gray-50 rounded-lg p-4 border border-gray-200"
      >
        <div class="text-xl font-bold text-gray-900 font-mono tracking-wider">
          {{ vehicle.plateNum ?? '—' }}
        </div>
        <div class="flex items-center gap-3 mt-2 flex-wrap">
          <span class="inline-flex items-center px-3 py-1 rounded text-sm font-medium text-white bg-blue-500">
            {{ plateColorLabel(vehicle.plateColor) }}
          </span>
          <span class="text-sm text-gray-600">
            车辆类型：<span class="font-medium text-gray-900">{{ vehicleTypeLabel(vehicle.vehicleType) }}</span>
          </span>
        </div>
      </div>
    </div>
    <div v-else class="text-center py-12 text-gray-500">
      <div class="text-lg font-medium mb-1">暂无车辆信息</div>
    </div>
  </div>
</template>
