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<any[]>
  isDrag?: boolean
  isChecked?: boolean
  isHidePagination?: boolean
  params?: Record<string, any>
  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 (
        <div
          class={{
            [styles.$PageMenuInstanceName$List]: true,
          }}
        >
          <BaseTable
            ref={tableRef}
            url={url}
            sortUrlTpl="/api/v1/$NameSpacePath$/$PageMenuInstanceName$/{id}/adjustsort/{sort}"
            v-model:dataSource={dataSource.value}
            columns={columns}
            contextMenu={contextMenu}
            params={params}
            isDrag={isDrag}
            isChecked={isChecked}
            autoHeight={autoHeight}
            onCheck={onCheck}
            onRowClick={onRowClick}
            isHidePagination={isHidePagination}
            pageSize={20}
            v-slots={{
              $QueryTableListForBool$
              name: ({ row }: any) => {
                return row?.name ? (
                  <TdButton
                    onClick={() => openDetail(row)}
                    text={<span style="color:#5a84ff">ÏêÇé</span>}
                    icon="scale"
                    tip={row?.name}
                    hover
                  >
                    {row?.name}
                  </TdButton>
                ) : (
                  '-'
                )
              },
            }}
          ></BaseTable>
        </div>
      )
    }

    return () => {
      return (
        <div class={styles.$PageMenuInstanceName$Content}>
          {/* Ìí¼Ó/±à¼­ */}
          <$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}
          />

          <div class={styles.headerContent}>
            <div class={styles.header}>
              <IconButton
                v-permission="$PageMenuInstanceName$-add"
                icon="add-p"
                onClick={onAdd$EntityName$}
                type="primary"
              >
                Ìí¼Ó
              </IconButton>
              <el-divider direction="vertical" />

              <el-upload
                v-permission="$PageMenuInstanceName$-import"
                name="file"
                accept=".xlsx,.xls,.csv"
                show-file-list={false}
                onError={onError}
                onSuccess={onSuccess}
                before-upload={onBeforeUpload}
                headers={headers.value}
                action="/api/v1/$NameSpacePath$/$PageMenuInstanceName$/import"
              >
                <IconButton icon="in">µ¼Èë</IconButton>
              </el-upload>

              <IconButton
                v-permission="$PageMenuInstanceName$-output"
                icon="out"
                onClick={handleExport}
              >
                µ¼³ö
              </IconButton>
            </div>
            <ElFormItem style={{ marginTop: '15px' }}>
              <ElFormItem label="¹Ø¼ü×Ö">
                 <el-tooltip
                  class="box-item"
                  effect="dark"
                  content={searchFormInputAttrs_Placeholder.value}
                  placement="top-start"
                >
                <ElInput
                  v-model={queryForm.value.searchVal}
                  placeholder={searchFormInputAttrs_Placeholder.value}
                  clearable
                  class={styles.formItem}
                />
                </el-tooltip>
              </ElFormItem>
              <ElFormItem label="" style="width:100px;"> 
                   <ElSelect
                                v-model={queryForm.value.searchVal_FilterMode}
                                placeholder="ÇëÑ¡Ôñ"
                                class={styles.formItem}
                              >
                                {FILTER_MODE_OPTIONS_STRING_KEY.map((option) => (
                                  <ElOption
                                    key={option.value}
                                    label={option.label}
                                    value={option.value}
                                  />
                                ))}
                              </ElSelect>
              </ElFormItem> 
              <IconButton type="primary" icon="search" onClick={handleQueryForMain}>
                ²éѯ
              </IconButton>
              {/* <IconButton style="" icon="refresh" onClick={resetQuery}>
                ÖØÖÃ
              </IconButton> */}
              <IconButton
                v-permission="$PageMenuInstanceName$-add"
                icon="search"
                onClick={onAdvancedQuery}
                type="primary"
              >
                ¸ß¼¶²éѯ
              </IconButton>
            </ElFormItem>
          </div>

          <RenderBaseTable
            url="/api/v1/$NameSpacePath$/$PageMenuInstanceName$/page"
            dataSource={dataSource}
            isChecked={true}
            isDrag={true}
          />
        </div>
      )
    }
  },
})