<script setup>
import { computed } from 'vue'
import { useRiskNotifier } from '@/composables/useRiskNotifier'
import { useVehiclePayload } from '@/composables/useVehiclePayload'
import { payloadAsArray } from '@/utils/vehiclePayload'

const props = defineProps({
  data: { default: null },
  params: Object,
  apiId: { type: String, default: '' },
  index: { type: Number, default: 0 },
  notifyRiskStatus: { type: Function, default: () => {} },
})

const records = computed(() => payloadAsArray(props.data))

const riskScore = computed(() => 100)
useRiskNotifier(props, riskScore)
</script>

<template>
  <div class="card space-y-3">
    <div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg p-4 border border-blue-100">
      <h3 class="text-lg font-bold text-gray-900">车辆静态信息查询</h3>
      <p class="text-sm text-gray-600 mt-1">生产、排放、燃料等静态信息</p>
    </div>

    <template v-if="records.length">
      <div
        v-for="(item, idx) in records"
        :key="idx"
        class="bg-gray-50 rounded-lg p-4 border border-gray-200"
      >
        <div class="flex flex-wrap items-center gap-2 mb-3">
          <span class="text-xs text-blue-700 bg-blue-50 px-2 py-0.5 rounded">车辆 {{ idx + 1 }}</span>
          <span class="font-semibold text-gray-900">{{ item.vType || '未知车型' }}</span>
          <span class="text-xs text-blue-600 bg-white px-2 py-0.5 rounded-full border">{{ item.vFuelType || '燃料未知' }}</span>
        </div>
        <div class="grid grid-cols-2 gap-3 text-sm">
          <div><span class="text-gray-500 block text-xs">发动机号</span><span class="font-mono">{{ item.engineNO || '-' }}</span></div>
          <div><span class="text-gray-500 block text-xs">发动机型号</span><span class="font-mono">{{ item.engineType || '-' }}</span></div>
          <div><span class="text-gray-500 block text-xs">生产日期</span>{{ item.vScdate || '-' }}</div>
          <div><span class="text-gray-500 block text-xs">排放阶段</span>{{ item.dischargeStage || '-' }}</div>
          <div><span class="text-gray-500 block text-xs">车辆分类</span>{{ item.vClassification || '-' }}</div>
          <div class="col-span-2"><span class="text-gray-500 block text-xs">生产企业</span>{{ item.vManufacturer || '-' }}</div>
          <div class="col-span-2"><span class="text-gray-500 block text-xs">生产厂地址</span>{{ item.vSccdz || '-' }}</div>
        </div>
      </div>
    </template>
    <div v-else class="text-center py-10 text-gray-500">暂无车辆静态信息</div>
  </div>
</template>
