<!--
 * @Author: micky
 * @Date: 2024-08-13 09:56:40
 * @LastEditors: micky
 * @LastEditTime: 2024-09-05 15:15:20
 * @FilePath: \chargingpile-uniapp\src\pages\overhaul\task\index.vue
-->
<template>
    <TContainer>
        <view class="relative h-full z-10 flex flex-col">
            <w-navbarComp title="" />
            <w-top-tab :tabList="tabList" v-model="activeTab" @changeTab="changeTab"></w-top-tab>
            <view class="p-3">
                <u-input
                    class="w-full search"
                    placeholder="工单编号/客户名称/设备编号"
                    v-model="searchText"
                    @change="searchChange"
                >
                    <template #prefix>
                        <u-icon name="search"></u-icon>
                    </template>
                </u-input>
            </view>
            <w-second-tab
                :tabList="statusTab"
                v-model="activeStatus"
                @changeTab="changeStatus"
                :type="activeTab"
                ref="secondTabRef"
            ></w-second-tab>
            <view class="order-content flex-1 mt-3 px-2 overflow-auto bg-[#FAFAFE]">
                <z-paging
                    ref="paging"
                    v-model="dataList"
                    @query="queryList"
                    :fixed="false"
                    height="100%"
                >
                    <block v-for="(item, index) in dataList" :key="`${index} + 'unique'`">
                        <InspectionCard
                            v-if="activeTab == WorkOrderTypeEnum.INSPECTION"
                            :item="item"
                            :activeStatus="activeStatus"
                            :activeTab="activeTab"
                            @refresh="refreshPage"
                        ></InspectionCard>
                        <OverhaulCard
                            v-else
                            :item="item"
                            :activeStatus="activeStatus"
                            @refresh="refreshPage"
                        ></OverhaulCard>
                    </block>
                    <template #empty>
                        <w-empty />
                    </template>
                </z-paging>
            </view>
        </view>
        <img src="@/static/images/bg.png" alt="" class="page-bg-img" />
    </TContainer>
</template>

<script setup lang="ts">
import { ref, unref, provide, computed, nextTick } from 'vue'
import { apiOverhaulPagelist, apiInspectionList } from '@/api/overhaul'
import { useZPaging } from '@/hooks/useZPaging'
import { useCommon } from './index'
import { WorkOrderTypeEnum } from '@/enums/businessEnums'
import { debounce } from 'lodash-es'
import { onShow } from '@dcloudio/uni-app'
import InspectionCard from './inspection-card.vue'
import OverhaulCard from './overhaul-card.vue'

const { tabList, activeTab, statusTab, activeStatus } = useCommon()

const secondTabRef = ref()
const searchText = ref('')
const dataList = ref<any>([])
const params = computed(() => {
    const payload: any = {
        likeWork: searchText.value,
        isClient: 1
    }
    if (unref(activeTab) == WorkOrderTypeEnum.INSPECTION) {
        payload.orderStatus = activeStatus.value
    } else {
        payload.orderStatusIds = activeStatus.value
    }
    return payload
})

const { paging, queryList, refresh, changeApi } = useZPaging(
    params.value,
    apiOverhaulPagelist,
    () => {
        secondTabRef?.value.getStatusCount()
    }
)

// 切换巡检单、检修单
const changeTab = async () => {
    activeStatus.value = statusTab.value[0].value
    const api =
        unref(activeTab) == WorkOrderTypeEnum.OVERHAUL ? apiOverhaulPagelist : apiInspectionList
    changeApi(api)
    refreshPage()
    await nextTick()
    secondTabRef.value.getStatusCount()
}
// 切换工单状态的选择
const changeStatus = () => {
    refreshPage()
}
const refreshPage = () => {
    refresh(params.value)
}
// 输入框搜索内容改变
const searchChange = debounce(() => {
    refreshPage()
}, 300)

onShow(() => {
    refreshPage()
})

provide('pool', {
    refreshPage
})
</script>
<style scoped lang="scss">
:deep(.search .u-input) {
    border-color: #0e66fb !important;
}
</style>
