<template>
    <TContainer>
        <view class="relative h-full z-10 flex flex-col">
            <w-navbarComp title="工单" />
            <view class="p-3">
                <u-input
                    class="w-full search"
                    placeholder="工单编号/客户名称/模块代码"
                    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="changeStatus"
                :type="WorkOrderTypeEnum.REPAIR"
                ref="secondTabRef"
                :isClient="1"
                :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'`">
                        <w-order-card>
                            <template #title>
                                <view class="flex justify-between relative">
                                    <view @click="toPage(item.id)">
                                        工单编号：{{ item.orderNo }}
                                    </view>
                                    <template v-if="activeStatus == RepairOrderStatusEnum.INREVIEW">
                                        <view
                                            v-if="
                                                item.reviewRequest ==
                                                AuditItemsClassifyEnum.MATERIAL
                                            "
                                            class="audit-status"
                                            :style="{
                                                color: materialApplyStatusColor[item.auditStatus],
                                                background:
                                                    materialApplyStatusBgColor[item.auditStatus]
                                            }"
                                        >
                                            {{ materialApplyStatusMap[item.auditStatus] }}
                                        </view>
                                        <view
                                            v-else
                                            class="audit-status"
                                            :style="{
                                                color: RepaireOrderAuditStatusColor[
                                                    item.auditStatus
                                                ],
                                                background:
                                                    RepaireOrderAuditStatusBgColor[item.auditStatus]
                                            }"
                                        >
                                            {{ RepaireOrderAuditStatusMap[item.auditStatus] }}
                                        </view>
                                    </template>
                                </view>
                            </template>
                            <template #content>
                                <view class="order-content-wrapper" @click="toPage(item.id)">
                                    <view>
                                        <text>客户名称</text>
                                        <text>{{ item.clientName }}</text>
                                    </view>
                                    <view>
                                        <text>模块代码</text>
                                        <text>{{ item.moduleCode }}</text>
                                    </view>
                                    <view>
                                        <text>模块型号</text>
                                        <text>{{ item.moduleNumber }}</text>
                                    </view>
                                    <view>
                                        <text>功率</text>
                                        <text>{{ parseModulePower(item.modulePower) }}</text>
                                    </view>
                                    <template
                                        v-if="
                                            activeStatus == RepairOrderStatusEnum.INREVIEW &&
                                            item.scrapOrNot != null
                                        "
                                    >
                                        <view>
                                            <text>排查结果</text>
                                            <text
                                                :style="{
                                                    color: checkResultColor[item.scrapOrNot]
                                                }"
                                            >
                                                {{ checkResultMap[item.scrapOrNot] }}
                                            </text>
                                        </view>
                                        <template
                                            v-if="
                                                item.repaireOrderAuditStatus ==
                                                MaterialApplyStatusEnum.NOPASS
                                            "
                                        >
                                            <view>
                                                <text>审核结果</text>
                                                <text class="text-error">审核不通过</text>
                                            </view>
                                            <view>
                                                <text>审核意见</text>
                                                <text>{{ item.auditOpinion }}</text>
                                            </view>
                                        </template>
                                    </template>
                                    <view v-if="activeStatus == RepairOrderStatusEnum.COMPLETE">
                                        <text>维修结果</text>
                                        <text
                                            :style="{
                                                color: checkResultColor[item.maintenanceResult]
                                            }"
                                        >
                                            {{
                                                getDictName(
                                                    dictData.repairConclusion,
                                                    item?.maintenanceResult
                                                )
                                            }}
                                        </text>
                                    </view>
                                    <view v-if="item.returning == YesOrNoEnum.YES">
                                        <text>是否退仓</text>
                                        <text class="text-[#FDBA33]">是</text>
                                    </view>
                                    <view v-else-if="item.feedingOrNot == YesOrNoEnum.YES">
                                        <text>补料中</text>
                                        <text class="text-warning">是</text>
                                    </view>
                                    <view v-if="item.orderAccomplishTime">
                                        <text>完成时间</text>
                                        <text>{{ item.orderAccomplishTime }}</text>
                                    </view>
                                </view>
                            </template>
                            <template #btns>
                                <CardBtn
                                    :item="item"
                                    @refresh="refreshPage"
                                    pageType="card"
                                    pageSource="1"
                                />
                            </template>
                        </w-order-card>
                    </block>
                    <template #empty>
                        <w-empty />
                    </template>
                </z-paging>
            </view>
            <view class="px-[32rpx] py-[20rpx] bg-white flex justify-between gap-4">
                <!-- <u-button
                    type="primary"
                    shape="circle"
                    :plain="true"
                    class="create-order"
                    @click="materialApply"
                >
                    补料申请
                </u-button> -->
                <u-button type="primary" shape="circle" class="create-order" @click="returnApply">
                    退仓申请
                </u-button>
            </view>
        </view>
        <img src="@/static/images/bg.png" alt="" class="page-bg-img" />
    </TContainer>
