<template>
    <view class="page-container">
        <!-- <view>
            <live-pusher
                v-once
                id="livePusher"
                ref="livePusher"
                class="livePusher"
                mode="FHD"
                beauty="0"
                whiteness="0"
                device-position="back"
                :auto-focus="false"
                :muted="true"
                :enable-camera="true"
                :enable-mic="true"
                :zoom="true"
                :style="[{ height: '350rpx', width: '750rpx' }]"
            >
            </live-pusher>
        </view> -->
        <view class="table-list-item">
            <view class="scan-btn" @click="handleInstruct()">
                <text style="color: #fff">开始识别</text>
            </view>
        </view>
        <view class="table-list-item">
            <uni-row :gutter="24" style="display: flex; align-items: center">
                <uni-col :span="5">
                    <text> 设备编码 </text>
                </uni-col>
                <uni-col :span="10">
                    <view style="width: 100%">
                        <uni-easyinput v-model="queryCodeParams.maCode" placeholder="请输入内容" />
                    </view>
                </uni-col>
                <uni-col :span="6">
                    <view
                        class="coding-btn"
                        style="
                            padding: 10rpx 0;
                            color: #fe9a09;
                            background-color: #fff7eb;
                            border: 1px solid #fe9a09;
                        "
                        @click="getCode()"
                    >
                        <text style="color: #fe9a09; text-align: center">编码检索</text>
                    </view>
                </uni-col>
            </uni-row>
        </view>
        <view class="table-list-item">
            <scroll-view class="scroll-view" scroll-y="true" style="height: 500rpx">
                <uni-forms :model="codeData" label-width="100" :border="true">
                    <uni-forms-item label="物资名称：" name="materialType">
                        <text style="display: flex; align-items: center">{{
                            codeData?.materialType
                        }}</text>
                    </uni-forms-item>
                    <uni-forms-item label="物资类型：" name="materialName">
                        <text style="height: 100%; display: flex; align-items: center">{{
                            codeData?.typeName
                        }}</text>
                    </uni-forms-item>
                    <uni-forms-item label="规格型号：" name="materialModel">
                        <text style="height: 100%; display: flex; align-items: center">{{
                            codeData?.materialName
                        }}</text>
                    </uni-forms-item>
                    <uni-forms-item label="设备编码：" name="maCode">
                        <text style="height: 100%; display: flex; align-items: center">{{
                            codeData?.maCode
                        }}</text>
                    </uni-forms-item>
                    <uni-forms-item label="设备状态：" name="statusName">
                        <text style="height: 100%; display: flex; align-items: center">{{
                            codeData?.maStatusName
                        }}</text>
                    </uni-forms-item>
                    <uni-forms-item label="外观判定：" name="apDetection">
                        <uni-easyinput
                            maxlength="30"
                            v-model="apDetection"
                            placeholder="请输入内容"
                        />
                    </uni-forms-item>
                    <uni-forms-item label="附件：">
                        <div class="upload" @click="uploadImg" v-if="imgUrl == ''">+</div>
                        <div class="upload" @click="uploadImg" v-else>
                            <image
                                :src="imgUrl"
                                style="width: 160rpx; height: 160rpx"
                                mode=""
                            ></image>
                        </div>
                    </uni-forms-item>
                </uni-forms>
            </scroll-view>
        </view>

        <view class="outbound-btn" @tap="onHandleConfirm">
            <text style="color: #fff">确认</text>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            livePusher: null,
            ready: true,
            cameraHeight: '', //相机画面宽度
            coverImage: null,
            queryParams: {},
            queryCodeParams: {
                maCode: '',
            },
            codeData: {},
            apDetection: '',
            bmFileInfos: [],
            imgUrl: '',
        }
    },
    onLoad(options) {
        this.queryParams = JSON.parse(options.queryParams)
        console.log(this.queryParams)
        // this.queryCodeParams.typeId = this.queryParams.typeId;
    },
    onReady() {
        this.cameraHeight = uni.getSystemInfoSync().screenHeight * 0.22
        console.log(this.cameraHeight)
        // this.init()
    },
    methods: {
        // 开始识别
        handleInstruct() {
            uni.showActionSheet({
                itemList: ['拍照', '从相册选择'],
                success: (res) => {
                    if (res.tapIndex === 0) {
                        this.getCamera()
                    } else if (res.tapIndex === 1) {
                        // 从相册选择
                        this.getPhoto()
                    }
                },
                fail: (err) => {
                    console.error('操作菜单选择失败:', err)
                },
            })
        },
        // 拍照
        getCamera() {
            navigator.camera.getPicture(this.onCameraSuccess, this.onCameraError, {
                quality: 50,
                destinationType: window.Camera.DestinationType.DATA_URL,
                sourceType: window.Camera.PictureSourceType.CAMERA,
            })
        },
        // 从相册选择
        getPhoto() {
            navigator.camera.getPicture(this.onCameraSuccess, this.onCameraError, {
                quality: 50,
                destinationType: window.Camera.DestinationType.DATA_URL,
                sourceType: window.Camera.PictureSourceType.SAVEDPHOTOALBUM,
            })
        },

        onCameraError(message) {
            console.log(message)
        },
        onCameraSuccess(file) {
            // const file1 = "data:image/jpeg;base64," + file;
            const file1 = file
            let params = {
                image: file1,
                jiju_type: '',
                auth_lic:
                    'xIWDlaDVdijcBB4mjhGCPYk5Kvk8tHZJbUn+vW+ih15+MYx98e/PXyBmKL5gFcWMPznLgDA15QuSAnZQSLddwdy9HkZgtuQDEEZZ351Eyb1eiDUccUnyoSGIrNimbx5TooBNNPYqU4qJeFrPJXAqjBHzRrxoBxuR2CEGKQPgHC4=',
            }

            this.testParams = params

            uni.request({
                url: '/material/app/ocr/getOcrCode',
                method: 'post',
                data: params,
                header: {
                    'Content-Type': 'application/json', // 根据后端要求设置请求头，常见的 POST 请求数据格式为 JSON
                },
                success: (res) => {
                    const { data: resData } = res

                    if (resData.data.data.result) {
                        this.queryCodeParams.maCode = resData.data.data.result
                        this.getCode()
                    } else {
                        uni.showToast({
                            title: '识别失败！' + resData.data.msg,
                            icon: 'none',
                        })
                    }
                },
                fail: (err) => {
                    uni.showToast({
                        title: '请求失败：' + err.errMsg,
                        icon: 'none',
                    })
                },
            })
        },
        //编码检索
        async getCode() {
            let param = {
                maCode: this.queryCodeParams.maCode,
                unitId: this.queryParams.unitId,
                proId: this.queryParams.proId,
                id: this.queryParams.id,
            }
            console.log(param)
            uni.request({
                url: '/material/back_apply_info/getMachine',
                method: 'get',
                data: param,
                success: (res) => {
                    res = res.data
                    console.log(res)
                    if (res.code == 200) {
                        if (res.data && res.data.length > 0) {
                            this.codeData = res.data[0]
                        }
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none',
                        })
                    }
                    // if(res.rows&&res.rows.length>0){
                    // 	this.codeData=res.rows[0];
                    // }else{
                    // 	uni.showToast({
                    // 	    title: '未检索到有效的设备编码！',
                    // 	    icon: 'none',
                    // 	})
                    // }
                },
                fail: (err) => {
                    console.log(err)
                },
            })
        },
        //上传
        uploadImg() {
            uni.chooseImage({
                count: 1, //图片可选择数量
                sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
                sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。
                success: (res) => {
                    console.log(res)
                    let imgFiles = res.tempFilePaths //图片的本地文件路径列表
                    this.imgUrl = imgFiles[0]
                    uni.uploadFile({
                        // url: baseURL+"/file/upload",//app
                        url: '/file/upload', //h5
                        filePath: imgFiles[0],
                        name: 'file',
                        success: (res) => {
                            res = JSON.parse(res.data)
                            console.log('上传成功', res)
                            if (res.code && res.code == 200) {
                                let obj = {
                                    name: res.data.name,
                                    url: res.data.url,
                                    taskType: '10',
                                }
                                this.bmFileInfos = [obj]
                                uni.showToast({ title: '上传成功', icon: 'none' })
                            } else {
                                this.bmFileInfos = []
                                uni.showToast({ title: '上传失败', icon: 'none' })
                            }
                        },
                        fail: (err) => {
                            console.error('上传失败', err)
                        },
                    })
                    // this.$refs.vForm.clearValidate()
                },
            })
        },
        //确认按钮
        async onHandleConfirm() {
            console.log(this.codeData.maId)
            if (this.codeData.maId == undefined) {
                uni.showToast({
                    title: '请先识别编码！',
                    icon: 'none',
                })
            } else {
                let obj = {
                    maId: this.codeData.maId,
                    maCode: this.codeData.maCode,
                    typeId: this.codeData.typeId,
                    apDetection: this.apDetection,
                    bmFileInfos: this.bmFileInfos,
                }
                let param = {
                    backApplyInfo: this.queryParams,
                    backApplyDetails: obj,
                }
                console.log('333333333', param)
                uni.request({
                    url: '/material/back_apply_info/insertApp',
                    method: 'post',
                    data: param,
                    success: (res) => {
                        res = res.data
                        console.log(res)
                        if (res.code === 200) {
                            uni.showToast({
                                title: '添加成功！',
                                icon: 'none',
                            })
                            this.queryCodeParams.maCode = ''
                            this.codeData = {}
                        }
                    },
                    fail: (err) => {
                        console.log(err)
                    },
                })
            }
        },
    },
}
</script>

