import { computed, defineComponent, onMounted, reactive, ref } from 'vue'
import type { Ref } from 'vue'
import BaseTable from '@/components/Table/Table'
import styles from './$EntityName$.module.scss'
import { use$EntityName$ } from '../../../Controllers/$EntityName$'
import IconButton from '@/components/IconButton/IconButton'
import $EntityName$Drawer from '../Dialog/$EntityName$Drawer/$EntityName$Drawer'
import $EntityName$QueryDrawer from '../Dialog/$EntityName$QueryDrawer/$EntityName$QueryDrawer'
import Search from '@/components/Search/Search'
import { columns } from './Config'
import TdButton from '@/components/TdButton/TdButton'
import { vPermission } from '@/libs/Permission/Permission'
import dayjs from 'dayjs'
import {
  getWmsEnumData
} from '@/widgets/$EntityName$/Models/Service/$EntityName$Drawer'
import {
  ElInput,
  ElSelect,
  ElOption,
  ElDatePicker,
  ElForm,
  ElFormItem,
} from 'element-plus'
import { injectModel } from '@/libs/Provider/Provider'
// ÒýÈ빫¹²Ñ¡ÏîÅäÖà 
import {  
  FILTER_MODE_OPTIONS_STRING_KEY
} from '@/components/DyFormForHighQuery/DyFormForHighQueryOptions'; 
// ÒýÈ빫¹²¸ß¼¶²éѯ¹¤¾ßÎļþ  
import { commonSaveCurHighQueryData,setValueForCurHighQueryData,commonGetHighQueryForm,initQueryForm,GetFilteredData } from '@/utils/myHighQueryUtils'; 

interface RenderTableType {
  url?: string
  dataSource: Ref
  isDrag?: boolean
  isChecked?: boolean
  isHidePagination?: boolean
  params?: Record
  autoHeight?: boolean
}

export default defineComponent({
  name: '$EntityName$',
  directives: {
    permission: vPermission,
  },
  setup(props, ctx) {
    const {
      dataSource,
      contextMenu,
      dialogConfig,
      dialogConfigForQuery,
      tableRef,
      current,
      search,
      sort,
      headers,
      onError,
      onSearch,
      onRowClick,
      onConfirm$EntityName$,
      onCheck,
      onAdd$EntityName$,
      onAdvancedQuery,
      onExport,
      openDetail,
      onSuccess,
      onBeforeUpload,
    } = use$EntityName$(props, ctx)

    //¶¨Òå¸ß¼¶²éѯÒýÓÃ
   const $PageMenuInstanceName$QueryDrawerRef=ref(null);
    
    //¶¨ÒåÕûÌåÄ£ºý²éѯµÄÁÐÊý×é(×¢Ò⣺±ØÐë´óСд¸úºó¶ËµÄʵÌåÀàÊôÐÔÃûÒ»Ö£¬·ñÔò»áµ¼ÖÂÆ¥Åä²»¶ÔµÄÎÊÌâ)
    const _searchFormInputAttrs = ref([
     $LikeQueryAttrs$
    ]);
    const searchFormInputAttrs_Placeholder = ref('$LikeQueryAttrsName$');
    

    // ¶¯Ì¬Ã¶¾ÙÑ¡Ïî
    const enumOptions = reactive({
      $EntityNameClass_enumOptions$
    })

    // »ñȡö¾ÙÊý¾Ý
    const fetchEnumData = async () => {
      try {
        $EntityNameClass_fetchEnumData$
      } catch (error) {
        console.error('»ñȡö¾ÙÊý¾Ýʧ°Ü:', error)
      }
    }

    /*******************************************************[¸ß¼¶²éѯ]¿ªÊ¼********************************************************************************* */
    // ×é¼þ¹ÒÔØʱ»ñȡö¾ÙÊý¾Ý 
    onMounted(() => { 
      fetchEnumData() 
      resetQuery();
    }) 
    // ÐÂÔöµÄ²éѯÌõ¼þ 
    const queryForm = ref({ searchVal: '',str_searchFormInputAttrs:[],searchVal_FilterMode:'' });   
    // ¶¨ÒåÏìӦʽ²éѯÊý¾Ý  
    const _curHighQueryData = ref({ searchVal: '',str_searchFormInputAttrs:[],searchVal_FilterMode:'' });   
    // аæµÄ²éѯ·½·¨£¨Ö÷Ò³ÃæÖеİ´Å¥¡¾²éѯ¡¿£© 
    const handleQueryForMain = async () => { 
      setValueForCurHighQueryData(_curHighQueryData,queryForm,_searchFormInputAttrs); 
      tableRef.value.getList(_curHighQueryData.value) 
    } 
    // аæµÄ²éѯ·½·¨£¨¸ß¼¶²éѯÖеİ´Å¥¡¾²éѯ¡¿£© 
    const handleQuery = async (extraParams = {}) => { 
      let filteredData = GetFilteredData(extraParams,queryForm,_searchFormInputAttrs,_curHighQueryData);
      tableRef.value.getList(filteredData) 
    } 
    // аæµÄ²éѯÖØÖà 
    const resetQuery = () => { 
      initQueryForm(queryForm,_searchFormInputAttrs,FILTER_MODE_OPTIONS_STRING_KEY);
      setValueForCurHighQueryData(_curHighQueryData,queryForm,_searchFormInputAttrs); 
    } 
     //аæµÄµ¼³ö·½·¨ 
     const handleExport=()=>{ 
      onExport(_curHighQueryData.value); 
    } 
    // аæµÄ²éѯµ¯³ö¿ò¹Ø±Õ·½·¨ 
    const closeQuery = (extraParams={}) => { 
      GetFilteredData(extraParams,queryForm,_searchFormInputAttrs,_curHighQueryData);
    } 
    /*******************************************************[¸ß¼¶²éѯ]½áÊø********************************************************************************* */ 

    /**
     * @returns ±í¸ñ
     */
    const RenderBaseTable = (props: RenderTableType) => {
      const {
        url,
        dataSource,
        isDrag,
        isChecked,
        isHidePagination,
        params,
        autoHeight,
      } = props

      return (
        

           {
                return row?.name ? (
                   openDetail(row)}
                    text={ÏêÇé}
                    icon="scale"
                    tip={row?.name}
                    hover
                  >
                    {row?.name}
                  
                ) : (
                  '-'
                )
              },
            }}
          >
        
      )
    }

    return () => {
      return (
        

          {/* Ìí¼Ó/±à¼­ */}
          <$EntityName$Drawer
            v-model={dialogConfig.visible}
            title={dialogConfig.title}
            row={current.value}
            sort={sort.value}
            onConfirm={onConfirm$EntityName$}
          />
          {/* ¸ß¼¶²éѯ */}
          <$EntityName$QueryDrawer
            ref="$PageMenuInstanceName$QueryDrawerRef"
            v-model={dialogConfigForQuery.visible}
            title={dialogConfigForQuery.title}
            row={current.value}
            sort={sort.value}
            onConfirmQuery={handleQuery}
            onRestQuery={resetQuery}
            onClose={closeQuery}
          />

          

            

              
                Ìí¼Ó
              
              

              
                µ¼Èë
              

              
                µ¼³ö
              
            
            
              
                 
                
                
              
               
                   
                                {FILTER_MODE_OPTIONS_STRING_KEY.map((option) => (
                                  
                                ))}
                              
               
              
                ²éѯ
              
              {/* 
                ÖØÖÃ
               */}
              
                ¸ß¼¶²éѯ
              
            
          

          
        
      )
    }
  },
})