<script lang="ts" setup>
  import {ref} from 'vue';
  import {FormInstance} from 'element-plus';
  import {FormProps} from '';

  const props = withDefaults(defineProps<FormProps>(), {
    formInline: () => ({
        #foreach($item in $columnInfoList)
            #if(${item.fieldName})
              // $!{item.comment}
                    ${item.fieldName}: undefined,
            #end
        #end
    }),
  });

  const formRef = ref<FormInstance>();
  const form = ref(props.formInline);

  defineExpose({formRef});
</script>

<template>
  <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
      #foreach($item in $columnInfoList)

        <!-- $item.comment -->
        <el-form-item :label="$t('${item.fieldName}')" prop="$item.fieldName">
          <el-input v-model="form.$item.fieldName" autocomplete="off" type="text"
                    :placeholder="$t('input') + $t('${item.fieldName}')"/>
        </el-form-item>
      #end
  </el-form>
</template>
