<script setup lang="ts">
import { computed, ref } from 'vue'
import { NInput } from 'naive-ui'
import { Icon } from '@iconify/vue'
import IconPicker from '@/core/components/IconPicker.vue'

const props = defineProps<{ df: any; record: Record<string, any>; canEdit: boolean; ctx: any }>()

// Label布局：上下结构(vertical) 或 左右结构(horizontal)
const labelLayout = computed(() => props.df.label_layout || 'vertical')

// 获取图标值
const iconValue = computed({
  get: () => props.record[props.df.fieldname] || '',
  set: (value) => {
    props.record[props.df.fieldname] = value
  }
})

// IconPicker 组件引用（用于调用打开方法）
const iconPickerRef = ref<InstanceType<typeof IconPicker> | null>(null)

// 打开图标选择器
function openIconPicker() {
  iconPickerRef.value?.open()
}
</script>

<template>
  <div :class="['field-wrapper', `layout-${labelLayout}`]">
    <label class="field-label">
      {{ ctx.t(df.label || df.fieldname) }}
      <span v-if="df.reqd" class="required">*</span>
    </label>
    <!-- Icon 字段特殊布局：左边显示图标（可点击），右边显示字段值 -->
    <div class="icon-field-content">
      <!-- 左侧图标（可点击打开选择器） -->
      <div 
        v-if="canEdit" 
        class="icon-display clickable" 
        @click="openIconPicker"
        :title="ctx.t('Click to select icon')"
      >
        <Icon 
          v-if="iconValue" 
          :icon="iconValue" 
          :width="24" 
          :height="24" 
          class="icon-gray icon-preview" 
        />
        <Icon 
          v-else 
          icon="tabler:apps" 
          :width="24" 
          :height="24" 
          class="icon-gray icon-placeholder-icon" 
        />
      </div>
      <!-- 只读模式：左侧仅显示图标 -->
      <div v-else class="icon-display">
        <Icon v-if="iconValue" :icon="iconValue" :width="24" :height="24" class="icon-gray" />
        <span v-else class="icon-placeholder">—</span>
      </div>
      <!-- 右侧字段值 -->
      <div class="icon-value-display">
        <!-- 只读模式：显示文本值 -->
        <span v-if="!canEdit" class="field-value-text">
          {{ iconValue || '—' }}
        </span>
        <!-- 编辑模式：输入框（无前缀图标，无右侧按钮）-->
        <n-input 
          v-else
          v-model:value="iconValue" 
          :placeholder="ctx.t('Enter icon name or click icon to select')"
          class="icon-input"
          clearable
        />
      </div>
    </div>
    
    <!-- 图标选择器（不渲染触发按钮，仅用于弹窗）-->
    <IconPicker
      v-if="canEdit"
      ref="iconPickerRef"
      :model-value="iconValue"
      @update:model-value="iconValue = $event"
      style="display: none;"
    />
  </div>
</template>

<style scoped>
.field-wrapper :deep(.n-input) {
  flex: 1;
}

.icon-field-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.icon-display {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.icon-display.clickable {
  cursor: pointer;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
}

.icon-display.clickable:hover {
  background-color: #f3f4f6;
  border-color: #d1d5db;
  transform: scale(1.05);
}

.icon-display.clickable:active {
  transform: scale(0.98);
}

.icon-gray {
  color: #9ca3af;
}

.icon-placeholder {
  color: #9ca3af;
  font-size: 14px;
}

.icon-value-display {
  flex: 1;
  min-width: 0;
}

.field-value-text {
  color: #111827;
  font-size: 14px;
  min-height: 32px;
  display: flex;
  align-items: center;
}

/* 编辑模式：输入框样式 */
.icon-input {
  flex: 1;
  min-width: 0;
}

.icon-preview {
  transition: all 0.2s ease;
}

.icon-placeholder-icon {
  opacity: 0.5;
}
</style>


