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

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

const { payload } = useVehiclePayload(props)

const bodyText = computed(() => {
  const p = payload.value
  if (p === '000' || p === 0)
    return '（本模块暂无示例明细）'
  if (p == null || p === '')
    return '暂无数据'
  if (typeof p === 'string')
    return p
  try {
    return JSON.stringify(p, null, 2)
  }
  catch {
    return String(p)
  }
})

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

<template>
  <div class="card">
    <p class="text-xs text-gray-500 mb-2">
      以下为结构化数据预览；专用版式可联系产品补充独立模块。
    </p>
    <pre class="text-xs text-gray-800 bg-gray-50 rounded-lg p-3 overflow-auto max-h-80 whitespace-pre-wrap break-all">{{ bodyText }}</pre>
  </div>
</template>
