<!--
 * @Author: micky
 * @Date: 2024-10-06 10:16:15
 * @LastEditors: micky
 * @LastEditTime: 2024-10-19 15:40:40
 * @FilePath: \chargingpile-uniapp\src\bundle\pages\charge\custom-in-storage.vue
-->
<template>
    <w-page-common btnText="提交" @submit="submit" :needPadding="false" :btnDisabled="btnDisabled">
        <w-scan v-model="scanResultCode"></w-scan>
        <view class="px-[24rpx] pt-[20rpx]">
            <view class="text-2xl mb-2">扫描结果</view>
            <TCard>
                <view class="c-form-item-wrapper pb-2 pt-1">
                    <view class="item black">
                        <view>客户名称</view>
                        <view>
                            {{ detail.clientName || '--' }}
                        </view>
                    </view>
                    <view class="item black">
                        <view>模块代码</view>
                        <view>
                            {{ detail.moduleCode || '--' }}
                        </view>
                    </view>
                    <view class="item black">
                        <view>型号</view>
                        <view>
                            {{ detail.moduleNumber || '--' }}
                        </view>
                    </view>
                    <view class="item black">
                        <view>功率</view>
                        <view>
                            {{ parseModulePower(detail.modulePower) || '--' }}
                        </view>
                    </view>
                </view>
            </TCard>
            <TCard :cardStyle="{ marginTop: '15px' }">
                <view class="c-form-item-wrapper mt-1 pb-[24rpx]">
                    <view class="whole-row-label required">入库类型</view>
                    <w-dict-select
                        v-model="formData.type"
                        :options="optionsMap.inStorageOptions"
                    ></w-dict-select>
                </view>
            </TCard>
            <TCard :cardStyle="{ marginTop: '15px' }">
                <TFeedBack v-model:remark="formData.remark" v-model:imageList="fileList" />
            </TCard>
            <view class="custom-input flex justify-center" @click="handleToggle(false)">
                <u-icon name="edit-pen" color="#7C7E82" size="24"></u-icon>
                手动输入条码
            </view>
        </view>
        <u-modal
            :show="show"
            title="手动输入条码"
            :showCancelButton="true"
            @cancel="cancelCode"
            @confirm="confirmCode"
        >
            <u-input placeholder="请输入条码" class="w-full" v-model="inputCode"></u-input>
        </u-modal>
    </w-page-common>
</template>

<script setup lang="ts">
import { ref, watch, unref } from 'vue'
import { optionsMap } from '@/config/options'
import { useToggle } from '@/hooks/useLockFn'
import { toast } from '@/utils/util'
import { apiRepairDetail, apiCustomInStorage } from '@/api/repair'
import { useUploadValidate } from '@/hooks/useUploadValidate'
import { useModulePower } from '@/hooks/useLockFn'

const { parseModulePower } = useModulePower()
const { show, handleToggle } = useToggle()
const scanResultCode = ref('')
const inputCode = ref('')
const detail = ref<Partial<RepairItem>>({})
const formData = ref({
    type: '',
    remark: ''
})
const fileList: any = ref({
    repairImage: []
})
const { handleUploadFile, btnDisabled } = useUploadValidate()

// 确认输入条码
const confirmCode = () => {
    if (!inputCode.value) return toast('请输入条码')
    handleToggle(true)
    scanResultCode.value = unref(inputCode)
    getDetail()
    inputCode.value = ''
}
const cancelCode = () => {
    inputCode.value = ''
    handleToggle(true)
}

const submit = async () => {
    if (!unref(scanResultCode)) return toast('请扫描或手动输入模块代码')
    if (unref(fileList)?.repairImage?.length === 0) return toast('请上传图片')
    handleUploadFile(async files => {
        const params: any = {
            id: unref(detail).id,
            repairOrderStepRemark: formData.value.remark,
            repairOrderStepImg: unref(files).repairImage?.toString(),
            repairStep: unref(detail).repairNextStep
        }
        await apiCustomInStorage(params).finally(() => {
            btnDisabled.value = false
        })
        toast('操作成功')
        setTimeout(() => {
            uni.navigateBack()
        }, 300)
    }, unref(fileList))
}

const getDetail = async () => {
    const res = await apiRepairDetail({
        moduleCode: unref(scanResultCode)
    })
    detail.value = res
}
// 扫描到条形码了，请求接口详情数据
watch(scanResultCode, val => {
    val && getDetail()
    console.log('val', val)
})
</script>
<style scoped lang="scss">
.custom-input {
    @apply fixed left-0 w-full py-2 text-gray2 z-10;
    background-color: $gray-1;
    margin-bottom: 96rpx;
    bottom: Max(env(safe-area-inset-bottom), 24rpx);
}
</style>
