<script setup>
import { computed } from 'vue'
import { useRiskNotifier } from '@/composables/useRiskNotifier'
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 transfers = computed(() => {
  return payloadAsArray(props.data).map((item) => {
    const changeMonth = item.changeMonth
    let changeMonthFormatted = '-'
    if (changeMonth === '近一年内过户') changeMonthFormatted = changeMonth
    else if (typeof changeMonth === 'string' && changeMonth.length === 6) {
      changeMonthFormatted = `${changeMonth.slice(0, 4)}年${changeMonth.slice(4, 6)}月`
    }
    else if (changeMonth) changeMonthFormatted = String(changeMonth)

    let intervalText = '-'
    if (item.transYear || item.transMonth) {
      const years = item.transYear ? `${item.transYear}年` : ''
      const months = item.transMonth ? `${item.transMonth}个月` : ''
      intervalText = `${years}${months}` || '-'
    }
    return { ...item, changeMonthFormatted, intervalText }
  })
})

const totalTimes = computed(() => {
  if (!transfers.value.length) return ''
  const last = transfers.value[transfers.value.length - 1]
  return last.transTimeSum ?? ''
})

const riskScore = computed(() => (transfers.value.length > 2 ? 65 : 90))
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 flex justify-between items-start gap-3">
      <div>
        <h3 class="text-lg font-bold text-sky-900">车辆过户详版查询</h3>
        <p class="text-sm text-sky-700 mt-1">按时间轴展示过户与车牌变更</p>
      </div>
      <div v-if="totalTimes" class="bg-white rounded-lg px-3 py-2 text-right shrink-0">
        <div class="text-xs text-gray-500">总过户次数</div>
        <div class="text-lg font-bold">{{ totalTimes }} 次</div>
      </div>
    </div>

    <div v-if="transfers.length" class="space-y-3">
      <div
        v-for="(item, index) in transfers"
        :key="index"
        class="bg-gray-50 rounded-lg p-4 border border-gray-200"
      >
        <div class="flex justify-between mb-2">
          <span class="font-semibold">{{ item.changeMonthFormatted }}</span>
          <span class="text-sm text-blue-600">第 {{ item.transTimeSum }} 次过户</span>
        </div>
        <div class="grid grid-cols-2 gap-3 text-sm">
          <div>
            <div class="text-gray-500 text-xs">过户前车牌</div>
            <div class="font-mono font-medium">{{ item.oldCp || '未知' }}</div>
            <div v-if="item.cityBefore" class="text-xs text-gray-500 mt-1">城市：{{ item.cityBefore }}</div>
          </div>
          <div>
            <div class="text-gray-500 text-xs">过户后车牌</div>
            <div class="font-mono font-medium">{{ item.newCp || '未知' }}</div>
            <div v-if="item.cityAfter" class="text-xs text-gray-500 mt-1">城市：{{ item.cityAfter }}</div>
          </div>
        </div>
        <div v-if="item.intervalText !== '-'" class="text-xs text-gray-500 mt-2">距上次过户：{{ item.intervalText }}</div>
      </div>
    </div>
    <div v-else class="text-center py-10 text-gray-500">暂无过户记录</div>
  </div>
</template>
