<script setup lang="ts">
import type { PropType } from 'vue'

export interface ConfigItem {
  label: string
  field: string
  full?: boolean
  format?: (value: string | number) => string
  template?: string
  condition?: (data: any) => boolean
}

const props = defineProps({
  config: {
    type: Array as PropType<ConfigItem[]>,
    required: true,
  },
  data: {
    type: Object,
    default: () => ({}),
  },
  singleColumn: {
    type: Boolean,
    default: false,
  },
})

// 模板解析函数
function parseTemplate(template: string, data: Record<string, any>, fieldValue: any): string {
  return template.replace(/\{(\w+)\}/g, (match, key) => {
    switch (key) {
      case 'value':
        return fieldValue ?? '--'
      default:
        // 支持其他字段引用，如 {f_user_name}
        return data[key] ?? match
    }
  })
}

// 获取显示值的函数
function getDisplayValue(item: ConfigItem, data: Record<string, any>): string {
  const fieldValue = data[item.field]

  // 优先使用 template
  if (item.template) {
    return parseTemplate(item.template, data, fieldValue)
  }

  // 其次使用 format 函数
  if (item.format) {
    return item.format(fieldValue)
  }

  // 最后使用原始值
  return fieldValue ?? '--'
}
</script>

<template>
  <div class="info-grid" :class="{ 'info-grid--single-column': singleColumn }">
    <div
      v-for="item in props.config.filter(item => item.condition ? item.condition(props.data) : true)"
      :key="item.label"
      class="info-item"
      :class="[
        item.full ? 'info-item--full' : '',
      ]"
    >
      <p class="info-label">
        {{ item.label }}
      </p>
      <p class="info-value">
        {{ getDisplayValue(item, props.data) }}
      </p>
    </div>
  </div>
</template>

<style lang="less" scoped>
.info-grid {
  display: grid;
  gap: 12px;
  width: 100%;

  // 默认移动端一行两列
  grid-template-columns: repeat(2, 1fr);

  // 单列模式
  &--single-column {
    grid-template-columns: 1fr;
  }

  // 平板及以上屏幕展示两列
  @media (min-width: 600px) {
    grid-template-columns: repeat(2, 1fr);
  }

  // 桌面屏幕及以上展示三列
  @media (min-width: 960px) {
    grid-template-columns: repeat(3, 1fr);

    &--single-column {
      grid-template-columns: 1fr;
    }
  }
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;

  &--full {
    grid-column: 1 / -1;
  }
}

.info-label {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.info-value {
  font-size: 14px;
  color: #333;
  margin: 0;
  font-weight: 600;
  word-break: break-all;
}
</style>
