import {
  ref,
  onMounted,
  reactive,
  computed,
  Ref,
  watch,
  SetupContext,
  h,
} from 'vue'
import { injectModel } from '@/libs/Provider/Provider'
import { $EntityName$Drawer } from '../Models/$EntityName$Drawer'
import { ElMessage } from 'element-plus'
import isEqual from 'lodash/isEqual'
import { ConfirmBox } from '@/components/ConfirmBox/ConfirmBox'
import { cloneDeep } from 'lodash'
// ÒýÈ빫¹²Ñ¡ÏîÅäÖà 
import {  
  BOOLEAN_OPTIONS_AddEdit 
} from '@/utils/commonOptionConstants'; 
// ÒýÈ빫¹²±íµ¥¹¤¾ßÎļþ  
import { extractFormDataForOnConfirm,extractAndAssignFormData } from '@/utils/myformUtils'; 
export const use$EntityName$Drawer = (props: any, ctx?: any) => {
  const $PageMenuInstanceName$Drawer = injectModel<$EntityName$Drawer>('$PageMenuInstanceName$Drawer')
  /**
   * ÓÃÀ´¶Ô±ÈµÄ³õʼ»¯Êý¾Ý
   */
  const initiateData: Ref<Record<string, any>> = ref({})
  const formData = ref<Record<string, any>>({})
  // ref
  const formRef = ref()

  const disabled = ref(false)

  const current = computed(() => {
    return props.row || null
  })

  
  const datePicker = (attrs) => {
    return (
      <el-date-picker
        type="date"
        format="YYYY-MM-DD HH:mm:ss"
        formatValue="YYYY-MM-DD HH:mm:ss"
        {...attrs}
      ></el-date-picker>
    )
  }
  const inputNumber = (attrs) => {
    return (
      <el-input-number
        min="1"
        step="1"
        precision="0"
        {...attrs}
      ></el-input-number>
    )
  }

  const dateTimePicker = (attrs) => {
    return (
      <el-date-picker
        type="datetime"
        format="YYYY-MM-DD HH:mm:ss"
        formatValue="YYYY-MM-DD HH:mm:ss"
        {...attrs}
      ></el-date-picker>
    )
  }

  const visible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      ctx.emit('update:modelValue', val)
    },
  })
  /**
   * Ìí¼ÓµÄform×Ö¶Î
   */
  const formItems = reactive([
    $PageAddFormAttributes_formItems$
  ])
  /**
   * УÑéÊÇ·ñÓÐÊý¾Ý±ä»¯
   */
  const checkIsEqualObject = () => {
    const data = {
      formData: formData.value,
    }
    const check = isEqual(initiateData.value, data)
    return check
  }

  const onClose = (done: () => void) => {
    if (visible.value) {
      if (checkIsEqualObject()) {
        visible.value = false
        done && done()
      } else {
        ConfirmBox('ÊÇ·ñ±£´æÉèÖã¿')
          .then(() => {
            onConfirm()
          })
          .catch(() => {
            visible.value = false
            done && done()
          })
      }
    }
  }
  /**
   * ±£´æ
   */
  const onConfirm = async () => {
    await formRef.value?.validate()
    const data=extractFormDataForOnConfirm(formData);
    if (!current.value) {
      await $PageMenuInstanceName$Drawer.add$EntityName$(data)
    } else {
      const id = current.value.id
      await $PageMenuInstanceName$Drawer.update$EntityName$(id, data)
    }
    ElMessage.success('±£´æ³É¹¦')
    ctx.emit('confirm')
  }

  const updateCheckData = () => {
    initiateData.value = {
      formData: {
        ...formData.value,
      },
    }
  }
  const updateFormItemOptions = (propName: string, enumData: any[]) => {
    const item = formItems.find((item) => item.prop === propName)
    if (item && enumData) {
      item.options = enumData.map((item) => ({
        label: item.description,
        value: item.value,
      }))
    }
  }
  /**
   * ͨÓòéѯö¾Ù
   */
  const commonQueryEnumForFrom = async () => {
    $CommonQueryEnumForFrom$
  }
  commonQueryEnumForFrom()
  /**
   * µ¯´°´ò¿ª»ñÈ¡ÏêÇé
   */
  const onOpen = async () => {
    if (current.value) {
      const res = await $PageMenuInstanceName$Drawer.get$EntityName$Detail(current.value)

      extractAndAssignFormData(res,formData);
      disabled.value = true
      updateCheckData()
    } else {
      formData.value = {}

      disabled.value = false
      updateCheckData()
    }
  }

  watch(() => current.value, onOpen)

  return {
    formItems,
    formData,
    visible,
    formRef,
    onOpen,
    onClose,
    onConfirm,
  }
}