<!--
 * @Author: micky
 * @Date: 2024-08-13 19:19:02
 * @LastEditors: micky
 * @LastEditTime: 2024-08-31 00:06:20
 * @FilePath: \chargingpile-uniapp\src\bundle\pages\overhaul\module-return-detail.vue
-->
<template>
    <w-page-common btnText="" @submit="handleSubmit" :needPadding="false">
        <TCard title="基本信息">
            <view class="c-form-item-wrapper">
                <view class="item">
                    <view>工单编号</view>
                    <view>{{ formData.orderNo }}</view>
                </view>
                <w-client-device-info :formData="formData" />
                <view class="item">
                    <view>送修人</view>
                    <view>{{ formData.receiverName }}</view>
                </view>
            </view>
        </TCard>
        <TCard title="返修申请信息" :cardStyle="{ marginTop: '15px' }">
            <view class="c-form-item-wrapper">
                <view class="item">
                    <view>优先级</view>
                    <view :style="{ color: priorityColor[maintenanceRepair?.priority] }">
                        {{ priorityMap[maintenanceRepair?.priority] }}
                    </view>
                </view>
                <view class="item">
                    <view>物流方式</view>
                    <view>{{ logisticsModeMap[maintenanceRepair.logisticsMode] || '--' }}</view>
                </view>
                <view class="item" v-if="maintenanceRepair.expressName">
                    <view>物流公司</view>
                    <view>{{ maintenanceRepair.expressName || '--' }}</view>
                </view>
                <view class="item" v-if="maintenanceRepair.expressNo">
                    <view>快递单号</view>
                    <view>{{ maintenanceRepair.expressNo || '--' }}</view>
                </view>
                <view class="item">
                    <view>是否回寄</view>
                    <view :style="{ color: yesOrNoColor[maintenanceRepair.isReturn] }">
                        {{ yesOrNoMap[maintenanceRepair.isReturn] || '--' }}
                    </view>
                </view>
                <template v-if="maintenanceRepair.isReturn == YesOrNoEnum.YES">
                    <view class="item">
                        <view>回寄地址</view>
                        <view>{{ maintenanceRepair.addressDetail || '--' }}</view>
                    </view>
                    <view class="item">
                        <view>收件人</view>
                        <view>{{ maintenanceRepair.receiver || '--' }}</view>
                    </view>
                    <view class="item">
                        <view>联系方式</view>
                        <view>{{ maintenanceRepair.receiverPhone || '--' }}</view>
                    </view>
                </template>

                <view class="item">
                    <view>故障描述</view>
                    <view>{{ maintenanceRepair.faultDescription || '--' }}</view>
                </view>
                <view class="item">
                    <view>备注</view>
                    <view>{{ maintenanceRepair.remark || '--' }}</view>
                </view>
                <view class="item">
                    <view>创建时间</view>
                    <view>{{ maintenanceRepair.createTime || '--' }}</view>
                </view>
            </view>
        </TCard>
        <TCard title="模块明细" :cardStyle="{ marginTop: '15px' }">
            <view class="c-form-item-wrapper pb-3">
                <view class="item">
                    <view>模块代码</view>
                    <view>
                        {{ maintenanceRepair?.moduleNo }}
                    </view>
                </view>
                <view class="item">
                    <view>品牌</view>
                    <view>{{ maintenanceRepair?.brand }}</view>
                </view>
            </view>
            <view class="font-bold pl-[32rpx] pt-[32rpx]">模块整体图片</view>
            <view class="mx-3 px-[12rpx]">
                <w-image-list class="flex-1" :imgStr="maintenanceRepair?.moduleImg"></w-image-list>
            </view>
        </TCard>
        <template #btn></template>
    </w-page-common>
</template>

<script setup lang="ts">
import {
    yesOrNoColor,
    yesOrNoMap,
    priorityColor,
    priorityMap,
    logisticsModeMap,
    YesOrNoEnum
} from '@/enums/businessEnums'
import { onLoad } from '@dcloudio/uni-app'
import { apiOverhaulDetail } from '@/api/overhaul'
import { ref, unref } from 'vue'

const formData = ref<any>({})
const maintenanceRepair = ref<any>({})
const orderId = ref('')
const handleSubmit = () => {}

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

onLoad(option => {
    orderId.value = option.id as string
    getDetail()
})
</script>
<style scoped lang="scss">
.list {
    @apply m-4 border border-[#E7E7E7] rounded-md w-[700rpx] min-h-[140rpx];
    .header,
    .data {
        @apply flex;
        text {
            @apply mb-1;
        }
    }
    .header {
        @apply h-[34px] leading-[34px] pl-1 border-b border-[#E7E7E7];
    }
    .data {
        @apply pl-1 h-[45px] leading-[45px];
    }
}
</style>