<style>
.page-container {
    display: flex;
    height: auto;
    flex-direction: column;
    background-color: #f7f8fa;
    padding: 24rpx;
}
.table-list-item {
    margin-top: 10rpx;
    background: #fff;
    padding: 20rpx;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
    margin-bottom: 20rpx;
}
.scan-btn {
    /* width: 100%; */
    height: 88rpx;
    background: #4b8eff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12rpx;
    font-size: 32rpx;
    font-weight: 600;
    box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
    /* transition: all 0.3s ease; */
    margin: 0;
    padding: 0;
}

.coding-btn {
    /* padding: 12rpx 0; */
    background: #fff;
    color: #ff9800;
    border: 2rpx solid rgba(255, 152, 0, 0.5);
    background: linear-gradient(to bottom, rgba(255, 152, 0, 0.05), rgba(255, 152, 0, 0.1));
    border-radius: 12rpx;
    text-align: center;
    font-size: 28rpx;
    font-weight: 600;
    letter-spacing: 1rpx;
    /* transition: all 0.3s ease; */

    /* &:active {
	        background: rgba(255, 152, 0, 0.15);
	        border-color: rgba(255, 152, 0, 0.6);
	        transform: translateY(1rpx);
	    } */
}
.outbound-btn {
    position: absolute;
    bottom: 40rpx;
    left: 50%;
    transform: translateX(-50%);
    /* width: 90%; */
    height: 88rpx;
    width: 620rpx;
    /* margin: 0 10px; */
    /* background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%); */
    background: #4b8eff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 12rpx;
    font-size: 32rpx;
    font-weight: 600;
    box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
    /* transition: all 0.3s ease; */

    /*    &:active {
	        transform: translateX(-50%) scale(0.98);
	        opacity: 0.9;
	    } */
}

/* 上传区域样式 */
.upload {
    width: 160rpx;
    height: 160rpx;
    background-color: #f7f8fa;
    border: 1rpx dashed #d9d9d9;
    border-radius: 12rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48rpx;
    color: #bfbfbf;
    /* transition: all 0.3s ease; */

    &:active {
        background-color: #f0f0f0;
        border-color: #3784fb;
    }

    image {
        width: 100%;
        height: 100%;
        border-radius: 12rpx;
        object-fit: cover;
    }
}

.camera-background {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

.cover-image {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
}

.camera-options {
    flex-direction: row;
    align-items: center;
}

.camera-item {
    flex: 1;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.camera-item .camera-item-image {
    width: 80rpx;
    height: 80rpx;
}

.camera-options-center .camera-item-image {
    width: 120rpx;
    height: 120rpx;
}
</style>
