@extends('layouts.home')
@section('style')
    <style>
        .x-body{
            min-height: 500px;
        }
        .input_line input{
            border:none;
        }
        .x-body .label_wx{
            text-align: left;
        }
        .x-body .layui-form-item .wx_box_input {
            display: block;
            float: none;
            left: -3px;
            width: auto;
            /*margin: 0 0 0px 96px!important;*/
        }
        .total p{
            color: #000;
        }
    </style>
@endsection
@section('body')
    <div class="x-body">
        <div style="height:40px;margin-top: 30px">
            <div style="display: flex;justify-content: center;align-items: center">
                <div><input type="text" name="title" placeholder="点击此框扫码" class="layui-input" id="scanQRCode"></div>
                <div><div class="layui-btn layui-btn-sm" onclick="go_zxd()">跳转</div></div>
                <div></div>
            </div>
        </div>
        <div>
            <div id="wrap" style="font-size: 14px">
                <div id="canvanCode" style="width: 300px;height: 400px"></div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="/js/jweixin-1.1.0.js"></script>
    <script>
        onload = function () {
            var alem = document.getElementById('scanQRCode');
            alem.focus();
            var len = 0;
            len = alem.value.length + 1;

            if (len == 0) {
                return;
            }

            if (alem.createTextRange) {  //IE浏览器
                var sel = alem.createTextRange();
                sel.moveStart("character", len);
                sel.collapse();
                sel.select();
            }
            else {           //非IE浏览器   包括mozilla，chrome，safari
                alem.selectionStart = len;
            }
        }
        function GetQueryString(name)
        {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        }
        function go_zxd() {
            let url = '{{env("APP_PDA_URL")}}#/' + GetQueryString('url') +'?id='+ $('#scanQRCode').val() +'&NoNumber=true&type=true'
            window.location.href = url
        }
        // $('#scanQRCode').keyup(function(){
        //     $('#scanQRCode').val($('#scanQRCode').val() + ',')
        // })
        $.post("/home/wxparam", {
            '_token': '{{ csrf_token() }}',
            'url': (window.location.href).split('#')[0],
        }, res => {
            let result = JSON.parse(res)
            wx.config({
                // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                debug: false,
                // 必填，公众号的唯一标识
                appId: result.appId,
                // 必填，生成签名的时间戳
                timestamp: result.timestamp,
                // 必填，生成签名的随机串
                nonceStr:result.nonceStr,
                // 必填，签名，见附录1
                signature:result.signature,
                // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                jsApiList : [ 'checkJsApi', 'scanQRCode' ]
            });
        })
        wx.error(function(res) {
            alert("出错了：" + res.errMsg);//这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
        });

        wx.ready(function() {
            wx.checkJsApi({
                jsApiList : ['scanQRCode'],
                success : function(res) {
                    alert('success')
                }
            });
            //点击按钮扫描二维码
            document.querySelector('#scanQRCode').onclick = function() {
                wx.scanQRCode({
                    needResult : 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                    scanType : [ "qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                    success : function(res) {
                        var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                        $('#scanQRCode').val(result.slice(result.indexOf(',')+1) +  ',' + $('#scanQRCode').val() )
                    }
                });
            };
        });
    </script>
@endsection