<!--
 * @Author: micky
 * @Date: 2024-09-08 19:23:35
 * @LastEditors: micky
 * @LastEditTime: 2024-10-31 20:46:41
 * @FilePath: \chargingpile-uniapp\src\bundle\pages\repair\step\step-check-scrap.vue
-->
<template>
    <view class="c-form-item-wrapper !p-0">
        <view class="whole-row-label">故障现象</view>
        <w-fault-select
            :type="FaultTypeEnum.PHENOMENON"
            v-model="formData.faultPhenomenonId"
            placeholder="请选择故障现象"
        />
    </view>
    <view class="c-form-item-wrapper !p-0">
        <view class="whole-row-label required">故障原因</view>
        <w-fault-select
            :type="FaultTypeEnum.PROBLEM"
            v-model="formData.faultCauseId"
            placeholder="请选择故障原因"
        />
    </view>
    <view class="c-form-item-wrapper !p-0">
        <view class="whole-row-label required">报废图片</view>
        <u-upload
            :fileList="fileList['scrapImg']"
            name="scrapImg"
            :maxCount="9"
            @beforeRead="beforeRead"
            @afterRead="afterRead"
            @delete="deletePic"
            :width="80"
            :height="80"
            multiple
        ></u-upload>
    </view>
    <view class="c-form-item-wrapper !p-0">
        <view class="whole-row-label required">损坏原因</view>
        <w-fault-select
            :type="FaultTypeEnum.CAUSEOFDAMAGE"
            v-model="formData.sourceOfDamageId"
            placeholder="请选择损坏原因"
        />
    </view>
    <view class="c-form-item-wrapper !p-0">
        <view class="whole-row-label required">运维建议</view>
        <w-fault-select
            :type="FaultTypeEnum.SUGGESTION"
            v-model="formData.operationsSuggestId"
            placeholder="请选择运维建议"
        />
    </view>
    <view class="c-form-item-wrapper !p-0">
        <view class="whole-row-label required">报废标图片</view>
        <u-upload
            :fileList="fileList['scrapMarkPicture']"
            name="scrapMarkPicture"
            :maxCount="9"
            @beforeRead="beforeRead"
            @afterRead="afterRead"
            @delete="deletePic"
            :width="80"
            :height="80"
            multiple
        ></u-upload>
    </view>
</template>

<script setup lang="ts">
import { ref, unref } from 'vue'
import { useUploadValidate } from '@/hooks/useUploadValidate'
import { CheckResultEnum, FaultTypeEnum, RepairStepEnum } from '@/enums/businessEnums'
import { toast } from '@/utils/util'
import { apiCommonStep } from '@/api/repair'

const props = defineProps<{
    id: string
}>()

interface Form {
    scrapImg: string[]
    scrapMarkPicture: string[]
    faultCauseId: string
    faultPhenomenonId: string
    sourceOfDamageId: string
    operationsSuggestId: string
}

const formData = ref<Form>({
    faultCauseId: '',
    faultPhenomenonId: '',
    sourceOfDamageId: '',
    operationsSuggestId: '',
    scrapImg: [],
    scrapMarkPicture: []
})

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

const submit = () => {
    const form = unref(formData)
    if (!form.faultCauseId) return toast('请选择故障原因')
    if (!form.sourceOfDamageId) return toast('请选择损坏原因')
    if (!form.operationsSuggestId) return toast('请选择运维建议')
    if (unref(fileList)?.scrapImg?.length === 0) return toast('请上传报废图片')
    if (unref(fileList)?.scrapMarkPicture?.length === 0) return toast('请上传报废标图片')
    const uploadFileList = {
        scrapMarkPicture: []
    }
    uploadFileList.scrapMarkPicture = unref(fileList)?.scrapMarkPicture.map(
        (item: Record<string, string>) => {
            if (!item?.url) {
                return {
                    url: item
                }
            }
            return item
        }
    )
    handleUploadFile(async (files: Record<string, string>) => {
        const data = {
            id: props.id,
            ...unref(formData),
            scrapImg: unref(files)?.scrapImg?.toString(),
            scrapMarkPicture: unref(files)?.scrapMarkPicture?.toString(),
            repairStep: RepairStepEnum.FAULTCHECK,
            scrapOrNot: CheckResultEnum.SCRAP
        }
        console.log('data', data)

        await apiCommonStep(data).finally(() => {
            btnDisabled.value = false
        })
        toast('操作成功')
        setTimeout(() => {
            uni.navigateBack()
        }, 300)
    })
}

// watch(
//     () => props.detail,
//     val => {
//         if (val && Object.keys(val).length > 0) {
//             if (val.scrapDate) {
//                 const {
//                     faultCauseId,
//                     faultPhenomenonId,
//                     sourceOfDamageId,
//                     operationsSuggestId,
//                     scrapImg,
//                     scrapMarkPicture
//                 } = val.scrapDate
//                 formData.value.faultCauseId = faultCauseId
//                 formData.value.faultPhenomenonId = faultPhenomenonId
//                 formData.value.sourceOfDamageId = sourceOfDamageId
//                 formData.value.operationsSuggestId = operationsSuggestId
//                 fileList.value['scrapImg'] = scrapImg?.split(',')?.map(img => {
//                     return {
//                         url: img
//                     }
//                 })
//                 fileList.value['scrapMarkPicture'] = scrapMarkPicture?.split(',')?.map(img => {
//                     return {
//                         url: img
//                     }
//                 })
//             }
//         }
//     }
// )

defineExpose({
    submit
})
</script>
<style scoped lang="scss">
:deep(.u-number-box) {
    @apply h-[25px] ml-1;
    input {
        background-color: #f4f4f4 !important;
        border-radius: 4px;
        height: 25px !important;
    }
}
:deep(.u-number-box__minus),
:deep(.u-number-box__plus) {
    width: 27px !important;
    background: transparent !important;
}
</style>
