<template>
    <w-page-common :customStyle="{ height: '100%' }">
        <TCard>
            <view class="icon-field">
                <TIcon
                    :name="
                        formData?.orderStatus == RepairOrderStatusEnum.COMPLETE
                            ? 'icon-xuanze'
                            : 'icon-solid-time'
                    "
                    :size="40"
                    :color="computedColor"
                ></TIcon>
                <view class="mt-2">
                    {{ repairOrderStatusMap[formData.orderStatus as number] }}
                </view>
            </view>
            <view class="c-form-item-wrapper pb-2">
                <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>
                <view class="item">
                    <view>模块代码</view>
                    <view>
                        {{ formData.moduleCode }}
                    </view>
                </view>
                <view class="item">
                    <view>模块型号</view>
                    <view>
                        {{ formData.moduleNumber }}
                    </view>
                </view>
                <view class="item">
                    <view>功率</view>
                    <view>
                        {{ parseModulePower(formData.modulePower) }}
                    </view>
                </view>
                <view class="item" v-if="formData.receiverName">
                    <view>接单人</view>
                    <view>
                        {{ formData.receiverName }}
                    </view>
                </view>
                <view class="item" v-if="formData.receiverTime">
                    <view>派单时间</view>
                    <view>
                        {{ formData.receiverTime }}
                    </view>
                </view>
                <!-- <view
                    v-if="
                        formData.reassignmentAgreeOrNot != null &&
                        activeRoleId == RoleIdEnum.REPAIR &&
                        formData.receiverId
                    "
                    class="item"
                >
                    <view>改派意见</view>
                    <view>
                        {{ dispatchMap[formData.reassignmentAgreeOrNot] }}
                    </view>
                </view> -->
                <!-- <view class="item" v-if="formData.faultName">
                    <view>故障类型</view>
                    <view>
                        {{ formData.faultName }}
                    </view>
                </view>
                <view class="item" v-if="formData.totalAmount">
                    <view>报价价格</view>
                    <view class="text-error">￥{{ formData.totalAmount }}</view>
                </view>
                <view class="item" v-if="formData.quotationTime">
                    <view>报价时间</view>
                    <view>
                        {{ formData.quotationTime }}
                    </view>
                </view> -->
                <view
                    class="item"
                    v-if="
                        formData.scrapOrNot != null &&
                        formData.orderStatus == RepairOrderStatusEnum.INREVIEW
                    "
                >
                    <view>排查结果</view>
                    <view>
                        {{ checkResultMap[formData.scrapOrNot] || '--' }}
                    </view>
                </view>
                <view
                    class="item"
                    v-else-if="formData.orderStatus == RepairOrderStatusEnum.COMPLETE"
                >
                    <view>维修结果</view>
                    <view
                        :style="{
                            color: checkResultColor[formData.maintenanceResult]
                        }"
                    >
                        {{ getDictName(dictData.repairConclusion, formData?.maintenanceResult) }}
                    </view>
                </view>
                <view class="item" v-if="formData.returning == YesOrNoEnum.YES">
                    <view>是否退仓</view>
                    <view>是</view>
                </view>
                <template v-if="showAudit">
                    <view class="item">
                        <view>审核状态</view>
                        <view
                            v-if="formData.reviewRequest == AuditItemsClassifyEnum.MATERIAL"
                            :style="{ color: materialApplyStatusColor[formData.auditStatus] }"
                        >
                            {{ materialApplyStatusMap[formData.auditStatus] || '--' }}
                        </view>
                        <view
                            v-else
                            :style="{ color: RepaireOrderAuditStatusColor[formData.auditStatus] }"
                        >
                            {{ RepaireOrderAuditStatusMap[formData.auditStatus] || '--' }}
                        </view>
                    </view>
                    <view class="item" v-if="formData?.auditResult != null">
                        <view>审核结果</view>
                        <view>
                            {{ agreeMap[formData?.auditResult] }}
                        </view>
                    </view>
                    <view class="item" v-if="formData?.auditOpinion">
                        <view>审核意见</view>
                        <view>
                            {{ formData?.auditOpinion }}
                        </view>
                    </view>
                    <view v-if="formData.reviewRequest == 3">
                        <view class="item" v-if="formData?.scrapDate?.qualityTestingResult != null">
                            <view>质检结果</view>
                            <view>
                                {{ agreeMap[formData?.scrapDate?.qualityTestingResult] }}
                            </view>
                        </view>
                        <view class="item" v-if="formData?.scrapDate?.qualityTestingOpinion">
                            <view>质检意见</view>
                            <view>
                                {{ formData?.scrapDate?.qualityTestingOpinion }}
                            </view>
                        </view>
                    </view>
                </template>
                <!-- <view class="item" v-else-if="formData.feedingOrNot == YesOrNoEnum.YES">
                    <view>补料申请</view>
                    <view
                        :style="{
                            color: materialApplyStatusColor[formData.auditStatus]
                        }"
                    >
                        {{ materialApplyStatusMap[formData.auditStatus] }}
                    </view>
                </view> -->
                <view
                    class="item"
                    v-if="
                        formData.cancellationRequestListVo &&
                        formData.cancellationRequestListVo.partsUseList?.length > 0
                    "
                >
                    <view class="!w-[220rpx]">退仓使用配件</view>
                    <view @click="returnPopup.showPopup()" class="text-primary">查看明细</view>
                </view>
                <template v-if="formData.orderStatus == RepairOrderStatusEnum.COMPLETE">
                    <view class="item">
                        <view>完成时间</view>
                        <view>
                            {{ formData.orderAccomplishTime }}
                        </view>
                    </view>

                    <template v-if="resultInfo">
                        <view class="item" v-if="resultInfo?.faultPhenomenonName">
                            <view>故障现象</view>
                            <view>
                                {{ resultInfo?.faultPhenomenonName }}
                            </view>
                        </view>
                        <view class="item" v-if="resultInfo?.faultCauseName">
                            <view>故障原因</view>
                            <view>
                                {{ resultInfo?.faultCauseName || -'--' }}
                            </view>
                        </view>
                        <view class="item" v-if="resultInfo?.sourceOfDamageName">
                            <view>损坏原因</view>
                            <view>
                                {{ resultInfo?.sourceOfDamageName || -'--' }}
                            </view>
                        </view>
                        <view class="item" v-if="resultInfo?.operationsSuggestName">
                            <view>运维建议</view>
                            <view>
                                {{ resultInfo?.operationsSuggestName || -'--' }}
                            </view>
                        </view>
                        <view class="item" v-if="resultInfo?.scrapImg">
                            <view>报废图片</view>
                            <w-image-list
                                class="flex-1"
                                :imgStr="resultInfo.scrapImg"
                            ></w-image-list>
                        </view>
                        <view class="item" v-if="resultInfo?.scrapMarkPicture">
                            <view>报废标图片</view>
                            <w-image-list
                                class="flex-1"
                                :imgStr="resultInfo.scrapMarkPicture"
                            ></w-image-list>
                        </view>
                    </template>
                </template>

                <!-- <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> -->
                <!-- <view class="item !h-auto mb-2">
                    <view class="whole-row-label !w-[200rpx]">模块整体图片</view>
                    <w-image-list class="flex-1" :imgStr="formData.siteImg"></w-image-list>
                </view> -->
                <view class="item !h-auto mb-2" v-if="formData.preMaintenanceImg">
                    <view class="whole-row-label !w-[190rpx]">维修前图片</view>
                    <w-image-list
                        class="flex-1"
                        :imgStr="formData.preMaintenanceImg"
                    ></w-image-list>
                </view>
                <!-- <view class="item !h-auto mb-2" v-if="formData.faultPointImg">
                    <view class="whole-row-label !w-[190rpx]">故障点图片</view>
                    <w-image-list class="flex-1" :imgStr="formData.faultPointImg"></w-image-list>
                </view> -->
                <view class="item !h-auto mb-2" v-if="formData.inMaintenanceImg">
                    <view class="whole-row-label !w-[190rpx]">维修中图片</view>
                    <w-image-list class="flex-1" :imgStr="formData.inMaintenanceImg"></w-image-list>
                </view>
                <view class="item !h-auto" v-if="formData.afterRepairImg">
                    <view class="whole-row-label !w-[190rpx]">维修后图片</view>
                    <w-image-list class="flex-1" :imgStr="formData.afterRepairImg"></w-image-list>
                </view>
                <!-- <view class="item !h-auto" v-if="formData.completeImg">
                    <view class="whole-row-label !w-[190rpx]">完工照片</view>
                    <w-image-list class="flex-1" :imgStr="formData.completeImg"></w-image-list>
                </view> -->
            </view>
        </TCard>
        <TCard
            :cardStyle="{ marginTop: '15px' }"
            v-if="formData.returning == YesOrNoEnum.YES"
            title="难修原因"
        >
            <view class="difficult-reason">
                <view class="title">维修了什么?</view>
                <view class="item" v-for="(item, index) in reasonField.repaired" :key="item">
                    <view class="serial-number">{{ index + 1 }}</view>
                    <view class="flex-1 overflow-auto break-all">
                        {{ formData?.cancellationRequestListVo?.[item] }}
                    </view>
                </view>
                <view class="title">现在遇到了什么问题?</view>
                <view class="item" v-for="(item, index) in reasonField.question" :key="item">
                    <view class="serial-number">{{ index + 1 }}</view>
                    <view class="flex-1 overflow-auto break-all">
                        {{ formData?.cancellationRequestListVo?.[item] }}
                    </view>
                </view>
            </view>
        </TCard>
        <TCard :cardStyle="{ marginTop: '15px' }" v-if="formData?.orderPartCodeList?.length > 0">
            <w-spareParts-info :sparePartList="formData.orderPartCodeList"></w-spareParts-info>
        </TCard>
        <TCard :cardStyle="{ marginTop: '15px', padding: '0 12px 12px' }" v-if="showSpare">
            <view class="flex flex-col gap-[20rpx]">
                <view>
                    <view class="c-input-field-item">
                        <text>维修使用配件</text>
                    </view>
                    <w-spareParts-list :datas="formData.sparePartList" :showPrice="false" />
                </view>
                <!-- <view>
                    <view class="flex flex-col justify-start gap-[20rpx]">
                        <text>仓管员拍照确认</text>
                        <w-image-list :imgStr="getPhotos"></w-image-list>
                    </view>
                </view> -->
            </view>
        </TCard>
        <returnStashPopup
            ref="returnPopup"
            :repairList="formData.cancellationRequestListVo?.partsUseList"
        />
    </w-page-common>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import {
    repairOrderStatusMap,
    RepairOrderStatusEnum,
    repairOrderColor,
    AuditItemsClassifyEnum,
    materialApplyStatusColor,
    materialApplyStatusMap,
    RepaireOrderAuditStatusColor,
    RepaireOrderAuditStatusMap,
    checkResultMap,
    YesOrNoEnum,
    checkResultColor,
    agreeMap
} from '@/enums/businessEnums'
import { useModulePower } from '@/hooks/useLockFn'
import returnStashPopup from './repair-info-popup.vue'
import { useDictData, getDictName } from '@/hooks/useDictOptions'

