<template>
  <div v-if="items.length > 0" class="form-data-display">
    <el-descriptions :column="2" size="large" border>
      <el-descriptions-item
        v-for="item in items"
        :key="item.name"
        :label="item.label"
      >
        <template v-if="item.type === 'select'">
          {{ formatSelectValue(item.value, item.options, item.multiple) }}
        </template>
        <template v-else-if="item.type === 'textarea'">
          <pre class="text-value">{{ formatValue(item.value) }}</pre>
        </template>
        <template v-else>
          <span class="text-value">{{ formatValue(item.value) }}</span>
        </template>
      </el-descriptions-item>
    </el-descriptions>
  </div>
  <el-empty v-else description="暂无表单数据" :image-size="60" />
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { FormField, FormFieldOption } from '@/types/flow'

const props = defineProps<{
  formSchema?: string
  formData?: string | Record<string, unknown>
}>()

const fields = computed<FormField[]>(() => {
  if (!props.formSchema) return []
  try {
    const parsed = JSON.parse(props.formSchema)
    return Array.isArray(parsed) ? parsed : []
  } catch {
    return []
  }
})

const dataMap = computed<Record<string, unknown>>(() => {
  if (!props.formData) return {}
  if (typeof props.formData === 'object') return props.formData as Record<string, unknown>
  try {
    return JSON.parse(props.formData)
  } catch {
    return { 原始数据: props.formData }
  }
})

const items = computed(() => {
  if (fields.value.length > 0) {
    return fields.value.map(field => ({
      name: field.name,
      label: field.label || field.name,
      type: field.type,
      multiple: field.multiple,
      options: normalizeOptions(field.options),
      value: dataMap.value[field.name]
    }))
  }
  // 没有字段配置时，直接按 key/value 展示
  return Object.entries(dataMap.value).map(([name, value]) => ({
    name,
    label: name,
    type: undefined as string | undefined,
    multiple: false,
    options: [] as FormFieldOption[],
    value
  }))
})

function normalizeOptions(options?: FormFieldOption[] | string[]): FormFieldOption[] {
  if (!options || !Array.isArray(options)) return []
  return options.map((opt: any) => {
    if (typeof opt === 'string') {
      return { label: opt, value: opt }
    }
    return { label: String(opt.label ?? opt.value), value: opt.value }
  })
}

function formatValue(value: unknown): string {
  if (value === undefined || value === null) return '-'
  if (typeof value === 'boolean') return value ? '是' : '否'
  return String(value)
}

function formatSelectValue(value: unknown, options: FormFieldOption[], multiple?: boolean): string {
  const list = multiple && Array.isArray(value) ? value : [value]
  const labels = list.map(v => {
    const found = options.find(opt => String(opt.value) === String(v))
    return found ? found.label : formatValue(v)
  })
  return labels.length > 0 ? labels.join('，') : '-'
}
</script>

<style scoped>
.form-data-display {
  font-size: 15px;
}
.text-value {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #303133;
  white-space: pre-wrap;
  word-break: break-word;
}
:deep(.el-descriptions__label) {
  font-weight: 500;
  color: #606266;
  min-width: 100px;
  padding: 12px 16px !important;
}
:deep(.el-descriptions__content) {
  color: #303133;
  padding: 12px 16px !important;
}
</style>
