<template>
    <w-page-common>
        <TCard>
            <view class="icon-field">
                <TIcon
                    :name="
                        formData.orderStatus == InspectWorkOrderStatusEnum.COMPLETE
                            ? 'icon-xuanze'
                            : 'icon-solid-time'
                    "
                    :size="40"
                    :color="computedColor"
                ></TIcon>
                <view class="mt-2">
                    {{ inspectWorkOrderStatusMap[formData.orderStatus] }}
                </view>
            </view>
            <view class="c-form-item-wrapper py-[24rpx]">
                <view class="item">
                    <view>工单编号</view>
                    <view>
                        {{ formData.orderNo || '--' }}
                    </view>
                </view>
                <w-client-device-info :formData="formData" :needMoreDeviceInfo="true" />
                <view class="item">
                    <view>创建时间</view>
                    <view>{{ formData.createTime || '--' }}</view>
                </view>
                <view class="item" v-if="formData.remark">
                    <view>创建备注</view>
                    <view>{{ formData.remark }}</view>
                </view>
                <template v-if="formData.receiverName">
                    <view class="item">
                        <view>接单人</view>
                        <view>
                            {{ formData.receiverName || '--' }}
                        </view>
                    </view>
                    <view class="item">
                        <view>接单时间</view>
                        <view>
                            {{ formData.receiverTime || '--' }}
                        </view>
                    </view>
                </template>
                <view
                    class="item"
                    v-if="formData.orderStatus == InspectWorkOrderStatusEnum.RETURNEDORDER"
                >
                    <view>退单时间</view>
                    <view>
                        {{ formData.cancelOrderTime || '--' }}
                    </view>
                </view>
                <view class="item" v-if="formData.familiarFaultName">
                    <view>故障类型</view>
                    <view>
                        {{ formData.familiarFaultName || '--' }}
                    </view>
                </view>
                <view class="item" v-if="formData.faultDescription">
                    <view>故障描述</view>
                    <view>
                        {{ formData.faultDescription || '--' }}
                    </view>
                </view>
                <template v-if="ifShow([InspectWorkOrderStatusEnum.COMPLETE])">
                    <view class="item">
                        <view>完成时间</view>
                        <view>
                            {{ formData.orderAccomplishTime || '--' }}
                        </view>
                    </view>
                    <view class="item">
                        <view>巡检结果</view>
                        <view :style="{ color: normalColor[formData.inspectionResult] }">
                            {{ normalMap[formData.inspectionResult] || '--' }}
                        </view>
                    </view>
                    <view class="item">
                        <view class="!w-[200rpx]">巡检结果备注</view>
                        <view>
                            {{ formData.inspectionResultRemark || '--' }}
                        </view>
                    </view>
                    <view class="item">
                        <view>完工照片</view>
                        <view v-if="formData.inspectionPhoto">
                            <w-image-list
                                class="flex-1"
                                :imgStr="formData.inspectionPhoto"
                            ></w-image-list>
                        </view>
                        <view v-else class="text-[#96979b]">暂无</view>
                    </view>
                </template>
            </view>
        </TCard>
        <template #btn>
            <CardBtn
                :pageSource="pageSource"
                pageType="detail"
                :item="formData"
                @refresh="getDetail"
            />
        </template>
    </w-page-common>
</template>

<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import { computed, ref, unref } from 'vue'
import {
    inspectWorkOrderStatusMap,
    InspectWorkOrderStatusEnum,
    normalColor,
    normalMap
} from '@/enums/businessEnums'
import { apiInspectionDetail } from '@/api/overhaul'
import CardBtn from '@/components/order-button/inspection-btn.vue'

const orderId = ref('')
// 1为检修员，0为客户
const pageSource = ref('1')
const formData = ref<any>({})
const computedColor = computed(() => {
    if (formData.value.orderStatus == InspectWorkOrderStatusEnum.COMPLETE) {
        return '#46B97B'
    } else if (formData.value.orderStatus == InspectWorkOrderStatusEnum.TOINSPECT) {
        return '#FDBA33'
    } else {
        return '#0E66FB'
    }
})

const ifShow = (arr: any[]) => {
    return arr.find(i => i == unref(formData).orderStatus) != null ? true : false
}

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

onLoad(options => {
    orderId.value = options.id as string
    pageSource.value = options.pageSource ? (options.pageSource as string) : '1'
    getDetail()
})
onShow(() => {
    getDetail()
})
</script>
<style scoped lang="scss">
.icon-field {
    @apply pt-[48px] pb-[15px] flex flex-col justify-center items-center;
}
.page-common-footer {
    @apply flex px-3;
    u-button {
        @apply flex-1 mr-3;
    }
}
.btns {
    @apply flex justify-center items-center w-full my-2;
    view {
        @apply text-primary flex-1 text-center leading-[30px];
        &._border {
            @apply border-r border-border;
        }
    }
}
</style>
