<template>
  <component ref="form" :is="com" :config="config" :mode="mode" :perm="perm" @update="update" v-model:value="_value"
             v-bind="config.props"/>
</template>

<script setup>
import TextInput from './components/TextInput.vue'
import TextareaInput from './components/TextareaInput.vue'
import NumberInput from './components/NumberInput.vue'
import AmountInput from './components/AmountInput.vue'
import SelectInput from './components/SelectInput.vue'
import MultipleSelect from './components/MultipleSelect.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 SpanLayout from './components/SpanLayout.vue'
import UserPicker from './components/UserPicker.vue'
import DeptPicker from './components/DeptPicker.vue'
import RatePicker from './components/RatePicker.vue'
import Description from './components/Description.vue'
import TableList from './components/TableList.vue'
import SignPanel from './components/SignPanel.vue'
import {defineProps, defineEmits, computed} from 'vue'

const emit = defineEmits()
const com = ref()

const props = defineProps({
  mode: {
    type: String,
    default: 'DESIGN'
  },
  perm: {
    type: String,
    default: 'E'
  },
  value: {
    type: Object,
    default: undefined
  },
  config: {
    type: Object,
    default: () => {
      return {}
    }
  },
  name: {
    type: String,
    default: ''
  },
})
const _value = computed({
  get() {
    return props.value
  },
  set(value) {
    emit('update:value', value)
  }
})

// const _value = ref(props.value)
watch(() => props.value, (value) => {
  _value.value = value
})
watch(() => props.config, (value) => {
  init(value.name)
})
watch(() => props.perm, (value) => {
  props.perm=value
})
const init = (value) => {
  switch (value) {
    case 'TextInput':
      com.value = TextInput;
      break;
    case 'TextareaInput':
      com.value = TextareaInput;
      break;
    case 'NumberInput':
      com.value = NumberInput;
      break;
    case 'AmountInput':
      com.value = AmountInput;
      break;
    case 'SelectInput':
      com.value = SelectInput;
      break;
    case 'MultipleSelect':
      com.value = MultipleSelect;
      break;
    case 'DateTime':
      com.value = DateTime;
      break;
    case 'DateTimeRange':
      com.value = DateTimeRange;
      break;
    case 'ImageUpload':
      com.value = ImageUpload;
      break;
    case 'FileUpload':
      com.value = FileUpload;
      break;
    case 'SpanLayout':
      com.value = SpanLayout;
      break;
    case 'UserPicker':
      com.value = UserPicker;
      break;
    case 'DeptPicker':
      com.value = DeptPicker;
      break;
    case 'RatePicker':
      com.value = RatePicker;
      break;
    case 'Description':
      com.value = Description;
      break;
    case 'TableList':
      com.value = TableList;
      break;
    case 'SignPanel':
      com.value = SignPanel;
      break;
  }
}


init(props.config.name)

</script>

<style scoped>

</style>
