<template>
    <Layout>
        <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="searchPlaceholder"
                v-model="searchText"
                @change="searchChange"
                clearable
            >
                <template #prefix>
                    <u-icon name="search"></u-icon>
                </template>
            </u-input>
        </view>
        <w-second-tab
            :tabList="statusTab"
            v-model="activeStatus"
            @changeTab="refreshPage"
            :isClient="0"
            :clientId="clientId"
            :type="activeTab"
            ref="secondTabRef"
            :likeWork="searchText"
        ></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"
                        @refresh="refreshPage"
                    ></InspectionCard>
                    <OverhaulCard
                        v-else-if="activeTab == WorkOrderTypeEnum.OVERHAUL"
                        :item="item"
                        :activeStatus="activeStatus"
                        @refresh="refreshPage"
                    ></OverhaulCard>
                    <RepairCard
                        v-else
                        :item="item"
                        :activeStatus="activeStatus"
                        @refresh="refreshPage"
                    ></RepairCard>
                </block>
                <template #empty>
                    <w-empty />
                </template>
            </z-paging>
        </view>
    </Layout>
</template>

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

const userStore = useUserStore()
const { userInfo } = userStore
const clientId = shallowRef(userInfo.clientId)
const secondTabRef = ref()
const searchText = ref('')
const { tabList, activeTab, statusTab, activeStatus } = useCommon()
const dataList = ref<any>([])
const api = computed(() => {
    return activeTab.value == 1
        ? apiOverhaulPagelist
        : activeTab.value == 2
        ? apiRepairStaffList
        : apiInspectionList
})
const params = computed(() => {
    const payload: any = {
        likeWork: searchText.value,
        isClient: 0,
        clientId: userInfo.clientId
    }
    if (unref(activeTab) == WorkOrderTypeEnum.INSPECTION) {
        payload.orderStatus = activeStatus.value
    } else {
        payload.orderStatusIds = activeStatus.value
    }
    return payload
})

const searchPlaceholder = computed(() => {
    return activeTab.value == 2 ? '工单编号/模块代码' : '工单编号/设备名称'
})

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

const refreshPage = () => {
    setParams(params.value)
    refresh()
}

const searchChange = debounce(() => {
    refreshPage()
}, 300)

const changeTab = async () => {
    activeStatus.value = statusTab.value[0].value
    await nextTick()
    changeApi(api.value)
    refreshPage()
}

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

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