<template>
  <div>
    <el-form label-width="90px" v-if="selectFormItem.name !== 'SpanLayout'">
      <el-form-item label="表单ID">
        <el-input size="small" clearable v-model="selectFormItem.id" disabled/>
      </el-form-item>
      <el-form-item label="表单名称">
        <el-input size="small" clearable v-model="selectFormItem.title"/>
      </el-form-item>
      <component :is="selectFormItem.name" v-model="selectFormItem.props"/>
      <el-form-item label="必填项">
        <el-switch v-model="selectFormItem.props.required"></el-switch>
      </el-form-item>
      <el-form-item label="可打印">
        <el-switch v-model="selectFormItem.props.enablePrint"></el-switch>
      </el-form-item>
    </el-form>
    <el-empty v-else description="当前组件不支持配置"></el-empty>
  </div>
</template>

<script setup>
import TextInput from './config/TextInputConfig.vue'
import NumberInput from './config/NumberInputConfig.vue'
import AmountInput from './config/AmountInputConfig.vue'
import TextareaInput from './config/TextareaInputConfig.vue'
import MultipleSelect from './config/SelectInputConfig.vue'
import SelectInput from './config/SelectInputConfig.vue'
import DateTime from './config/DateTimeConfig.vue'
import DateTimeRange from './config/DateTimeRangeConfig.vue'
import ImageUpload from './config/ImageUploadConfig.vue'
import FileUpload from './config/FileUploadConfig.vue'
import Description from './config/DescriptionConfig.vue'
import MoneyInput from './config/MoneyInputConfig.vue'
import DeptPicker from './config/OrgPickerConfig.vue'
import UserPicker from './config/OrgPickerConfig.vue'
import TableList from './config/TableListConfig.vue'
import SignPanel from './config/SignPanelConfig.vue'
import RatePicker from './config/RatePickerConfig.vue'
import {computed,ref} from "vue";
import {useProcessStore} from '@/stores/processStore.js'
const processStore = useProcessStore()
// const component = ref()

const selectFormItem =  computed(()=>{
  return processStore.getSelectedFormItem()
})

// const init = () => {
//   console.log(processStore.getSelectedFormItem().name)
//   switch (processStore.getSelectedFormItem().name) {
//     case 'TextInput':
//       component.value = TextInput;
//       break;
//     case 'TextareaInput':
//       component.value = TextareaInput;
//       break;
//     case 'NumberInput':
//       component.value = NumberInput;
//       break;
//     case 'AmountInput':
//       component.value = AmountInput;
//       break;
//     case 'SelectInput':
//       component.value = SelectInput;
//       break;
//     case 'MultipleSelect':
//       component.value = MultipleSelect;
//       break;
//     case 'DateTime':
//       component.value = DateTime;
//       break;
//     case 'DateTimeRange':
//       component.value = DateTimeRange;
//       break;
//     case 'ImageUpload':
//       component.value = ImageUpload;
//       break;
//   }
// }


// init()

</script>

<style scoped>

</style>
