<!--
 * @Author: micky
 * @Date: 2024-08-15 20:04:50
 * @LastEditors: micky
 * @LastEditTime: 2024-08-30 20:17:01
 * @FilePath: \chargingpile-uniapp\src\bundle\pages\repair\pool-detail.vue
-->
<template>
    <w-page-common
        btnText="抢单"
        @submit="popupShow = true"
        :customStyle="{ paddingLeft: 0, paddingRight: 0 }"
    >
        <view class="icon-field">
            <TIcon name="icon-solid-time" size="40" color="#0E66FB"></TIcon>
            <view class="mt-2">维修单</view>
        </view>
        <view class="c-form-item-wrapper">
            <view class="item">
                <view>工单编号</view>
                <view>
                    {{ formData.orderNo }}
                </view>
            </view>
            <w-client-device-info :formData="formData" :needClient="false" />
            <view class="item">
                <view>创建人</view>
                <view>
                    {{ formData.creatorName }}
                </view>
            </view>
            <view class="item">
                <view>创建时间</view>
                <view>
                    {{ formData.createTime }}
                </view>
            </view>
            <view class="item">
                <view>模块代码</view>
                <view>
                    {{ formData.moduleNumber }}
                </view>
            </view>
            <view class="item">
                <view>品牌</view>
                <view>
                    {{ formData.brand }}
                </view>
            </view>
            <view class="item">
                <view>是否回寄</view>
                <view :style="{ color: yesOrNoColor[formData.returnOrNot] }">
                    {{ yesOrNoMap[formData.returnOrNot] }}
                </view>
            </view>
            <template v-if="formData.returnOrNot == YesOrNoEnum.YES">
                <view class="item">
                    <view>回寄地址</view>
                    <view>
                        {{ returnAddress }}
                    </view>
                </view>
                <view class="item">
                    <view>联系人</view>
                    <view>
                        {{ formData?.address.contact || '--' }}
                    </view>
                </view>
                <view class="item">
                    <view>联系电话</view>
                    <view>
                        {{ formData?.address?.mobile }}
                    </view>
                </view>
            </template>
            <view class="item">
                <view>故障描述</view>
                <view>
                    {{ formData.faultDescription }}
                </view>
            </view>
            <view class="item">
                <view>备注</view>
                <view>
                    {{ formData.remark }}
                </view>
            </view>
            <view class="item">
                <view class="!w-[200rpx]">模块整体图片</view>
                <w-image-list class="flex-1" :imgStr="formData.siteImg" />
            </view>
        </view>
        <w-confirm-popup
            contentText="确认抢单吗？"
            v-model="popupShow"
            @confirm="confirmTakeOrder"
        />
    </w-page-common>
</template>

<script setup lang="ts">
import { computed, ref, unref } from 'vue'
import { apiRepairGrabOrder, apiRepairDetail } from '@/api/repair'
import { yesOrNoMap, yesOrNoColor, YesOrNoEnum } from '@/enums/businessEnums'
import { onLoad } from '@dcloudio/uni-app'
import { toast } from '@/utils/util'

const popupShow = ref(false)
const orderId = ref('')
const formData = ref()
const confirmTakeOrder = async () => {
    await apiRepairGrabOrder({ id: unref(orderId) })
    toast('抢单成功')
    setTimeout(() => {
        uni.navigateBack({ delta: 1 })
    }, 300)
}

const returnAddress = computed(() => {
    try {
        const { province, city, district, address } = formData.value.address
        return `${province}${city}${district}${address}`
    } catch {
        return '--'
    }
})

const getDetail = async () => {
    const res = await apiRepairDetail({ id: unref(orderId) })
    formData.value = res
}

onLoad(options => {
    orderId.value = options.id as string
    getDetail()
})
</script>
<style scoped lang="scss">
.icon-field {
    @apply pt-[48px] pb-[15px] flex flex-col justify-center items-center;
}
</style>