const props = defineProps<{
    formData: RepairItem
    pageSource: string
}>()
const emits = defineEmits(['refresh'])
const reasonField = {
    repaired: ['whatWasRepairedOne', 'whatWasRepairedTwo', 'whatWasRepairedThree'],
    question: ['questionOne', 'questionTwo', 'questionThree']
}

const computedColor = computed(() => {
    return repairOrderColor[props.formData?.orderStatus!]
})
// 是否显示审核字段
const showAudit = computed(() => {
    const { auditStatus, reviewRequest, orderStatus, returning } = props.formData
    return (
        (auditStatus != null &&
            reviewRequest != null &&
            orderStatus == RepairOrderStatusEnum.INREVIEW) ||
        returning == YesOrNoEnum.YES
    )
})

const resultInfo = computed(() => {
    return props.formData.repairOrderAuditListVo || props.formData.scrapDate
})

// 排查中，待维修就算有配件也不显示
const showSpare = computed(() => {
    const { sparePartList, orderStatus } = props.formData
    return (
        sparePartList?.length > 0 &&
        orderStatus != RepairOrderStatusEnum.TOREPAIR &&
        orderStatus != RepairOrderStatusEnum.CHECKING &&
        props.pageSource != '0'
    )
})

const returnPopup = ref()

const { dictData }: { dictData: any } = useDictData(['repairConclusion'])

const { parseModulePower } = useModulePower()
</script>
<style scoped lang="scss">
.icon-field {
    @apply pt-[48px] pb-[15px] flex flex-col justify-center items-center;
}
</style>
