<template>
    <nav-bar :navbar-data="navbarData" ref="navBar" />
    <view :style="{ marginTop: height +'px', height: 'calc(100vh - '+ height +'px)' }">
        <view class="anti-counterfeiting-verification">
            <view class="input-code-box">
                <view class="tips">输入防伪码或者点击扫描图标进行扫描</view>
                <view class="input-box">
                    <input type="text" :value="code" @input="onInputChange" :auto-focus="true" />
                    <uni-icons type="scan" size="36px" @tap="onScan" />
                </view>
            </view>
            <button class="btn" type="primary" @tap="onVerification">验 一 验</button>
            <view class="result-content">
                <view class="result">{{ queryResult }}</view>
            </view>
        </view>
    </view>
</template>

<script>
import Util from '@/utils/utils';
import httpConfig from '@/utils/httpConfig'
import NavBar from '@/components/navBar/index'
const app = getApp()
export default {
    components: {
        'nav-bar': NavBar
    },
    data() {
        return {
            navbarData: {
                isGoHome: true,
                isGoBack: true,
                title: '镜片防伪查询', //导航栏 中间的标题
            },
            height: app.globalData.height,
            code: null,
            queryResult: ''
        }
    },
    onLoad(options) {
        // 支付宝独立处理
        // #ifdef MP-ALIPAY
        !options && (options = {})
        options['q'] = app.globalData.alipayQuery
        // #endif
        if (options.q) {
            this.dealCode(options.q)
        }
        // 支付宝独立处理
        // #ifdef MP-ALIPAY
        uni.hideBackHome(); // 隐藏
        Util.resetGlobalDataParams(app,['alipayQuery'])
        // #endif
    },
    methods: {
        dealCode(text) {
            const url = decodeURIComponent(text)
            if(url.indexOf('?code') > -1) {
                const code = url.split('?code')[1].split('=')[1]
                console.log(code)
                this.setData({
                    code: code
                })
            }
        },
        onInputChange(e) {
            this.setData({
                code: e.detail.value
            })
        },
        onScan() {
            const self = this
            uni.scanCode({
                success(res) {
                    if (res && res.result) {
                        self.dealCode(res.result)
                    }
                }
            })
        },
        onVerification() {
            const self = this
            const { code } = this
            if (!code) {
                uni.showToast({
                    icon: 'none',
                    title: '输入防伪码或者点击扫描图标进行扫描',
                })
                return
            }
            const data = {
                code: code
            }
            console.log('code', code)
            console.log('httpConfig', httpConfig, httpConfig.antiCounterfeitingVerificationHost)
            uni.request({
                url: httpConfig.antiCounterfeitingVerificationHost + '/erp/oppsisystem/api/puwx/getByCode.do',
                data: data,
                header: {
                    'Content-Type': 'application/x-www-form-urlencoded' // 默认值
                },
                method: "POST",
                success(res) {
                    if (res.data.code === 'success') {
                        self.setData({
                            queryResult: res.data.data
                        })
                    } else {
                        uni.showToast({
                            icon: 'none',
                            title: res.msg,
                            duration: 4000
                        })
                    }
                },
                fail(err) {
                    uni.showToast({
                        title: err,
                        icon: 'none',
                    })
                }
            })
        }
    }
}
</script>

<style>
.anti-counterfeiting-verification {
  padding: 120rpx 50rpx 60rpx;
}
.tips {
  text-align: center;
  font-size: 32rpx;
}
.input-box {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  margin-top: 40rpx;
  padding: 20rpx 0;
}
.input-box input {
  display: block;
  flex: 1;
  height: 54rpx;
  line-height: 54rpx;
  padding: 0 10rpx;
}
.btn {
  margin: 60rpx 0; 
}
.result {
  text-align: center;
  font-size: 36rpx;
  color: #ff3300;
}
</style>