#set(seoTitle="贝塔网络用户实名认证")
#@b5Layout()
#define menu()
    #include("../dashboard/_left_menu.html", sidebar="setting", submenu="realName")
#end

#define main()
<div id="main">
    <header class="mb-3">
        <a href="#" class="burger-btn d-block d-xl-none">
            <i class="bi bi-justify fs-3"></i>
        </a>
    </header>
    <div class="page-heading">
        <div class="page-title">
            <div class="row">
                <div class="col-12 col-md-6 order-md-1 order-last">
                    <h3>实名认证</h3>
                </div>
                <div class="col-12 col-md-6 order-md-2 order-first">
                    <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/my">首页</a></li>
                            <li class="breadcrumb-item active" aria-current="page">实名认证</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <section class="section">
            <div class="row">
                <div class="col-12 col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <form id="form">
                                <div class="form-group">
                                    <label for="realname" class="form-label">姓名</label>
                                    <input type="text" name="realName.realname" id="realname" class="form-control" placeholder="请如实填写您的姓名" value="">
                                </div>
                                <div class="form-group">
                                    <label for="idCard" class="form-label">身份证号</label>
                                    <input type="text" name="realName.idCard" id="idCard" class="form-control" placeholder="请如实填写您的身份证号码" value="">
                                </div>
                                #if(realName?.status == 1)
                                <div class="form-group">
                                    <button type="button" class="btn btn-primary" disabled>已进行实名认证</button>
                                </div>
                                #else
                                <div class="form-group">
                                    <button type="button" id="submit" class="btn btn-primary">提交实名</button>
                                </div>
                                #end
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div class="modal fade text-left" id="inlineForm" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel33" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
             role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel33">打开支付宝扫码认证</h4>
                    <button type="button" class="close" data-bs-dismiss="modal"
                            aria-label="Close">
                        <i data-feather="x"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="d-flex justify-content-center align-items-center flex-column">
                        <div class="avatar avatar-2xl">
                            <div id="qrcode"></div>
                        </div>
                        <p class="text-small">手机扫码认证完成后请手动点击查询认证结果</p>
                        <button id="queryRealName" type="button" class="btn btn-primary ms-1"
                                data-bs-dismiss="modal">
                            <i class="bx bx-check d-block d-sm-none"></i>
                            <span class="d-none d-sm-block">认证完成查询认证结果</span>
                        </button>
                    </div>

                </div>

            </div>
        </div>
    </div>

    #include("../dashboard/_footer.html")
</div>
#end

#define js()
<script src="/assets/easy-qrcode/easy.qrcode.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
        function generateRandomString(length) {
            var result = '';
            var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            var charactersLength = characters.length;
            for (var i = 0; i < length; i++) {
                result += characters.charAt(Math.floor(Math.random() * charactersLength));
            }
            return result;
        }
        var qrcode;
        $(function () {
            const myModal = new bootstrap.Modal('#inlineForm', {})
            $('#submit').click(function(){
                //获取数据
                let data =  $("#form").serialize();
                //发起ajax请求
                $.ajax({
                    method: 'post',
                    url: '/my/setting/doRealName',
                    //表单数据
                    data: data,
                }).then(ret => {
                    console.log(ret)
                    if(ret.state == "ok") {
                        if(qrcode){
                            qrcode.clear();
                        }
                        qrcode = new QRCode(document.getElementById("qrcode"), {
                            text: ret.certifyUrl,
                            width: 360,
                            height: 360,
                            colorDark : "#000000",
                            colorLight : "#ffffff",
                            correctLevel : QRCode.CorrectLevel.H,
                            quietZone: 20,
                            quietZoneColor: "rgba(0,0,0,0)",
                        });
                        myModal.show()
                    } else {
                        alert(ret.msg)
                    }
                });
            })
            $("#queryRealName").click(function(){
                $.ajax({
                    method: 'post',
                    url: '/my/setting/queryRealName'
                }).then(ret => {
                    console.log(ret)
                    if(ret.state == "ok") {
                        alert("认证成功")
                    }else{
                        alert(ret.msg)
                    }
                });
            });
        })
</script>
#end