</template>

<script setup lang="ts">
import { ref, provide, computed, nextTick } from 'vue'
import { apiRepairStaffList } from '@/api/repair'
import { useZPaging } from '@/hooks/useZPaging'
import { optionsMap } from '@/config/options'
import CardBtn from '@/components/order-button/repair-btn.vue'
import {
    WorkOrderTypeEnum,
    RepairOrderStatusEnum,
    checkResultColor,
    checkResultMap,
    AuditItemsClassifyEnum,
    RepaireOrderAuditStatusMap,
    RepaireOrderAuditStatusColor,
    RepaireOrderAuditStatusBgColor,
    materialApplyStatusMap,
    materialApplyStatusColor,
    materialApplyStatusBgColor,
    MaterialApplyStatusEnum,
    YesOrNoEnum
} from '@/enums/businessEnums'
import { debounce } from 'lodash-es'
import { onShow } from '@dcloudio/uni-app'
import cache from '@/utils/cache'
import { DCPFC, SPAREPARTS } from '@/enums/cacheEnums'
import { useModulePower } from '@/hooks/useLockFn'
import { useDictData, getDictName } from '@/hooks/useDictOptions'

const statusTab = optionsMap.repairStatusOptions
const activeStatus = ref<any>(statusTab[0]?.value)
const secondTabRef = ref()
const searchText = ref('')
const dataList = ref<any>([])

const params = computed(() => {
    const payload: any = {
        likeWork: searchText.value,
        isClient: 1, //客户：0；维修员：1
        orderStatusIds: activeStatus.value
    }
    return payload
})
const { paging, queryList, refresh } = useZPaging(params.value, apiRepairStaffList, () => {
    secondTabRef?.value.getStatusCount()
})

const { dictData }: { dictData: any } = useDictData(['repairConclusion'])

const { parseModulePower } = useModulePower()
const toPage = id => {
    uni.navigateTo({
        url: `/bundle/pages/repair/order-detail?id=${id}&pageSource=1`
    })
}
// 领料申请
// const materialApply = () => {
//     uni.navigateTo({
//         url: `/bundle/pages/scan/scan?type=5`
//     })
// }
// 退仓申请
const returnApply = () => {
    uni.navigateTo({
        url: `/bundle/pages/scan/scan?type=4`
    })
}

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

// 切换工单状态的选择
const changeStatus = () => {
    refreshPage()
}

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

onShow(async () => {
    await nextTick()
    refreshPage()
    cache.set(DCPFC, {
        list: [],
        moduleCode: ''
    })
    cache.set(SPAREPARTS, [])
})

provide('pool', {
    refreshPage
})
</script>
<style scoped lang="scss">
:deep(.search .u-input) {
    border-color: #0e66fb !important;
}
.create-order {
    @apply flex-1;
    :deep(button) {
        @apply h-[40px];
    }
}
.audit-status {
    @apply absolute -right-[18rpx] top-0  px-[24rpx] h-[60rpx] leading-[60rpx] text-[28rpx];
    border-top-right-radius: 16rpx;
    border-bottom-left-radius: 16rpx;
}
</style>
