<script setup>
import { computed } from 'vue'
import { useRiskNotifier } from '@/composables/useRiskNotifier'
import { formatDateZh, formatMileageKm } 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: () => {} },
})

const { obj, params } = useVehiclePayload(props)

const records = computed(() => (Array.isArray(obj.value.record) ? obj.value.record : []))
const hasData = computed(() => Object.keys(obj.value).length > 0)
const vin = computed(() => (records.value[0]?.vin) || params.value.vin_code || '')
const lastRecord = computed(() => (records.value.length ? records.value[records.value.length - 1] : null))

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

<template>
  <div class="card space-y-3">
    <div class="bg-gradient-to-br from-sky-50 to-blue-50 rounded-lg p-4 border border-sky-100">
      <h3 class="text-lg font-bold">车辆维保简版查询</h3>
      <p class="text-sm text-gray-600 mt-1">按时间轴展示维保与材料明细</p>
    </div>

    <template v-if="hasData">
      <div class="bg-gray-50 rounded-lg p-4 border text-sm">
        <div class="font-mono">VIN：{{ vin || '-' }}</div>
        <div class="text-gray-600 mt-1">维保 {{ records.length }} 条
          <span v-if="lastRecord"> · 最近 {{ formatDateZh(lastRecord.lastTime) }} · {{ formatMileageKm(lastRecord.mileage) }}</span>
        </div>
      </div>

      <div v-if="records.length" class="space-y-3">
        <div v-for="(item, idx) in records" :key="idx" class="bg-white rounded-lg p-4 border border-gray-200">
          <div class="flex justify-between font-medium">
            <span>{{ formatDateZh(item.lastTime) }}</span>
            <span class="text-blue-600">{{ formatMileageKm(item.mileage) }}</span>
          </div>
          <p class="text-sm text-gray-500 mt-1">{{ item.repairType || '维保' }} · VIN {{ item.vin || vin || '-' }}</p>
          <div v-if="item.details?.length" class="mt-2 text-sm">
            <div class="text-xs text-gray-500 mb-1">维修项目</div>
            <div v-for="(det, di) in item.details" :key="di" class="py-1">
              <span v-if="det.type" class="text-xs bg-blue-50 text-blue-700 px-1 rounded mr-1">{{ det.type }}</span>{{ det.content }}
            </div>
          </div>
          <div v-if="item.materials?.length" class="mt-2 text-sm">
            <div class="text-xs text-gray-500 mb-1">使用材料</div>
            <div v-for="(m, mi) in item.materials" :key="mi" class="py-1">
              <span v-if="m.type" class="text-xs bg-gray-100 px-1 rounded mr-1">{{ m.type }}</span>{{ m.content }}
            </div>
          </div>
        </div>
      </div>
      <div v-else class="text-center text-gray-500 py-6">暂无维保记录</div>
    </template>
    <div v-else class="text-center py-10 text-gray-500">暂无维保数据</div>
  </div>
</template>
