<template>
    <w-page-common>
        <TCard :cardStyle="{ padding: '20rpx 0' }">
            <view class="icon-field">
                <TIcon
                    :name="
                        formData.orderStatus == WorkOrderStatusEnum.COMPLETE
                            ? 'icon-xuanze'
                            : 'icon-solid-time'
                    "
                    :size="40"
                    :color="computedColor"
                ></TIcon>
                <view class="mt-2">
                    {{ statusName }}
                </view>
            </view>
            <view class="c-form-item-wrapper">
                <view class="item">
                    <view>工单编号</view>
                    <view>
                        {{ formData.orderNo }}
                    </view>
                </view>
                <view class="item">
                    <view>报修人</view>
                    <view>
                        {{ formData.creatorName }}
                    </view>
                </view>
                <view class="item">
                    <view>报修时间</view>
                    <view>
                        {{ formData.createTime }}
                    </view>
                </view>
                <w-client-device-info :formData="formData" />

                <template v-if="formData.receiveName">
                    <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.faultName">
                    <view>故障类型</view>
                    <view>
                        {{ formData.faultName }}
                    </view>
                </view>
                <view class="item" v-if="formData.faultDescription">
                    <view>故障描述</view>
                    <view>
                        {{ formData.faultDescription }}
                    </view>
                </view>
                <view class="item" v-if="formData.remark">
                    <view>报修备注</view>
                    <view>
                        {{ formData.remark }}
                    </view>
                </view>
                <view class="item" v-if="formData.receiverTime">
                    <view>接单时间</view>
                    <view>
                        {{ formData.receiverTime }}
                    </view>
                </view>
                <template v-if="ifShow([WorkOrderStatusEnum.RETURNEDORDER])">
                    <view class="item">
                        <view>退单时间</view>
                        <view>
                            {{ formData.cancelOrderTime }}
                        </view>
                    </view>
                    <view class="item">
                        <view>退单原因</view>
                        <view>
                            {{ formData.cancelCause }}
                        </view>
                    </view>
                </template>
                <view
                    class="item"
                    v-if="
                        ifShow([
                            WorkOrderStatusEnum.TOBECOMFIRMED,
                            WorkOrderStatusEnum.INMAINTENANCE,
                            WorkOrderStatusEnum.COMPLETE
                        ])
                    "
                >
                    <view>报价价格</view>
                    <view class="text-error">￥{{ formData.totalAmount || 0 }}</view>
                </view>
                <view class="item" v-if="formData.quotationTime">
                    <view>报价时间</view>
                    <view>
                        {{ formData.quotationTime }}
                    </view>
                </view>
                <view class="item" v-if="formData.orderStatus == WorkOrderStatusEnum.SENDBACK">
                    <view>退回原因</view>
                    <view>
                        {{ formData.returnCause }}
                    </view>
                </view>
                <view class="item" v-if="formData.isMaintain != null">
                    <view>是否维修</view>
                    <view :style="{ color: yesOrNoColor[formData.isMaintain] }">
                        {{ yesOrNoMap[formData.isMaintain] }}
                    </view>
                </view>
                <view class="item" v-if="formData.isMaintain == 1">
                    <view>拒绝理由</view>
                    <view>
                        {{ formData.refuseMaintenanceCause }}
                    </view>
                </view>
                <view class="item" v-if="formData.faultImg">
                    <view>故障图片</view>
                    <w-image-list class="flex-1" :imgStr="formData.faultImg"></w-image-list>
                </view>
                <template v-if="ifShow([WorkOrderStatusEnum.COMPLETE])">
                    <view class="item">
                        <view>完成时间</view>
                        <view>
                            {{ formData.orderAccomplishTime }}
                        </view>
                    </view>
                    <view class="item">
                        <view>完工照片</view>
                        <view v-if="formData.completeImg">
                            <w-image-list
                                class="flex-1"
                                :imgStr="formData.completeImg"
                            ></w-image-list>
                        </view>
                        <view v-else class="text-[#96979b]">暂无</view>
                    </view>
                    <view class="item" v-if="formData.familiarFaultName">
                        <view class="!w-[220rpx]">检修结论类型</view>
                        <view>
                            {{ formData.familiarFaultName }}
                        </view>
                    </view>
                    <view class="item" v-if="formData.familiarFaultDescription">
                        <view class="!w-[220rpx]">检修结论描述</view>
                        <view clas="flex-1 overflow-auto">
                            {{ formData.familiarFaultDescription }}
                        </view>
                    </view>
                </template>
                <!-- <view class="item" v-if="formData.maintenanceRepair">
                    <view>模块返修</view>
                    <view class="text-primary" @click="viewModuleReturn">查看详情</view>
                </view> -->
                <!-- <view
                    class="item"
                    v-if="formData.equipmentModel && formData?.equipmentModel.modelNo"
                >
                    <view>模块替换</view>
                    <view class="text-primary" @click="viewModuleReplace">查看详情</view>
                </view> -->
                <!-- 检修单 -->
                <!-- <view class="item" v-if="formData.createImg">
                    <view>创建图片</view>
                    <w-image-list class="flex-1" :imgStr="formData.createImg"></w-image-list>
                </view> -->
            </view>
        </TCard>
        <TCard
            :cardStyle="{ marginTop: '15px', padding: '0 12px 12px' }"
            v-if="formData.sparePartList && formData.sparePartList.length > 0"
        >
            <view class="c-input-field-item">
                <text v-if="ifShow([WorkOrderStatusEnum.TOBECOMFIRMED])">报价明细</text>
                <text v-else>使用配件明细</text>
                <text v-if="formData.actualAmount !== null">
                    实际金额
                    <text class="text-error">￥{{ formData.actualAmount }}</text>
                </text>
            </view>
            <w-spareParts-list :datas="formData.sparePartList" />
        </TCard>
        <template #btn>
            <CardBtn
                :pageSource="pageSource"
                pageType="detail"
                :item="formData"
                @refresh="getDetail"
            />
        </template>
        <w-cancel-order
            ref="cancelPopup"
            :id="formData.id"
            :type="WorkOrderTypeEnum.OVERHAUL"
            @refresh="getDetail"
            :pageSource="pageSource"
        />
        <w-confirm-popup contentText="确认接单吗？" v-model="show" @confirm="confirmTakeOrder" />
    </w-page-common>
