{extend name="base" /}
{block name="style"}
<link rel="stylesheet" href="__ADMIN__/assets/vendors/dropzone/css/dropzone.css">
<style>
    .dropzone {
        width: 190px;
    }
</style>
{/block}
{block name="main"}
<div id="page-container">
    <div class="page-content main-content my-main-content">
        <div class="main-content-inner">
            <form class="form" action="{$admin_root}/qrcode" method="post">
                <input type="hidden" name="qrcodeImage" id="image"/>
                <div class="row">
                    <!-- data 表格 -->
                    <div class="col-lg-8 col-sm-12">
                        <div class="card">
                            <div class="card-body">
                                <h5>添加二维码</h5>

                                <b class="text-muted mb-3 mt-4 d-block">类别</b>

                                <div class="custom-control custom-radio primary-radio custom-control-inline">
                                    <input type="radio" value="0" checked id="type1" name="type"
                                           class="custom-control-input">
                                    <label class="custom-control-label" for="type1">微信</label>
                                </div>

                                <div class="custom-control custom-radio primary-radio custom-control-inline">
                                    <input type="radio" value="1" id="type2" name="type"
                                           class="custom-control-input">
                                    <label class="custom-control-label" for="type2">支付宝</label>
                                </div>

                                <b class="text-muted mb-3 mt-4 d-block">二维码</b>

                                <div class="mt-4">
                                    <div class="dropzone dropzone-light" id="qrcode">
                                        <div class="dz-default dz-message">
                                            <span><i class="ti-image"></i></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group mt-3">
                                    <label class="col-form-label">识别地址</label>

                                    <input class="form-control" readonly  type="text" name="qrcode" value=""/>

                                </div>


                                <div class="form-group mt-3">
                                    <label class="col-form-label">二维码金额</label>
                                    <input class="form-control" type="text" name="amount" value=""/>
                                </div>
                                <small class="form-text text-muted">留空则为通用二维码。每种支付方式都需要一个通用二维码，且通用二维码只能存在一张</small>


                                <button  type="submit" class="btn btn-primary ladda-button ladda_btn btn-fixed-w mt-4"
                                        data-style="expand-right">
                                    <span class="ladda-label">确认保存</span>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- data 表格 -->
                </div>
            </form>
        </div>
    </div>
</div>
{/block}
{block name='script'}
<script src="__ADMIN__/assets/vendors/dropzone/js/dropzone.js"></script>
<script>
    Dropzone.autoDiscover = false;
    $(function () {

        $f.ajaxSubmitCallback = function(data){
            if( data.code == 0 ){
                $alert.success('添加成功').then(function(){
                    location.href='{$admin_root}/qrcode';
                });
            }
        }

        $('#qrcode').dropzone({
            url: "{$admin_root}/upload/image",
            paramName: 'image',
            init: function () {
                this.on('removedfile', function (file) {
                    var deleteId = $("#image").val();
                    $("#image").prop('value','');
                    $("input[name='qrcode']").prop({'value':'','placehoder':''});
                    $api.get('{$admin_root}/upload/delete',{file:deleteId});
                    this.enable();
                })
            },
            maxFiles:1,
            acceptedFiles: "image/*",
            addRemoveLinks: true,
            dictCancelUpload: '取消',
            dictRemoveFile: '删除',
            sending:function(data,xhr){
                xhr.setRequestHeader('X-CSRF-TOKEN',$('meta[name="csrf-token"]').attr('content'));
            },
            success: function (file, data) {
                this.disable();
                refreshToken(function(){
                    if( data.code == 0 ){
                        $("#image").prop('value',data.data) ;
                        $("input[name='qrcode']").prop('placeholder','正在识别二维码...');
                        $api.post('{$admin_root}/qrcode/decode',{qrcode:data.data},function (d){
                            if(d.code == 0){
                                $("input[name='qrcode']").prop({
                                    'placeholder':'',
                                    'value':d.data,
                                });
                            }
                        })
                    }
                });
                if (file.previewElement) {
                    return file.previewElement.classList.add("dz-success");
                }
            },
            error: function () {
                $("#image").prop('value','');
                refreshToken();
            },
        });
    })
</script>
{/block}