<script setup lang="ts">
import { FormPlus, FormSchema } from '@/components/FormPlus'
import { useForm } from '@/hooks/useForm'
import { propTypes } from "@/utils/propTypes";
import { reactive, unref, ref, computed } from 'vue'
import { ElButton, ElInput, FormItemProp } from 'element-plus'
import { useValidator } from '@/hooks/useValidator'
import { ComponentRef } from '@/types/global';

const props = defineProps({
  schemaParam: {
    type: Object as PropType<FormSchema[]>,
    default: () => {
      return []
    }
  },
  labelPosition: propTypes.string.def('top'),
  disabled: propTypes.bool.def(false),
  model: {
    type: Object as PropType<any>,
    default: () => {
      return {}
    }
  }
})

const formModel = computed(() => {
  console.log(unref(props.model), 'model');
  return props.model
})
const schemaData = computed(() => reactive<FormSchema[]>(unref(props.schemaParam)))

const { scrollToError } = useValidator()


const { formRegister, formMethods } = useForm()
const {
  getFormResult,
  setProps,
  setValues,
  setSchema,
  getComponentExpose,
  getFormItemExpose,
  getElFormExpose,
  getFormData
} = formMethods

/**
 * 表单根据字段校验
 * @param fields 待验证的字段
 */
const formValidation = async (fields: string[] = []) => { // 表单验证
  const elFormExpose = await getElFormExpose()
  return new Promise(async (resolve) => {
    elFormExpose?.validateField(fields, (isValid) => {
      if (isValid) {
        resolve(isValid)
      } else {
        resolve(isValid)
      }
    })
  })
}

const clearValidate = async (fields: string[] = []) => { // 表单验证
  const elFormExpose = await getElFormExpose()
  elFormExpose?.clearValidate(fields)
}

const inoutFocus = async () => {
  const inputEl: ComponentRef<typeof ElInput> = await getComponentExpose('field1')
  inputEl?.focus()
}

const inoutValidation = async () => {
  const formItem = await getFormItemExpose('field1')
  const inputEl: ComponentRef<typeof ElInput> = await getComponentExpose('field1')
  inputEl?.focus()
  formItem?.validate('focus', (val: boolean) => {
    console.log(val)
  })
}

const formValidate = (prop: FormItemProp, isValid: boolean, message: string) => {
  // console.log(prop, isValid, message)
}

/**
 * @param filterEmptyVal 是否过滤空值
 */
const getData = (filterEmptyVal = true) => {
  if (filterEmptyVal) {
    return new Promise(async (resolve) => {
      const resultForm = await getFormData(filterEmptyVal)
      resolve(resultForm)
    })
  } else {
    return new Promise(async (resolve) => {
      const resultForm = await getFormData(filterEmptyVal)
      let res = getFormResult(resultForm, schemaData.value)
      resolve(res)
    })
  }
}

const setValue = async (param = {}, reset = false) => {
  const elFormExpose = await getElFormExpose()
  if (reset) {
    elFormExpose?.resetFields()
  } else {
    setValues(param)
  }
}

const submitForm = () => {
  return new Promise(async (resolve) => {
    const elFormExpose = await getElFormExpose()
    scrollToError()
    elFormExpose?.validate((isValid) => {
      if (isValid) {
        resolve(isValid)
      } else {
        resolve(isValid)
      }
    })
  })
}

// 子组建暴露的方法
defineExpose({
  formValidation,
  getFormResult,
  clearValidate,
  setSchema,
  submitForm,
  getData,
  setValue: setValue,
  setValues: setValue,
  formMethods
})
</script>

<template>
  <div>
    <FormPlus :schema="schemaData" :disabled="disabled" :model="formModel" :isCol="true" :labelPosition="labelPosition"
      @register="formRegister" @validate="formValidate" />
  </div>
</template>

<style lang="scss" scoped>
.el-button {
  margin-top: 10px;
}
</style>