<!--
 * @Author: micky
 * @Date: 2024-08-13 19:19:02
 * @LastEditors: micky
 * @LastEditTime: 2024-10-31 20:48:19
 * @FilePath: \chargingpile-uniapp\src\bundle\pages\overhaul\fill-receipt.vue
-->
<template>
    <w-page-common btnText="确认完成" @submit="handleSubmit">
        <TCard title="基本信息">
            <view class="c-form-item-wrapper py-[12rpx]">
                <view class="item">
                    <view>工单编号</view>
                    <view>{{ detail.orderNo }}</view>
                </view>
                <view class="item">
                    <view>报修人</view>
                    <view>{{ detail.creatorName }}</view>
                </view>
                <view class="item">
                    <view>报修时间</view>
                    <view>{{ detail.createTime }}</view>
                </view>
                <w-client-device-info :formData="detail" />
                <view class="item">
                    <view>接单人</view>
                    <view>{{ detail.receiverName }}</view>
                </view>
                <view class="item">
                    <view>接单时间</view>
                    <view>{{ detail.receiverTime }}</view>
                </view>
                <view class="item">
                    <view>故障类型</view>
                    <view>{{ detail.faultName }}</view>
                </view>
                <view class="item">
                    <view>故障描述</view>
                    <view>{{ detail.faultDescription }}</view>
                </view>
                <view class="item" v-if="detail.remark">
                    <view>创建备注</view>
                    <view>{{ detail.remark }}</view>
                </view>
                <view class="item" v-if="detail.faultImg">
                    <view>故障图片</view>
                    <w-image-list class="flex-1" :imgStr="detail.faultImg"></w-image-list>
                </view>
                <view class="item" v-if="detail.totalAmount">
                    <view>报价价格</view>
                    <view class="text-error">￥{{ detail.totalAmount }}</view>
                </view>
                <!-- <view class="item">
                    <view>是否维修</view>
                    <view :style="{ color: yesOrNoColor[detail.isMaintain] }">
                        {{ yesOrNoMap[detail.isMaintain] }}
                    </view>
                </view> -->
            </view>
        </TCard>
        <TCard
            :cardStyle="{ marginTop: '15px', padding: '12px' }"
            v-if="detail.sparePartList.length > 0"
        >
            <view class="mb-3 flex justify-between">
                <text>使用配件明细</text>
                <text>
                    实际金额
                    <text class="text-error">￥{{ detail.actualAmount }}</text>
                </text>
            </view>
            <w-spareParts-list :datas="detail.sparePartList" />
        </TCard>
        <TCard title="" :cardStyle="{ marginTop: '15px' }">
            <view class="c-form-item-wrapper mt-1 pb-[24rpx]">
                <view class="whole-row-label required">检修结论类型</view>
                <w-fault-select
                    :type="FaultTypeEnum.OVERHAUL"
                    v-model="formData.familiarFaultId"
                    placeholder="请选择检修结论类型"
                />
                <TTextareaField
                    label="检修结论描述"
                    v-model="formData.familiarFaultDescription"
                    placeholder="请输入检修结论描述"
                    :remarkStyle="{ padding: 0 }"
                    :required="true"
                ></TTextareaField>
                <view class="whole-row-label mb-3">完工拍照确认</view>
                <u-upload
                    :fileList="fileList['inspectionFinish']"
                    name="inspectionFinish"
                    :maxCount="9"
                    @beforeRead="beforeRead"
                    @afterRead="afterRead"
                    @delete="deletePic"
                    :width="80"
                    :height="80"
                    multiple
                ></u-upload>
            </view>
        </TCard>
    </w-page-common>
</template>

<script setup lang="ts">
import { yesOrNoColor, yesOrNoMap, priorityColor, priorityMap } from '@/enums/businessEnums'
import { FaultTypeEnum } from '@/enums/businessEnums'
import { ref, unref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { apiOverhaulDetail, apiFillInReceipt } from '@/api/overhaul'
import { toast } from '@/utils/util'
import { useUploadValidate } from '@/hooks/useUploadValidate'

const detail = ref<any>({})
const formData = ref({
    familiarFaultDescription: '',
    familiarFaultId: '',
    id: ''
})

const { fileList, beforeRead, afterRead, deletePic, handleUploadFile, btnDisabled } =
    useUploadValidate()

const handleSubmit = async () => {
    if (!unref(formData).familiarFaultId) return toast('请选择检修结论类型')
    else if (!unref(formData).familiarFaultDescription) return toast('请输入检修结论描述')

    handleUploadFile(async files => {
        const data = {
            ...unref(formData),
            completeImg: unref(files)?.inspectionFinish?.toString()
        }
        await apiFillInReceipt(data)
        toast('填写回单完成')
        setTimeout(() => {
            uni.navigateBack()
        }, 300)
    })
}

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

onLoad(options => {
    formData.value.id = options.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];
    }
}
.fault-type {
    @apply flex justify-between h-[36px] mb-3 border border-[#F7F7FA] rounded-[6px] bg-[#FAFAFE] p-[9px];
}
</style>