</template>

<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import { computed, ref, unref } from 'vue'
import {
    workOrderStatusMap,
    WorkOrderStatusEnum,
    yesOrNoMap,
    yesOrNoColor,
    YesOrNoEnum,
    WorkOrderTypeEnum,
    StashTypeEnum
} from '@/enums/businessEnums'
import { apiOverhaulDetail } from '@/api/overhaul'
import { apiOverhaulOrderReceive } from '@/api/overhaul'
import { useToggle } from '@/hooks/useLockFn'
import { toast } from '@/utils/util'
import CardBtn from '@/components/order-button/overhaul-btn.vue'

const orderId = ref('')
// 1为检修员，0为客户
const pageSource = ref('1')
const formData = ref<any>({
    equipment: {},
    orderStatus: null
})
const statusName = computed(() => {
    const name = workOrderStatusMap[formData.value.orderStatus]
    return name == '维修中' ? '检修中' : name
})
const computedColor = computed(() => {
    if (formData.value.orderStatus == WorkOrderStatusEnum.COMPLETE) {
        return '#46B97B'
    } else if (formData.value.orderStatus == WorkOrderStatusEnum.TOBECOMFIRMED) {
        return '#FDBA33'
    } else {
        return '#0E66FB'
    }
})
const cancelPopup = ref()
const { show, handleToggle } = useToggle()

const ifShow = (arr: number[]) => {
    return arr.find(i => i == unref(formData).orderStatus) != null ? true : false
}
const showApply = computed(() => {
    return !formData.value.isConfirmReceipt || formData?.value.warehouseType == StashTypeEnum.COMMON
})

// 退单
const closeOrder = () => {
    cancelPopup.value.showPopup()
}

// 确认接单
const confirmTakeOrder = async () => {
    await apiOverhaulOrderReceive({
        id: unref(formData).id
    })
    toast('接单成功')
    getDetail()
}
// 服务报价
const servicePrice = () => {
    uni.navigateTo({
        url: `/bundle/pages/overhaul/offer-price?id=${unref(formData).id}`
    })
}
// 模块返修
const moduleReturn = () => {
    uni.navigateTo({
        url: `/bundle/pages/overhaul/module-return?id=${unref(orderId)}`
    })
}

// 配件领用申请
const applySpareParts = () => {
    const { sparePartStockAudit, isConfirmReceipt } = formData.value as OverhaulItem
    if (
        (sparePartStockAudit && sparePartStockAudit?.purchaseStatus != 1) ||
        isConfirmReceipt == 1
    ) {
        uni.navigateTo({
            url: `/bundle/pages/spareParts/detail?id=${unref(orderId)}&type=${
                WorkOrderTypeEnum.OVERHAUL
            }`
        })
    } else {
        uni.navigateTo({
            url: `/bundle/pages/spareParts/apply?id=${unref(orderId)}&type=${
                WorkOrderTypeEnum.OVERHAUL
            }`
        })
    }
}
// // 模块替换
// const moduldReplace = () => {
//     uni.navigateTo({
//         url: `/bundle/pages/scan/scan?type=1&id=${unref(orderId)}`
//     })
// }

// // 填写回单
// const fillIn = () => {
//     uni.navigateTo({
//         url: `/bundle/pages/overhaul/fill-receipt?id=${unref(orderId)}`
//     })
// }

// // 检修单确认报价
// const confirmPrice = () => {
//     uni.navigateTo({
//         url: `/bundle/pages/client/confirm-price?id=${unref(orderId)}`
//     })
// }
// 查看模块替换详情
const viewModuleReplace = () => {
    uni.navigateTo({
        url: `/bundle/pages/overhaul/module-replace-detail?id=${unref(orderId)}`
    })
}
// 查看模块返修详情
const viewModuleReturn = () => {
    uni.navigateTo({
        url: `/bundle/pages/overhaul/module-return-detail?id=${unref(orderId)}`
    })
}

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

onLoad(options => {
    orderId.value = options.id as string
    pageSource.value = options.pageSource ? (options.pageSource as string) : '1'
})

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];
        &:last-child {
            border: none;
        }
        &._border {
            @apply border-r border-border;
        }
    }
}
</style>
