<script setup lang="ts">
import { computed } from 'vue'
import { NInput } from 'naive-ui'

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

// Label布局：上下结构(vertical) 或 左右结构(horizontal)
const labelLayout = computed(() => props.df.label_layout || 'vertical')
</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>
    <div class="json-field-container">
      <n-input 
        :value="ctx.getJsonDisplayValue ? ctx.getJsonDisplayValue(record[df.fieldname]) : (record[df.fieldname] ?? '')"
        @update:value="(v) => ctx.updateJsonValue && ctx.updateJsonValue(df.fieldname, v)"
        type="textarea"
        :rows="12"
        placeholder=""
        :disabled="!canEdit"
        class="json-textarea"
      />
    </div>
  </div>
</template>

<style scoped>
.field-wrapper :deep(.json-field-container) {
  flex: 1;
}
</style>


