<template>
    <view class="second-tab">
        <u-tabs
            :list="tabList"
            itemStyle="height:100rpx;flex:1;white-space:nowrap;gap: 20rpx;padding: 0"
            :activeStyle="{ backgroundColor: '#0E66FB', color: '#fff' }"
            :lineWidth="0"
            :scrollable="scrollable"
            keyName="label"
            @change="changTab"
        >
            <template #content="{ item, keyName, index }">
                <view class="item1" :class="tabList[index].value == activeTab ? 'active' : ''">
                    <view class="name">
                        <view>{{ statisticArr[index] ?? 0 }}</view>
                        <view class="text-sm">{{ item.label }}</view>
                    </view>
                </view>
            </template>
        </u-tabs>
    </view>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { apiOrderStatusCount } from '@/api/repair'
import { apiOverhaulStatusCount, apiInsptectStatusCount } from '@/api/overhaul'
import { WorkOrderTypeEnum } from '@/enums/businessEnums'

interface Item {
    label: string
    value: number
}
const emits = defineEmits(['update:modelValue', 'changeTab'])
const props = withDefaults(
    defineProps<{
        modelValue: any
        tabList: Item[]
        type: number
        isClient?: number
        clientId?: number
        likeWork?: string
    }>(),
    {
        tabList: [],
        type: 1,
        isClient: 1
    }
)
const statisticArr = ref<number[]>([])
const scrollable = computed(() => props.tabList.length > 5)
const activeTab = ref<number | string>(0)

const changTab = item => {
    const { index } = item
    const selectedVal = props.tabList[index].value
    activeTab.value = selectedVal
    emits('update:modelValue', selectedVal)
    emits('changeTab', selectedVal)
}

const getApi = () => {
    return props.type == WorkOrderTypeEnum.INSPECTION
        ? apiInsptectStatusCount
        : props.type == WorkOrderTypeEnum.OVERHAUL
        ? apiOverhaulStatusCount
        : apiOrderStatusCount
}

const repairFieldMap = [
    'pendingOrderCount',
    'waitingRepairCount',
    'underInvestigationCount',
    'inReview',
    'inMaintenanceCount',
    'testInProcessCount',
    'completedCount'
]

const getStatusCount = async () => {
    const api = getApi()
    const params = {
        isClient: props.isClient,
        likeWork: props.likeWork
    }
    if (props.clientId) params.clientId = props.clientId
    const res = await api(params)
    if (props.type == WorkOrderTypeEnum.INSPECTION) {
        statisticArr.value[0] = res.pendingOrderCount || 0
        statisticArr.value[1] = res.toBeInspectedCount || 0
        statisticArr.value[2] = res.duringInspectionCount || 0
        statisticArr.value[3] = res.completedCount || 0
    } else if (props.type == WorkOrderTypeEnum.OVERHAUL) {
        statisticArr.value[0] = res.pendingOrderCount || 0
        statisticArr.value[1] = res.checkingCount || 0
        statisticArr.value[2] = res.toBeConfirmedCount || 0
        statisticArr.value[3] = res.inMaintenanceCount || 0
        statisticArr.value[4] = res.completedCount || 0
    } else {
        const flag = props.tabList.findIndex(item => item.value == 0)
        let list: string[] = []
        if (flag == -1) {
            list = repairFieldMap.slice(1)
        } else {
            list = repairFieldMap
        }

        const arr = new Array(list.length)
        for (let i = 0; i < arr.length; i++) {
            statisticArr.value[i] = res[list[i]] || 0
        }
    }
}

watch(
    () => props.modelValue,
    val => {
        activeTab.value = val
    },
    {
        immediate: true
    }
)

defineExpose({
    getStatusCount
})
</script>
<style scoped lang="scss">
.second-tab {
    @apply relative h-[100rpx] flex gap-[20rpx] px-[24rpx];
    height: 100%;
    overflow-x: auto;
    .item1 {
        width: 100%;
        @apply text-center relative flex justify-center items-center;
        &.active {
            @apply bg-primary text-white rounded-[12rpx];
        }
        .name {
            @apply px-2 py-1;
        }
    }
    u-tabs {
        width: 100%;
    }
}
</style>
