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 { 
  FILTER_MODE_OPTIONS_STRING, 
  FILTER_MODE_OPTIONS_NUM,
  FILTER_MODE_OPTIONS_BOOL
} from '@/components/DyFormForHighQuery/DyFormForHighQueryOptions';
import { 
  BOOLEAN_OPTIONS
} from '@/utils/commonOptionConstants';

export const use$EntityName$QueryDrawer = (props: any, ctx?: any) => {
  const $PageMenuInstanceName$Drawer = injectModel<$EntityName$Drawer>('$EntityName$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 inputNumber = (attrs) => {
    return (
      <el-input-number
        min="1"
        step="1"
        precision="0"
        {...attrs}
      ></el-input-number>
    )
  }

    const datePickerRange = (attrs) => {
    return (
      <el-date-picker
        type="daterange"
        value-format="YYYY-MM-DD HH:mm:ss"
        start-placeholder="¿ªÊ¼ÈÕÆÚ"
        end-placeholder="½áÊøÈÕÆÚ"
        {...attrs}
      ></el-date-picker>
    )
  }

  const dateTimePickerRange = (attrs) => {
    return (
      <el-date-picker
        type="datetimerange"
        value-format="YYYY-MM-DD HH:mm:ss"
        start-placeholder="¿ªÊ¼ÈÕÆÚ"
        end-placeholder="½áÊøÈÕÆÚ"
        {...attrs}
      ></el-date-picker>
    )
  }

  const visible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      ctx.emit('update:modelValue', val)
    },
  })
  /**
   * ¸ß¼¶²éѯµÄform×Ö¶Î
   */
  const formItems = reactive([
    $PageAddFormAttributes_Query$
  ])
  /**
   * УÑéÊÇ·ñÓÐÊý¾Ý±ä»¯
   */
  const checkIsEqualObject = () => {
    const data = {
      formData: formData.value,
    }
    const check = isEqual(initiateData.value, data)
    return check
  }
  /**
 * »ñÈ¡±íµ¥Êý¾Ý - ÓÅ»¯°æ
 */
const commonGetFormData = () => {
  const data = {};
  
  // ±éÀú±íµ¥ÅäÖÃÊÕ¼¯Êý¾Ý
  formItems.forEach(item => {
    // ÊÕ¼¯»ù´¡×Ö¶Î
    data[item.prop] = formData.value[item.prop] || '';
    
    // ÊÕ¼¯¹ýÂËģʽ×Ö¶Î
    if (item.highSelectAttrs && item.highSelectAttrs.prop) {
      const filterModeProp = item.highSelectAttrs.prop;
      data[filterModeProp] = formData.value[filterModeProp] || '';
    }
  });
  
  return data;
}
  const onClose = (done: () => void) => {
    if (visible.value) {
      visible.value = false
      const data =commonGetFormData();
      ctx.emit('close', data)
    }
  }
  /**
   * È·Èϲéѯ
   */
  const onConfirmQuery = async () => {
    const data =commonGetFormData();
    ctx.emit('confirmQuery', data)
  }
  /** 
   * ÖØÖù«¹²select²éѯ 
   */ 
  const onResetForHighSelect = () => {  
      // ±éÀúËùÓÐ±íµ¥×ֶΠ 
      formItems.forEach(item => {  
        // ¼ì²é×Ö¶ÎÊÇ·ñÓи߼¶²éѯµÄ¹ýÂËģʽÅäÖà  
        if (item.highSelectAttrs && item.highSelectAttrs.prop) {  
          const filterModeProp = item.highSelectAttrs.prop;  
          const options = item.highSelectAttrs.options || [];  
      
          // Èç¹û´æÔÚÑ¡ÏÔòÉèÖÃΪµÚÒ»¸öÑ¡ÏîµÄÖµ  
          if (options.length > 0) {  
            // ¼ÙÉèÑ¡Ïî¸ñʽΪ { value, label } »òÀàËƽṹ  
            const firstValue = options[0].value !== undefined ? options[0].value : options[0];  
            formData.value[filterModeProp] = firstValue;  
          }  
        }  
      });  
  }  
    /**
    * ÖØÖòéѯ - ÓÅ»¯°æ
    */
    const onReset = async () => {
        // 1. Çå¿ÕËùÓлù´¡×ֶΣ¨²»°üº¬¹ýÂËģʽ×ֶΣ©
        const baseFields = formItems.reduce((acc, item) => {
        acc[item.prop] = '';
        return acc;
        }, {});
  
        // 2. Ó¦Óûù´¡×ֶγõʼֵ
        formData.value = { ...baseFields };
  
        // 3. ʹÓÃÔ­Óз½·¨ÖØÖùýÂËģʽ×Ö¶Î
        onResetForHighSelect(); // ±£ÁôÔ­Óз½·¨µ÷ÓÃ
  
        // 4. Ïò¸¸×é¼þ·¢ËÍ×Ô¶¨Òåʼþ
        ctx.emit('restQuery');
    }

  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()
  onResetForHighSelect();//ÖØÖù«¹²select²éѯ 
  /**
   * µ¯´°´ò¿ª»ñÈ¡ÏêÇé
   */
  const onOpen = async () => {
    disabled.value = false
    updateCheckData()
  }

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

  return {
    formItems,
    formData,
    visible,
    formRef,
    onOpen,
    onClose,
    onConfirmQuery,
    onReset,
  }
}