<template>
    <div class="app-container">
        <page-search :searchFormConfig="searchFormConfig" @resetBtnClick="handleResetClick"
            @queryBtnClick="handleQueryClick" />
        <div class="hy-table">
            <div class="header">
                <div class="title">工单分类报表</div>
                <div class="handler">
                    <slot name="headerHandler"></slot>
                </div>
            </div>
            <el-table ref="tableRef" :key="keyNumber" v-loading="loading" :data="list" border lazy style="width: 100%"
                row-key="type_id" :preserve-expanded-content="false"
                :load="load"
                :tree-props="{ children: 'children', hasChildren: 'hasChild' }">
                <el-table-column prop="type_name" label="工单类型" width="500" align="left" />
                <el-table-column prop="type_count" label="总量" />
                <el-table-column prop="processed" label="已处理量" />
                <el-table-column prop="processedRate" label="完成率" />
                <el-table-column prop="completed" label="完结量" />
                <el-table-column prop="completedRate" label="完结率" />
            </el-table>

        </div>
    </div>
</template>

<script>
import { defineComponent, ref, computed, watch, getCurrentInstance, onMounted } from 'vue'

import PageSearch from '@/components/page-search'

import { searchFormConfig } from './config/search.config'
import { getPageListData } from '@/api/main/system/system'

export default defineComponent({
    name: 'OrderTypeReport',
    components: {
        PageSearch,
    },
    setup () {

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

        // const [pageContentRef, handleResetClick, handleQueryClick] = usePageSearch()

        const list = ref([])
        const params = ref({});
        const keyNumber = ref(0)

        const handleQueryClick = (val) => {
            params.value = val
            list.value = []
            getDatas()
            console.log('handleQueryClick-val', val)
        }

        const handleResetClick = () => {
            params.value = {}
            
            getDatas()
            console.log('handleResetClick')
        }

        const getDatas = () => {
            keyNumber.value++;
            getPageListData('/WorkReport/WorkOrderType', params.value).then(({data}) => {
                if (data?.length) {
                    list.value = data
                } else {
                    list.value = []
                }
            })
        }

        onMounted(() => {
            getDatas()
        })

        const load = (row, treeNode, resolve) => {
            console.log('load', row, treeNode, resolve)
            if (row.type_id) {
                getPageListData('/WorkReport/WorkOrderType', { 
                    ...params.value,
                    ancestor: row.type_id
                 }).then(({data}) => {
                    if (data?.length) {
                        resolve(data)
                    } else {
                        resolve([])
                    }
                })
            }
        }

        return {
            keyNumber,
            load,
            list,
            searchFormConfig,
            handleResetClick,
            handleQueryClick,
        }
    }
})
</script>
<style scoped lang="scss">
.header {
    display: flex;
    padding: 0 5px;
    margin-top: 15px;
    margin-bottom: 15px;
    justify-content: space-between;
    align-items: center;

    .title {
        font-size: 20px;
        font-weight: 700;
    }

    .handler {
        align-items: center;
    }
}

.footer {
    margin-top: 15px;

    .el-pagination {
        text-align: right;
    }
}
</style>