<script lang="ts">

import inputType from './inputType.vue';
import inputNumberType from './inputNumberType.vue';
import tableType from './table/tableType.vue';
import inputAreaType from './inputAreaType.vue';
import switchType from './switchType.vue';
import functionType from './functionType.vue';
import radioItems from './table/radioItem.vue';

export default {
  name: 'option-form',
  components: {
    inputType,
    inputNumberType,
    tableType,
    inputAreaType,
    switchType,
    functionType,
    radioItems
  }
};
</script>
<template>
  <el-form :model="formData" label-width="auto" style="max-width: 600px">
    <div v-for="i in Object.keys(formData)" :key="i">
      <component :is="getType(i)" :formData="formData" :keyValue="i" :itemName="nameEnum[i]||''" />
    </div>
  </el-form>
</template>
<script lang="ts" setup>

const props = defineProps({
  formData: Object
});
const { formData } = toRefs(props);

const typeEnum = {
  inputType: ['name', 'key', 'labelWidth', 'submitBottomName', 'resetBottomName', 'total', 'pageNum', 'pageSize', 'dataKey', 'delField'],
  inputAreaType: [],
  inputNumberType: ['min', 'max', 'step'],
  tableType: ['thTdMap'],
  radioItems: ['radioItems'],
  switchType: ['isReset', 'isResetBottom', 'isSubmitBottom', 'disabled', 'isPagination', 'isInLine', 'isOperate', 'controlsPosition'],
  functionType: ['submitFunction', 'updateFunction', 'deleteFunction', 'addFunction']
};
const nameEnum = {
  name: '组件名称',
  key: '组件key值',
  labelWidth: '标签长度',
  submitBottomName: '确定按钮名称',
  resetBottomName: '重置按钮名称',
  isReset: '是否可重置',
  isResetBottom: '是否显示重置按钮',
  isSubmitBottom: '是否显示确定按钮',
  disabled: '是否禁用',
  submitFunction: '提交函数',
  isPagination: '是否分页',
  total: '总数字段名',
  pageNum: '当前页字段名',
  pageSize: '每页条数字段名',
  dataKey: '获取的数据字段',
  isInLine: '是否为行内表单',
  thTdMap: '表单数据设置',
  updateFunction: '修改函数',
  deleteFunction: '删除函数',
  addFunction: '新增函数',
  isOperate: '是否显示操作组',
  delField: '删除的字段名',
  min: '最小值',
  max: '最大值',
  step: '步长',
  controlsPosition: '按钮是否位于右侧',
  radioItems: '单选框数据设置'
};
const getType = (e) => {
  let res = '';
  Object.keys(typeEnum).forEach((key) => {
    if (typeEnum[key].includes(e)) {
      res = key;
    }
  });
  return res;
};


</script>
<style scoped lang="less">
</style>



