{include file="public/header"}
<style>
    .x-body .layui-row{  margin-top:-10px;  line-height:25px;  background:#f5f5f5;  border-radius:10px;  }
    .x-body .layui-row .xblock button{  margin-top:-20px;  }
    .x-body .layui-form{  margin-top:15px;  margin-bottom:10px;  }
    .x-body .layui-form .layui-input-block{  display:inline-block;  width:150px;  margin-left:0;  }
    .x-body .layui-form .layui-form-item{  display:inline-block;  margin-left:0;  }
    .x-body .layui-form .layui-form-item .layui-form-label{  width:48px;  }
    .x-body .layui-form .layui-form-item .layui-input-block{  margin-left:-10px;  width:100px;  }
    .x-body .layui-form .layui-form-item .layui-input-block .layui-form-radio i{  margin-right:4px;  }
    .x-body .layui-form .layui-form-item  .layui-form-radio{  margin-top:6px;  margin-right:-8px;  }
    .layui-input-block dl{  text-align:left;  }
    .x-so{  margin:0;  }
    .x-so input.layui-input{  width:150px;  }
    .x-nav{overflow: inherit; } .x-nav .refresh{margin-right: 20px; }
    .change_box .actived{border-right:1px solid #e5e5e5;border-left:1px solid #e5e5e5;border-top:1px solid #e5e5e5; position: relative; color: #3daae9; }
    .change_box .actived:after{content: ""; bottom: -2px; background: #fff; width: 100%; height: 5px; position: absolute; left: 0; }
    .change_box a{font-size: 14px;padding: 10.5px 10px;}

    .alert{position:fixed; top:15%; left:30%; width:400px; min-height:320px; background:#fff; border:1px solid #e2e2e2; border-radius:5px; display:none;}
    .alert-title{background:#009688; height:40px; text-align: center; line-height:40px; font-size:14px; border-bootom:1px solid #F2F2F2;color:#fff;}
    .add_input{padding: 10px; font-size: 14px;text-align: center;} 
    .alert-footer{padding:20px; text-align:center;}
    .alert-footer span{padding:10px 30px; display:inline-block; border-radius:5px; cursor:pointer;}
    .save {background: #fff;width: 185px; overflow-y: hidden; margin: 0 auto;padding:20px 0;}
    .save .upload {margin:0 auto; }
    .clearfix {zoom: 1; }
    .save .upload .upload_btn_item {width: 180px; height: 112px; background: url({$Think.ADMIN_STATIC_DOMAIN}/static/admin/images/upload-bg.jpg) no-repeat; float: left; -webkit-background-size: 100%; background-size: 100%; /* margin-right: 0.2rem; margin-bottom: 0.2rem;*/ position: relative; }
    .save .title{
        text-align: center;
        font-size: 16px;
    }
    .save .upload .upload_btn {position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
    .save .upload .img-box .item_file{width:180px; height: 112px; float: left; -webkit-background-size: cover; background-size: cover;position: relative; z-index: 1; }
    .save .upload .upload_btn{position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
    .save .upload .uploader_bg:before {content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url({$Think.ADMIN_STATIC_DOMAIN}/static/admin/images/login.gif) rgba(0, 0, 0, 0.5) center center no-repeat; -webkit-background-size: 30px 30px; background-size: 30px 30px; }
    .save .upload .error{position: absolute; top: 0; left: 0; z-index: 99; width:100%; height: 100%; line-height: 28px; rgba(0, 0, 0, 0.5) center center no-repeat; -webkit-background-size: 30px 30px; background-size: 30px 30px; }
    .save .upload .upload_btn_item.login-img:before{content: ""; background: url({$Think.ADMIN_STATIC_DOMAIN}/static/admin/images/login.gif) no-repeat center center; -webkit-background-size: 40px 40px; background-size: 40px 40px; position: absolute; z-index: 99; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); pointer-events:none; }
    .save .upload .remove_btn{position: absolute; right: -2px; top: -9px; width: 22px; height: 22px; background:#fff; border-radius: 999px; box-shadow: 0 5px 20px 0 rgba(0,0,0,.2); font-size: 12px; color: #666; font-weight: 600; text-align: center; line-height: 22px; z-index: 99; }
    .save .upload .uploader_bg .uploader_num{position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #FFFFFF; }
    #code_img img{width: 100%;}
</style>
<body>
<div class="x-nav" style="padding: 0px;">
      <span class="change_box">
        <a href="javascript:;" class="list-one" data-id="1">收款银行列表</a>
        <a href="javascript:;" class="list-two actived" data-id="2">收款二维码列表</a>
      </span>
    <a class="layui-btn layui-btn-small refresh" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<br>
<div class="layui-row">
    <span class="layui-btn" style="margin-left: 20px;" onclick="showAdd()">添加</span>
</div>
<div class="x-body">
    <table class="layui-table">
        <thead>
        <tr>
            <th>编号</th>
            <th>收款人账号</th>
            <th>二维码类型</th>
            <th>收款二维码</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {foreach name="recharge_list" item="vo"}
        <tr>
            <td>{$vo.id}</td>
            <td>{$vo.receivables_name}</td>
            <td>{$vo.receivables_type_word}</td>
            <td><img src="{$vo.receivables_qr_code}"></td>
            <td>{$vo.is_use}</td>
            <td>{$vo.create_time}</td>
            <td>
                <a href="javascript:;" onclick="edit_code(this)" receivables_id="{$vo.id}"  receivables_name="{$vo.receivables_name}" receivables_qr_code="{$vo.receivables_qr_code}" receivables_type="{$vo.receivables_type}" status="{$vo.status}">
                    <span class="layui-btn layui-btn-normal layui-btn-mini" style="background:#009688;" >修改</span>
                </a>
            </td>
            </td>
        </tr>
        {/foreach}
        </tbody>
    </table>
    {$recharge_list->render()}
</div>
<div class="alert" id="alert_add">
    <div class="alert-title">添加收款二维码</div>
    <div class="alert-main">
        <section class="save">
            <h3 class="title">上传二维码</h3>
            <div class="upload clearfix">
                <ul class="img-box">
                </ul>
                <div class="upload_btn_item">
                     <input class="upload_btn upload_file" type="file" accept="image/jpg,image/jpeg,image/png" multiple="">
                </div>
                <input type="hidden" id="img_url" value="">
            </div>
        </section>
        <div class="add_input">收款人账号:<input id="receivables_name" name="receivables_name" type="text" value maxlength="50" minlength="3"></div>
        <div class="add_input">二维码类型: <input name="code_type" class="required code_type" type="radio" value="3" maxlength="20" style="color:#999;width:35px;"><span>支付宝</span>
                                        <input name="code_type" class="required code_type" type="radio" value="2" maxlength="20" style="color:#999;width:35px;"><span>微信</span></div>
        <div class="add_input">是否启用: <input name="is_use" class="required is_use" type="radio" value="1" maxlength="20" style="color:#999;width:35px;" checked><span>是</span>
                                        <input name="is_use" class="required is_use" type="radio" value="0" maxlength="20" style="color:#999;width:35px;"><span>否</span></div>
    </div>
    <div class="alert-footer">
        <span onclick="do_add_code()" class="input_button" style="background:#009688; border:1px solid #e2e2e2;color:#fff;">提交</span>
        <span onclick="hiddenForm('alert_add')" class="input_button" style="background:#009688; border:1px solid #e2e2e2;color:#fff;">关闭</span>
    </div>
</div>
<div class="alert" id="alert_edit">
    <div class="alert-title">修改收款二维码</div>
    <div class="alert-main">
        <input type="hidden" id="edit_receivables_id" value="">
        <div class="add_input" style="width: 150px;margin:0 auto;"><span id="code_img"></span></div>
        <div class="add_input">收款人账号:<input id="edit_receivables_name" name="edit_receivables_name" type="text" value maxlength="50" minlength="3"></div>
        <div class="add_input">二维码类型: <input name="edit_code_type" class="required edit_code_type" type="radio" value="3" maxlength="20" style="color:#999;width:35px;"><span>支付宝</span>
                                        <input name="edit_code_type" class="required edit_code_type" type="radio" value="2" maxlength="20" style="color:#999;width:35px;"><span>微信</span></div>
        <div class="add_input">是否启用: <input name="edit_is_use" class="required edit_is_use" type="radio" value="1" maxlength="20" style="color:#999;width:35px;" checked><span>是</span>
                                        <input name="edit_is_use" class="required edit_is_use" type="radio" value="0" maxlength="20" style="color:#999;width:35px;"><span>否</span></div>
    </div>
    <div class="alert-footer">
        <span onclick="do_edit_code()" class="input_button" style="background:#009688; border:1px solid #e2e2e2;color:#fff;">提交</span>
        <span onclick="hiddenForm('alert_edit')" class="input_button" style="background:#009688; border:1px solid #e2e2e2;color:#fff;">关闭</span>
    </div>
</div>
<script>
    // 代理列表和添加代理切换
    $('.x-nav .change_box a').click(function(){
        // 样式切换
        $('.x-nav .change_box a').removeClass('actived');
        $(this).addClass('actived');
        // 页面切换
        var id = $(this).attr('data-id');
        if(id == "1") location.href = '/recharge/index';
        if(id == "2")  location.href = '/recharge/qr_code';
    });

    /**
     * 封装 AJAX 函数
     * @param url       目标地址
     * @param query     参数
     * @returns {string}
     */
    function ajax(url, query) {
        var returnData = "";
        $.ajax({
            url: url,
            data: query,
            type: 'POST',
            dataType: 'JSON',
            async: false,
            success: function (data) {
                returnData = data;
            }
        });
        return returnData;
    }
    // 显示用户的赔率
    function showAdd(){
        $('#alert_add').show();
    }
    //点击隐藏表单弹窗
    function hiddenForm(id) {
        $('#receivables_name').val('');
        $('#receivables_bank').val('');
        $('#receivables_cardnum').val('');
        $('#' + id).hide();
    }
    function do_add_code(){
        var query = new Object();
        query.img_url = $('#img_url').val();
        query.receivables_name = $('#receivables_name').val();
        query.code_type = $('.code_type:checked').val();
        query.is_use = $('.is_use:checked').val();
        if(query.img_url.length == 0){
            layer.alert("请上传收款二维码!");
            return false;
        }
        if(query.receivables_name.length == 0){
            layer.alert("请填写收款人姓名!");
            return false;
        }
        if(query.code_type.length == 0){
            layer.alert("请选择二维码类型!");
            return false;
        }

        if(query.is_use.length == 0){
            layer.alert("请选择收款银行卡状态!");
            return false;
        }
        var result = ajax('/recharge/do_add_code',query);
        if(result.code == 1){
            layer.alert(result.msg, {icon: 6}, function () {
                location.href = "/recharge/qr_code";
            });
        }else{
            layer.alert(result.msg,{icon:2});
        }
        return false;

    }
    function edit_code(obj){
        $('input:radio[name="edit_is_use"]').removeAttr('checked');
        $('input:radio[name="edit_code_type"]').removeAttr('checked');
        var receivables_name = $(obj).attr('receivables_name');
        var receivables_qr_code = $(obj).attr('receivables_qr_code');
        var receivables_id = $(obj).attr('receivables_id');
        var receivables_type = $(obj).attr('receivables_type');
        var status = $(obj).attr('status');
        var src = "<img src='"+receivables_qr_code+"'>";
        $('#code_img').html(src);
        $('#edit_receivables_id').val(receivables_id);
        $('#edit_receivables_name').val(receivables_name);
        if(receivables_type == 2){
            $("input[name='edit_code_type'][value=2]").attr("checked",true); 
            $("input[name='edit_code_type'][value=3]").removeAttr("checked");
        }else if(receivables_type == 3){
            $("input[name='edit_code_type'][value=3]").attr("checked",true); 
            $("input[name='edit_code_type'][value=2]").removeAttr("checked");
        }
        if(status == 1){
            $("input[name='edit_is_use'][value=1]").attr("checked",true); 
            $("input[name='edit_is_use'][value=0]").removeAttr("checked");
        }else{
            $("input[name='edit_is_use'][value=0]").attr("checked",true); 
            $("input[name='edit_is_use'][value=1]").removeAttr("checked");
        }
        $('#alert_edit').show();
    }
    function do_edit_code(){
        var query = new Object();
        query.receivables_id = $('#edit_receivables_id').val();
        query.receivables_name = $('#edit_receivables_name').val();
        query.code_type = $('.edit_code_type:checked').val();
        query.is_use = $('.edit_is_use:checked').val();
        if(query.receivables_name.length == 0){
            layer.alert("请填写收款账号!");
            return false;
        }
        if(query.code_type.length == 0){
            layer.alert("请选择收款二维码类型");
            return false;
        }
        if(query.is_use.length == 0){
            layer.alert("请选择收款二维码状态!");
            return false;
        }
        var result = ajax('/recharge/do_edit_code',query);
        if(result.code == 1){
            layer.alert(result.msg, {icon: 6}, function () {
                location.href = "/recharge/qr_code";
            });
        }else{
            layer.alert(result.msg,{icon:2});
        }
        return false;

    }
</script>
</body>

</html>