<template>
    <div class="app-container">
        <page-search ref="search" :searchFormConfig="searchFormConfig" @resetBtnClick="handleResetClick"
            @queryBtnClick="handleQueryClick" />

        <page-content ref="pageContentRef" :contentTableConfig="contentTableConfig" pageName="/order/workorder/timeoutlist"
            :isCreate="false" :buttons="['', '导出']" @newBtnClick="handleNewData"
            @editBtnClick="handleEditData"> 

			<template #gd="scope"> 
				<a @click="openModuleList(scope.row, 1)" style="color:blue">{{scope.row['allcount']}} </a> 
			</template>
			<template #yb="scope"> 
				<a @click="openModuleList(scope.row, 2)" style="color:blue">{{scope.row['dealedcount']}} </a> 
			</template>
			<template #yq="scope">
				<a @click="openModuleList(scope.row, 3)" style="color:blue">{{scope.row['timeoutcount']}} </a> 
			</template>

		</page-content>  

		<moduleList 
			v-if="dialogVisible" 
			:config="moduleListConfig" 
			url="/order/workorder/detaillist" 
			:params="moduleListParams" 
			v-model:dialogVisible="dialogVisible"
			title="详 情"
		>
		</moduleList>
    </div>
</template>
  
<script>
import { defineComponent, ref, computed, watch, getCurrentInstance } from 'vue'

import PageSearch from '@/components/page-search'
import PageContent from '@/components/page-content'
import PageModal from '@/components/page-modal'

import { searchFormConfig } from './config/search.config'
import { contentTableConfig } from './config/content.config'
import { usePageSearch } from '@/hooks/use-page-search'
import { usePageModal } from '@/hooks/use-page-modal'
import { modalConfig } from './config/modal.config'


import moduleList from '@/components/workOrder/moduleList'
import { moduleListConfig } from './config/moduleList.config'

export default defineComponent({
    name: 'OrderTypeReport',
    components: {
        PageSearch,
        PageContent,
        PageModal,
		moduleList,
    },
    setup () {
		const dialogVisible = ref(false);

        // 1.处理逻辑
        const newCallback = () => { }
        const editCallback = () => { }

        let [pageContentRef, handleResetClick, handleQueryClick] = usePageSearch()
        const { proxy } = getCurrentInstance()

        const recordData = ref({})
        const open = ref(false)

        const clRowData = ref({})

        // 3.调用hook获取公共变量和函数
        const [pageModalRef, defaultInfo, handleNewData, handleEditData] =
            usePageModal(newCallback, editCallback)

 
		const moduleListParams = ref({});
		const search = ref(''); 

		// 表格搜索方法重构
		{
			let newFn = handleQueryClick.bind();
			handleQueryClick = (data)=>{
				if(data['stime']){
					moduleListParams.value['stime'] = data['stime']
					moduleListParams.value['etime'] = data['etime']
				}
				return newFn(data);
			}
		}
		// 表格重置方法重构
		{
			let newFn = handleResetClick.bind();
			handleResetClick = (data)=>{
				moduleListParams.value = {};
				return newFn(data);
			}
		} 
		function openModuleList (rowData , type){  
			moduleListParams.value = {
				...moduleListParams.value,
				dealdept: rowData.dealdept,
				type,
			} 
			dialogVisible.value = true;
		}

        return {
            modalConfig,
            defaultInfo,
            handleNewData,
            handleEditData,
            pageModalRef,
            clRowData,
            searchFormConfig,
            contentTableConfig,
            pageContentRef,
            handleResetClick,
            handleQueryClick,
            recordData,
            open,
			dialogVisible,
			moduleListConfig,
			search,
			openModuleList,
			moduleListParams
        }
    }
})
</script>
  