<template>
  <div>
    <component 
      :is="getComponentName()"
      v-if="!field.children"
      :field="field" 
      :value="value" 
      @input="$emit('update', $event)"
    />
    <div v-else>
      <component 
        v-for="child in field.children" 
        :key="child.id"
        :is="getComponentName()"
        :field="child" 
        :value="value[child.id]" 
        @input="updateChildValue(child.id, $event)"
        :display-label="true"
      />
    </div>
  </div>
</template>

<script>
import FieldEditRender from './edit.vue'
import FieldDisplayRender from './display.vue'

export default {
  name: 'FieldContent',
  components: {
    FieldEditRender,
    FieldDisplayRender
  },
  props: {
    field: {
      type: Object,
      required: true
    },
    value: {
      type: [String, Number, Object, Array],
      required: true
    },
    mode: {
      type: String,
      required: true
    }
  },
  methods: {
    getComponentName() {
      return this.mode === 'edit' ? 'FieldEditRender' : 'FieldDisplayRender';
    },
    updateChildValue(childId, value) {
      const newValue = { ...this.value, [childId]: value };
      this.$emit('update', newValue);
    }
  }
}
</script> 