<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-row :gutter="30">
      [% for column in columns if column.is_insert or column.is_edit %]
      <re-col :value="24" :xm="24" :sm="24">
        <el-form-item label="[[ column.column_comment ]]" prop="[[ column.python_name ]]">
        [% if column.show_type == "input" %]
        <el-input
            v-model="newFormInline.[[ column.python_name ]]"
            placeholder="请输入[[ column.column_comment ]]~"
            clearable
        />
        [% elif column.show_type == "textarea" %]
        <el-input
            v-model="newFormInline.[[ column.python_name ]]"
            type="textarea"
            placeholder="请输入[[ column.column_comment ]]~"
            clearable
        />
        [% elif column.show_type == "select" %]
        <el-select
            v-model="newFormInline.[[ column.python_name ]]"
            placeholder="请选择[[ column.column_comment ]]~"
            filterable
            clearable
        >
        <el-option
            v-for="item in options.[[ column.python_name ]]"
            :key="item.value"
            :label="item.label"
            :value="item.value" />
        </el-select>
        [% elif column.show_type == "radio" %]
        <el-radio-group v-model="newFormInline.[[ column.python_name ]]">
        <el-radio
            v-for="item in options.[[ column.python_name ]]"
            :key="item.value"
            :label="item.value"
        >{{ item.label }}
        </el-radio>
        </el-radio-group>
        [% elif column.show_type == "checkbox" %]
        <el-checkbox-group v-model="newFormInline.[[ column.python_name ]]">
        <el-checkbox
            v-for="item in options.[[ column.python_name ]]"
            :key="item.value"
            :label="item.value">
          {{ item.label }}
        </el-checkbox>
        </el-checkbox-group>
        [% elif column.show_type == "datetime" %]
        <el-date-picker
          v-model="newFormInline.[[ column.python_name ]]"
          type="datetime"
          placeholder="请选择[[ column.column_comment ]]~"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="x" />
        [% endif %]
        </el-form-item>
      </re-col>
      [% endfor %]
    </el-row>
  </el-form>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { [[ class_name ]]Info } from "types/[[ name ]]";
interface FormItemProps {
  [% for column in columns if column.is_list %]
  /** [[ column.column_comment ]] */
  [[ column.python_name ]]: [[ column.typescript_type ]];
  [% endfor %]
}
interface FormProps {
  formInline: FormItemProps;
}
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    [% for column in columns if column.is_list %]
    /** [[ column.column_comment ]] */
    [[ column.python_name ]]:  "",
    [% endfor %]
  })
});
const newFormInline = ref<[[ class_name ]]Info>(props.formInline);
/** 自定义表单规则校验 */
const formRules = reactive<FormRules>({
    [% for column in columns if column.is_insert or column.is_edit %]
    [[ column.python_name ]]: [{ required: [[ 'true' if column.is_required else 'false' ]], message: "请输入[[ column.column_comment ]]~", trigger: "blur" }],
    [% endfor %]
});
defineExpose({ newFormInline });
</script>
