<!--
 * @Author: micky
 * @Date: 2024-08-13 19:19:02
 * @LastEditors: micky
 * @LastEditTime: 2024-10-31 20:08:54
 * @FilePath: \chargingpile-uniapp\src\bundle\pages\spareParts\detail.vue
-->
<template>
    <w-page-common :btnText="btnText" @submit="show = true">
        <TCard title="进度跟踪">
            <view class="c-form-item-wrapper pb-4">
                <view class="item !items-center">
                    <view class="label">状态</view>
                    <view
                        :style="{
                            background: receiveFlowColor[sparePartStockAudit.receiveStatus]
                        }"
                        class="px-2 py-1 text-white rounded-md !flex-none"
                    >
                        {{ receiveFlowMap[sparePartStockAudit.receiveStatus] }}
                    </view>
                </view>
            </view>
        </TCard>
        <TCard title="基本信息" :cardStyle="{ marginTop: '15px' }">
            <view class="c-form-item-wrapper pb-4 base-info">
                <view class="item">
                    <view>领用单编号</view>
                    <view>{{ sparePartStockAudit.receiptNumber }}</view>
                </view>
                <view class="item">
                    <view>申请时间</view>
                    <view>{{ sparePartStockAudit.createTime }}</view>
                </view>
                <view class="item">
                    <view>收件方式</view>
                    <view>{{ deliveryMethodMap[sparePartStockAudit.deliveryMethod] }}</view>
                </view>
                <template v-if="sparePartStockAudit.deliveryMethod != DeliveryMethodEnum.VISIT">
                    <view class="item">
                        <view>收件地址</view>
                        <view>{{ sparePartStockAudit.shippingAddress }}</view>
                    </view>
                    <view class="item">
                        <view>物流公司</view>
                        <view>{{ sparePartStockAudit.logisticsCompany }}</view>
                    </view>
                    <view class="item">
                        <view>快递单号</view>
                        <view>{{ sparePartStockAudit.trackingNumber }}</view>
                    </view>
                    <view class="item">
                        <view>联系方式</view>
                        <view>{{ sparePartStockAudit.phone }}</view>
                    </view>
                </template>

                <view class="item">
                    <view>备注</view>
                    <view>{{ sparePartStockAudit.remark }}</view>
                </view>
            </view>
        </TCard>
        <TCard title="配件清单" :cardStyle="{ marginTop: '15px', paddingBottom: '12px' }">
            <view class="list">
                <view class="header">
                    <text class="flex-1">配件名称</text>
                    <text class="w-[35%] text-center">数量</text>
                </view>

                <view class="data" v-for="(item, index) in formData.sparePartList" :key="index">
                    <text class="flex-1">{{ item.sparePartsName }}</text>
                    <text class="w-[35%] text-center">{{ item.count }}</text>
                </view>
            </view>
        </TCard>
        <w-confirm-popup contentText="是否确认收货？" v-model="show" @confirm="confirmReceive" />
    </w-page-common>
</template>

<script setup lang="ts">
import {
    receiveFlowMap,
    receiveFlowColor,
    WorkOrderTypeEnum,
    deliveryMethodMap,
    DeliveryMethodEnum,
    ReceiveFlowEnum
} from '@/enums/businessEnums'
import { computed, ref, unref } from 'vue'
import { apiOverhaulDetail, apiConfirmReceive } from '@/api/overhaul'
import { apiRepairDetail, apiConfirmGet } from '@/api/repair'
import { onLoad } from '@dcloudio/uni-app'
import { toast } from '@/utils/util'

const orderId = ref('')
const type = ref('')
const show = ref(false)
const formData = ref<any>({})
const sparePartStockAudit = ref<any>({})

const btnText = computed(() => {
    return sparePartStockAudit.value.receiveStatus == ReceiveFlowEnum.COMPLETE ? '' : '确认收货'
})
const confirmReceive = async () => {
    if (sparePartStockAudit.value.receiveStatus != ReceiveFlowEnum.TOCONFIRM) {
        return toast('当前状态不能确认收货')
    }
    const api = unref(type) == WorkOrderTypeEnum.OVERHAUL + '' ? apiConfirmReceive : apiConfirmGet
    await api({ id: unref(orderId) })
    toast('已确认收货')
    uni.navigateBack()
}

const getDetail = async () => {
    const api = unref(type) == WorkOrderTypeEnum.OVERHAUL + '' ? apiOverhaulDetail : apiRepairDetail
    const res = await api({ id: unref(orderId) })
    formData.value = res
    sparePartStockAudit.value = res?.sparePartStockAudit
}
onLoad(options => {
    orderId.value = options.id as string
    type.value = options.type as string
    getDetail()
})
</script>
<style scoped lang="scss">
.list {
    @apply m-4 border border-[#d6d6d6] rounded-sm min-h-[140rpx];
    .header,
    .data {
        @apply flex text-[28rpx] border-b border-[#d6d6d6];
        text {
            @apply mb-1 pl-1;
        }
    }
    .data:last-of-type {
        @apply border-none;
    }
    .header text {
        @apply h-[68rpx] leading-[68rpx];
    }
    .data text {
        @apply h-[90rpx] leading-[90rpx];
    }
}
.base-info {
    margin-top: 12rpx;
    .item {
        view {
            &:nth-child(1) {
                width: 200rpx;
            }
        }
    }
}
</style>
