<!--
 * @Author: micky
 * @Date: 2024-08-14 21:18:11
 * @LastEditors: micky
 * @LastEditTime: 2024-09-07 17:32:56
 * @FilePath: \chargingpile-uniapp\src\bundle\pages\inspection\fault-detection.vue
-->
<template>
    <w-page-common btnText="提交" @submit="handleSubmit" :btnDisabled="btnDisabled">
        <TCard title="基本信息">
            <view class="c-form-item-wrapper pb-3">
                <view class="item">
                    <view>工单编号</view>
                    <view>
                        {{ detail?.orderNo }}
                    </view>
                </view>
                <w-client-device-info :formData="detail" />
            </view>
        </TCard>
        <TCard :cardStyle="{ marginTop: '15px', padding: '10px' }">
            <view class="flex justify-between">
                <text class="text-[18px] font-bold">{{ selectArr[0].label }}</text>
                <u-icon
                    name="checkmark-circle-fill"
                    :color="selectArr[0].checked ? '#0E66FB' : '#F4F4F4'"
                    @click="itemCheck(0)"
                    :size="23"
                ></u-icon>
            </view>
        </TCard>
        <TCard :cardStyle="{ marginTop: '15px', padding: '10px' }">
            <view class="flex justify-between">
                <text class="text-[18px] font-bold">{{ selectArr[1].label }}</text>
                <u-icon
                    name="checkmark-circle-fill"
                    :color="selectArr[1].checked ? '#0E66FB' : '#F4F4F4'"
                    @click="itemCheck(1)"
                    :size="23"
                ></u-icon>
            </view>
            <template v-if="selectArr[1].checked">
                <view class="c-form-item-wrapper !px-0 mt-1">
                    <view class="whole-row-label required">故障类型</view>
                    <w-fault-select
                        :type="FaultTypeEnum.PROBLEM"
                        v-model="formData.faultId"
                        placeholder="请选择故障类型"
                    />
                    <TTextareaField
                        label="故障描述"
                        v-model="formData.faultDescription"
                        placeholder="请输入故障描述"
                        :remarkStyle="{ padding: 0 }"
                        :required="true"
                        :disabled="false"
                    ></TTextareaField>
                </view>
            </template>
        </TCard>
        <TCard :cardStyle="{ marginTop: '15px', padding: '10px' }">
            <TTextareaField
                label="备注"
                v-model="formData.inspectionResultRemark"
                placeholder="请输入备注信息，选填"
                :remarkStyle="{ padding: 0, marginBottom: '12px' }"
            ></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>
        </TCard>
    </w-page-common>
</template>

<script setup lang="ts">
import { ref, unref } from 'vue'
import { toast, uploadFile } from '@/utils/util'
import { apiFaultDetection } from '@/api/overhaul'
import { onLoad } from '@dcloudio/uni-app'
import { useUploadValidate } from '@/hooks/useUploadValidate'
import { apiInspectionDetail } from '@/api/overhaul'
import { FaultTypeEnum } from '@/enums/businessEnums'

const formData = ref<any>({
    inspectionResultRemark: '',
    faultId: '',
    inspectionResult: '',
    faultDescription: ''
})
const orderId = ref('')
const detail = ref<any>()
const selectArr = ref([
    {
        label: '正常',
        value: 0,
        checked: true
    },
    {
        label: '异常',
        value: 1,
        checked: false
    }
])

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

const itemCheck = (ind: number) => {
    selectArr.value[ind].checked = true
    selectArr.value[1 ^ ind].checked = false
}
const handleSubmit = async () => {
    formData.value.inspectionResult = selectArr.value.find(i => i.checked)?.value
    if (formData.value.inspectionResult == 1) {
        if (!unref(formData).faultId) return toast('请选择故障类型')
        else if (!unref(formData).faultDescription) return toast('请输入故障描述')
    }
    handleUploadFile(async files => {
        const data = {
            id: unref(orderId),
            ...unref(formData),
            inspectionPhoto: unref(files)?.inspectionFinish?.toString()
        }
        await apiFaultDetection(data).finally(() => {
            btnDisabled.value = false
        })
        toast('操作成功')

        uni.navigateBack({ delta: 1 })
    })
}

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

onLoad(options => {
    orderId.value = options.id as string
    getDetail()
})
</script>
<style scoped lang="scss">
.fault-type {
    @apply flex justify-between h-[36px] mb-3 border border-[#F7F7FA] rounded-[6px] bg-[#FAFAFE] p-[9px];
}
</style>
