<script lang="ts">

import inputType from './inputType.vue';
import inputAreaType from './inputAreaType.vue';
import switchType from './switchType.vue';
import functionType from './functionType.vue';

export default {
  name: 'option-form',
  components: {
    inputType,
    inputAreaType,
    switchType,
    functionType
  }
};
</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>
import { watch } from 'vue';

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

const typeEnum = {
  inputType: ['name', 'key', 'labelWidth', 'submitBottomName', 'resetBottomName', 'total', 'pageNum', 'pageSize', 'dataKey'],
  inputAreaType: [],
  switchType: ['isReset', 'isResetBottom', 'isSubmitBottom', 'disabled', 'isPagination', 'isInLine'],
  functionType: ['submitFunction']
};
const nameEnum = {
  name: '组件名称',
  key: '组件key值',
  labelWidth: '标签长度',
  submitBottomName: '确定按钮名称',
  resetBottomName: '重置按钮名称',
  isReset: '是否可重置',
  isResetBottom: '是否显示重置按钮',
  isSubmitBottom: '是否显示确定按钮',
  disabled: '是否禁用',
  submitFunction: '提交回调函数',
  isPagination: '是否分页',
  total: '总数字段名',
  pageNum: '当前页字段名',
  pageSize: '每页条数字段名',
  dataKey: '获取的数据字段',
  isInLine: '是否为行内表单'
};
const getType = (e) => {
  let res = '';
  Object.keys(typeEnum).forEach((key) => {
    if (typeEnum[key].includes(e)) {
      res = key;
    }
  });
  console.log(res);
  return res;
};


const { formData } = toRefs(props);
watch(formData, e => {
  console.log(formData.value);
});

const onSubmit = () => {
  console.log('submit!');
};

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



