<template>
  <component
    :is="config.name"
    ref="form"
    v-bind="config.props"
    :mode="mode"
    :value="_value"
    @input="_handleInput"
  />
</template>

<script>
import TextInput from '@/views/workFlow/designer/common/form/components/TextInput.vue';
import TextareaInput from '@/views/workFlow/designer/common/form/components/TextareaInput.vue';
import AmountInput from './components/AmountInput.vue';
import SelectInput from './components/SelectInput.vue';
import MultipleSelect from './components/MultipleSelect.vue';
import NumberInput from './components/NumberInput.vue';
import DateTime from './components/DateTime.vue';
import DateTimeRange from './components/DateTimeRange.vue';
import ImageUpload from './components/ImageUpload.vue';
import FileUpload from './components/FileUpload.vue';
import Description from './components/Description.vue';
import UserPicker from './components/UserPicker.vue';
import DeptPicker from './components/DeptPicker.vue';
import SpanLayout from './components/SpanLayout.vue';

export default {
  name: 'FormDesignRender',
  components: {
    TextInput,
    TextareaInput,
    AmountInput,
    SelectInput,
    MultipleSelect,
    NumberInput,
    DateTime,
    DateTimeRange,
    ImageUpload,
    FileUpload,
    Description,
    UserPicker,
    DeptPicker,
    SpanLayout,
  },
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    mode: {
      type: String,
      default: 'DESIGN',
    },
    config: {
      type: Object,
      default: () => ({}),
    },
    value: {
      type: null,
      default: null,
    },
  },
  computed: {
    _value() {
      // 如果需要特殊处理类型（比如数字转型）
      const valueType = this.config.type;
      return valueType === 'Number' && this.value != null
        ? Number(this.value)
        : this.value;
    },
  },
  methods: {
    _handleInput(val) {
      const valueType = this.config.type;
      const value = valueType === 'Number' ? Number(val) : val;
      console.log("FormDesignRender 收到 子组件冒泡数据:", val);
      // 这里触发 Vue2 v-model 的 input 事件
      this.$emit('input', value);
      // 如果想兼容 Vue3 风格，也可以加：
      // this.$emit('update:value', value);
    },
  },
};
</script>

<style scoped lang="less">
/* 可按需添加样式 */
</style>
