<template>
  <div class="metadata-field-renderer">
    <el-form-item
      :label="field.label"
      :prop="propPath"
      :required="field.required && !isDeprecated"
      :class="{ 'is-deprecated': isDeprecated }"
    >
      <template #label>
        <div class="field-label-wrapper">
          <span>{{ field.label }}</span>
          <el-tag v-if="isDeprecated" type="danger" size="small" class="deprecated-tag">
            已废弃
          </el-tag>
          <el-tooltip v-if="field.description" :content="field.description" placement="top">
            <el-icon class="field-help"><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
      </template>

      <div v-if="isDeprecated" class="deprecated-notice">
        <el-alert
          type="warning"
          :closable="false"
          show-icon
        >
          <template #title>
            此字段已废弃，仅保留历史数据展示，不可编辑
          </template>
        </el-alert>
        <div class="deprecated-value" v-if="modelValue !== undefined && modelValue !== null && modelValue !== ''">
          当前值: {{ formatValue(modelValue) }}
        </div>
      </div>

      <template v-else>
        <el-input
          v-if="field.type === 'string'"
          :model-value="modelValue as string"
          @update:model-value="$emit('update:modelValue', $event)"
          :placeholder="placeholder"
          :disabled="disabled"
          clearable
        />

        <el-input-number
          v-else-if="field.type === 'number'"
          :model-value="modelValue as number"
          @update:model-value="$emit('update:modelValue', $event)"
          :placeholder="placeholder"
          :disabled="disabled"
          style="width: 100%"
        />

        <el-switch
          v-else-if="field.type === 'boolean'"
          :model-value="modelValue as boolean"
          @update:model-value="$emit('update:modelValue', $event)"
          :disabled="disabled"
        />

        <el-select
          v-else-if="field.type === 'enum'"
          :model-value="modelValue as string"
          @update:model-value="$emit('update:modelValue', $event)"
          :placeholder="placeholder"
          :disabled="disabled"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="opt in field.options"
            :key="opt"
            :label="opt"
            :value="opt"
          />
        </el-select>

        <el-select
          v-else-if="field.type === 'array_enum'"
          :model-value="modelValue as string[]"
          @update:model-value="$emit('update:modelValue', $event)"
          :placeholder="placeholder"
          :disabled="disabled"
          multiple
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="opt in field.options"
            :key="opt"
            :label="opt"
            :value="opt"
          />
        </el-select>
      </template>

      <div v-if="fieldHint" class="field-hint">{{ fieldHint }}</div>
    </el-form-item>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { QuestionFilled } from '@element-plus/icons-vue'
import type { MetadataFieldDefinition, MetadataPayload } from '@/types/metadata'

const props = defineProps<{
  field: MetadataFieldDefinition
  modelValue: string | number | boolean | string[] | undefined
  propPath?: string
  disabled?: boolean
  isNewObject?: boolean
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: string | number | boolean | string[] | undefined): void
}>()

const isDeprecated = computed(() => props.field.status === 'deprecated')

const placeholder = computed(() => {
  if (props.field.default !== undefined) {
    return `默认: ${props.field.default}`
  }
  return `请输入${props.field.label}`
})

const fieldHint = computed(() => {
  const hints: string[] = []
  if (props.field.is_filterable) {
    hints.push('可作为过滤条件')
  }
  if (props.field.is_rank_feature) {
    hints.push('可作为排序特征')
  }
  return hints.join(' | ')
})

const formatValue = (value: string | number | boolean | string[] | undefined): string => {
  if (value === undefined || value === null) return '无'
  if (Array.isArray(value)) return value.join(', ')
  return String(value)
}
</script>

<style scoped>
.metadata-field-renderer {
  width: 100%;
}

.field-label-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.deprecated-tag {
  font-size: 10px;
}

.field-help {
  color: var(--el-text-color-secondary);
  cursor: help;
}

.is-deprecated :deep(.el-form-item__label) {
  color: var(--el-text-color-secondary);
}

.deprecated-notice {
  margin-bottom: 8px;
}

.deprecated-value {
  margin-top: 8px;
  padding: 8px 12px;
  background-color: var(--el-fill-color-light);
  border-radius: 4px;
  font-size: 13px;
  color: var(--el-text-color-regular);
}

.field-hint {
  margin-top: 4px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
</style>
