<template>
  <!-- :rules="formData.rules" -->
  <el-form v-bind="getBindValues" :model="formData.schemasForm" ref="ruleFormRef">
    <span>
      <slot name="left"></slot>
    </span>
    <template v-for="schema in getSchemas" :key="schema.field">
      <!-- v-bind="schema" -->
      <el-form-item :prop="schema.field" :label-width="schema.labelWidth"
        :label="schema.component === 'Checkbox' ? '' : schema.label"
        :rules="formData.rules[schema.field]"
        :style="{ width: schema.width ? schema.width + 'px' : '' }">
        <!-- 下拉框选择 -->
        <template v-if="schema.component === 'Select'">
          <el-select v-model="formData.schemasForm[schema.field]" v-bind="schema">
            <el-option v-for="item in schema.options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </template>
        <!-- 输入框显示 -->
        <template v-else-if="schema.component === 'Input'">
          <el-input v-model="formData.schemasForm[schema.field]" v-bind="schema" />
        </template>
        <!-- 复选框 -->
        <template v-else-if="schema.component === 'Checkbox'">
          <el-checkbox v-model="formData.schemasForm[schema.field]">
            {{ schema.label }}
          </el-checkbox>
        </template>
      </el-form-item>
    </template>
    <el-form-item>
      <slot name="right"></slot>
    </el-form-item>
  </el-form>
</template>
<script lang="ts" setup>
import { useEleFormValidate } from "@/hooks/useEleFormValidate";
import { cloneDeep } from "@/utils/cloneDeep";
import { FormInstance } from "element-plus";
import { ref, computed, unref, reactive, onMounted, useAttrs } from "vue";
import {
  BaseFormData,
  BaseFormProps,
  FormPropsSchema,
  FormSchema,
} from "./types";

// 定义基础数据
const innerPropsRef = ref<FormPropsSchema>();
const ruleFormRef = ref<FormInstance>();
const formData: BaseFormData = reactive({
  rules: {},
  schemas: [],
  schemasForm: {},
});

// 设置表单内容
const setProps = (porps: FormSchema[]) => {
  innerPropsRef.value = { ...(unref(innerPropsRef) || {}), ...porps };
};

// 获取一些设置的参数
const getProps = computed(() => {
  return { ...unref(innerPropsRef) } as BaseFormProps;
});

// 表单基本配置
const getSchemas = computed(() => {
  const schemas: FormSchema[] = unref(getProps).schemas;
  // 初始化字段
  initSchemas(schemas);
  return schemas;
});
// 获取交互表单内容
const getVaule = () => formData.schemasForm;

// 初始化field后端字段
const initSchemas = (schemas: FormSchema[]) => {
  if (!schemas) return;
  formData.schemas = schemas
  for (const filterItem of schemas) {
    formData.schemasForm[filterItem.field] = filterItem.defaultValue || undefined;
    switch (filterItem.component) {
      case "Input":
        if (filterItem.required) {
          if (filterItem.rules && filterItem.rules?.length > 0) {
            formData.rules[filterItem.field] = filterItem.rules;
          }
          formData.rules[filterItem.field] = [{ required: true, message: "请输入内容!", }];
        }
        break;
      case "Select":
        if (filterItem.required) {
          if (filterItem.rules && filterItem.rules?.length > 0) {
            formData.rules[filterItem.field] = filterItem.rules;
          }
          formData.rules[filterItem.field] = [{ required: true, message: "请选择内容!", }];
        }
        break;
      case "Checkbox":
        if (filterItem.required) {
          if (filterItem.rules && filterItem.rules?.length > 0) {
            formData.rules[filterItem.field] = filterItem.rules;
          }
          formData.rules[filterItem.field] = [{ required: true, message: "请选择内容!", }];
        }
        break;
    }
  }
};

// 校验、重置表单
const { formValidate, resetForm, validateFieldForm, clearValidateForm } = useEleFormValidate();

// 获取element属性用于属性穿透
const attrs = useAttrs();
const getBindValues = computed(() => {
  // 默认属性
  const propsData: Recordable = {
    inline: true,
    ...unref(getProps),
    ...attrs,
  };

  return propsData;
});

// 设置默认值
const setDefaultValue = (data: Recordable) => {
  if (!formData.schemas) return;
  for (const filterItem of formData.schemas) {
    if(data[filterItem.field] === 0 || data[filterItem.field]) {
      formData.schemasForm[filterItem.field] = data[filterItem.field];
    }
  }
};

// 处理事件
const formActionType = {
  setProps, // 设置表单内容
  getVaule, // 获取表单内容
  setDefaultValue, //设置默认值
  getFieldsValue: () => formValidate(ruleFormRef.value), //表单校验
  resetForm: () => resetForm(ruleFormRef.value), //重置表单
  clearValidate: () => clearValidateForm(ruleFormRef.value),//清除校验
  validateFieldForm: (list) => validateFieldForm(ruleFormRef.value, list)//清除校验
};

const emit = defineEmits(["register"]);
onMounted(() => {
  // 挂载抛事件出去
  emit("register", formActionType);
});
</script>
