<script setup>
import { computed } from 'vue'
import { getVehicleModuleTitle } from '@/config/vehicleReportRegistry'
import VehicleReportBlock from './VehicleReportBlock.vue'

const props = defineProps({
  productName: { type: String, default: '' },
  queryParams: { type: Object, default: () => ({}) },
  rows: { type: Array, default: () => [] },
  /** 示例 / 正式 */
  mode: { type: String, default: 'example' },
})

const modeText = computed(() => (props.mode === 'detail' ? '查询报告' : '示例报告'))

const paramLines = computed(() => {
  const p = props.queryParams
  if (!p || typeof p !== 'object')
    return []
  return Object.entries(p).map(([k, v]) => `${k}：${String(v ?? '')}`)
})

function blockTitle(row) {
  return getVehicleModuleTitle(row.apiId, row.featureName)
}
</script>

<template>
  <view class="shell">
    <view class="head-card">
      <view class="head-title">
        {{ props.productName || '报告' }}
      </view>
      <view class="head-badge">
        免责声明：
      </view>
      <view class="head-sub">

   本平台所提供车辆信息报告，仅作个人参考使用，不构成任何投资、交易及法律依据；数据来源于正规合规接口，仅供自查比对，严禁用于商用、倒卖及其他违规用途；因用户私自滥用数据造成的一切后果，均由使用者自行承担，本平台不承担任何法律责任。
      </view>
    </view>

    <!-- <view v-if="paramLines.length" class="card params-card">
      <view class="section-head">
        <view class="accent" />
        <text class="section-t">查询条件</text>
      </view>
      <view v-for="(line, idx) in paramLines" :key="idx" class="param-line">
        {{ line }}
      </view>
    </view> -->

    <view v-for="(row, idx) in props.rows" :key="`${row.apiId}-${idx}`" class="card block-card">
      <view class="block-head">
        <text class="block-title">{{ blockTitle(row) }}</text>
        <text v-if="row.apiId && row.apiId !== '__UNLABELED__'" class="block-id">{{ row.apiId }}</text>
      </view>
      <VehicleReportBlock
        :block-title="blockTitle(row)"
        :api-id="row.apiId"
        :payload="row.payload"
        :query-params="props.queryParams"
      />
    </view>
  </view>
</template>

<style scoped lang="scss">
.shell {
  width: 100%;
}

.head-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 28rpx 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 0 24rpx rgba(63, 63, 63, 0.06);
}

.head-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #1d2129;
  text-align: center;
  padding-bottom: 12rpx;
  border-bottom: 1rpx solid #e5e6eb;
}

.head-badge {
  margin-top: 12rpx;
  text-align: center;
  font-size: 24rpx;
  color: #1768ff;
  font-weight: 600;
}

.head-sub {
  margin-top: 12rpx;
  text-align: center;
  font-size: 22rpx;
  color: #86909c;
  line-height: 1.45;
}

.card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 0 24rpx rgba(63, 63, 63, 0.06);
}

.section-head {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.accent {
  width: 6rpx;
  height: 28rpx;
  border-radius: 4rpx;
  background: linear-gradient(180deg, #1768ff 0%, #1556d6 100%);
  margin-right: 12rpx;
}

.section-t {
  font-size: 28rpx;
  font-weight: 600;
  color: #1d2129;
}

.param-line {
  font-size: 24rpx;
  color: #4e5969;
  line-height: 1.55;
  padding: 6rpx 0;
}

.block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16rpx;
  margin-bottom: 16rpx;
  padding-bottom: 12rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.block-title {
  flex: 1;
  font-size: 28rpx;
  font-weight: 600;
  color: #1d2129;
}

.block-id {
  font-size: 20rpx;
  color: #86909c;
  font-family: ui-monospace, monospace;
  flex-shrink: 0;
}
</style>
