<!--
 * @Author: micky
 * @Date: 2024-08-13 16:40:16
 * @LastEditors: micky
 * @LastEditTime: 2024-10-07 21:23:30
 * @FilePath: \chargingpile-uniapp\src\bundle\pages\overhaul\module-replace.vue
-->
<template>
    <w-page-common btnText="确定更新模块" @submit="handleSubmit">
        <view class="icon-area">
            <view class="bg">
                <u-icon name="checkbox-mark" size="48" color="#0E66FB"></u-icon>
            </view>
            <text class="text-gray2 mt-1">条码识别成功</text>
        </view>
        <TCard :cardStyle="{ marginTop: '15px' }" title="设备信息">
            <view class="c-form-item-wrapper py-[16rpx]">
                <w-client-device-info :formData="detail" :needMoreDeviceInfo="true" />
            </view>
        </TCard>
        <TCard :cardStyle="{ marginTop: '15px' }" title="模块信息">
            <view class="c-form-item-wrapper py-[16rpx]">
                <view class="item">
                    <view class="!w-[140rpx] text-right">模块代码：</view>
                    <view>{{ formData.modelNo }}</view>
                </view>
                <view class="item !items-center">
                    <text class="w-[140rpx] text-right text-[#aaabae] mr-[8rpx]">品牌：</text>
                    <u-input
                        placeholder="请输入品牌"
                        border="bottom"
                        class="flex-1"
                        v-model="formData.brand"
                    ></u-input>
                </view>
            </view>
        </TCard>
        <view class="text-primary my-3 text-center" @click="scanAgain">重新扫码</view>
    </w-page-common>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref, unref } from 'vue'
import { toast } from '@/utils/util'
import { apiModuleReplace, apiOverhaulDetail } from '@/api/overhaul'

const detail = ref({})
const formData = ref({
    modelNo: '',
    brand: '',
    id: ''
})
const handleSubmit = async () => {
    if (!formData.value.brand) return toast('请输入品牌')
    await apiModuleReplace(unref(formData))
    toast('替换成功')
    setTimeout(() => {
        uni.navigateBack()
    }, 300)
}
const scanAgain = () => {
    uni.redirectTo({
        url: `/bundle/pages/scan/scan?type=1&id=${unref(formData).id}`
    })
}
const getDetail = async () => {
    const res = await apiOverhaulDetail({ id: unref(formData).id })
    detail.value = res
}
onLoad(options => {
    formData.value.modelNo = options.code as string
    formData.value.id = options.id as string
    getDetail()
})
</script>
<style scoped lang="scss">
.icon-area {
    @apply h-[170px] flex items-center justify-center flex-col;
    .bg {
        @apply w-[60px] h-[60px] bg-[#D6E4FE] rounded-[50%] flex items-center justify-center;
    }
}
.c-form-item-wrapper {
    :deep(.u-input) {
        width: 100% !important;
    }
}
</style>
