<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="decorator" content="base"/>
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/static/css/reset.css" media="all">
    <style>
        html{
            background-color: #fff;
        }

        .layui-form-select dl{
            max-height:200px;
            width: 80%;
        }
    </style>
</head>
<body>
<div class="layui-form">
    <div class="layui-card">
        <div class="layui-card-body over pt-20 pb-40 h-246">
            <div class="layui-col-xs12 mb-15 pr-30">
                <div class="layui-inline layui-col-xs6">
                    <label class="layui-form-label w-130"><i class="red">*</i>服务商名称：</label>
                    <div class="layui-input-block ">
                        <select class="" id="siteId" name="siteId" lay-verify="siteId" lay-filter="siteId" lay-search>
                            <option value="">请选择服务商</option>
                            <c:forEach items="${siteList}" var="site">
                                <option value="${site.columns.id}" title="${site.columns.name}" >${site.columns.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="layui-inline layui-col-xs6">
                    <label class="layui-form-label w-130"><i class="red">*</i>充值金额：</label>
                    <div class="layui-input-block w-200" >
                        <input type="text" name="payAmount" lay-verify="payAmount" autocomplete="off" placeholder="请输入金额" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs12 mb-10 pr-30">
                    <label class="layui-form-label w-130">备注：</label>
                    <div class="layui-input-block ">
                        <input type="text" name="remarks" lay-verify="remarks" autocomplete="off"  class="layui-input" >
                    </div>
            </div>
            <div class="layui-col-xs12 mb-10 pr-30">
                <label class="layui-form-label"><i class="red">*</i>充值凭证：</label>
                <div class="layui-input-block">
                    <input type="hidden" name="img" id="img" lay-verify="required">
                    <div id="imgsDiv">

                    </div>

                    <div class="upload-container " id="uploader">
                        <img src="" alt="img placeholder">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="operate-footer">
        <input type="button" lay-submit lay-filter="confirm" id="confirm" class="layui-btn " value="保存">
        <input type="button" value="取消" class="layui-btn layui-btn-primary " onclick="closeDiv();">
    </div>
</div>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/data.js"></script>
<script type="text/javascript">
    //初始数据
    var $form;
    var form;
    var upload;
    var $;
    var res =/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;

    layui.use(['form', 'table', 'upload', 'jquery'], function () {
        $ = layui.jquery;
        form = layui.form;
        upload = layui.upload;
        $form = $('form');
        var reg =/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
        form.verify({
            siteId:function(value,item){
                if(!$.trim(value)){
                    return "所属服务商不能为空,请选择服务商后保存！";
                }
            },
            payAmount:function(value,item){
                if(!$.trim(value)){
                    return "登录账号不能为空,请输入地址后保存！";
                }
                if(!reg.test($.trim(value))){
                    return "请重新输入正确金额！";
                }
            }
        });

var checkSub = false;
var inys = 1;
        form.on('submit(confirm)', function(data){
            inys++;
            if(checkSub){
                closeDiv();
                parent.table.reload('test');
                return
            }
            if(!$("#confirm").hasClass("layui-btn-disabled")){
                $("#confirm").addClass("layui-btn-disabled");
                console.log("layui-btn-disabled "+checkSub +"; isd : "+inys)
            checkSub = true;
            $.ajax({
                url:'${ctx}/fittingAmount/save',
                method:'post',
                data:data.field,
                dataType:'JSON',
                success:function(res){
                    if(res.code='200'){
                        $("#confirm").removeClass("layui-btn-disabled");
                        layer.msg("保存成功",{time:1000});
                        closeDiv();
                        parent.table.reload('test');
                    } else{
                        layer.msg("保存失败",{time:2000});
                    }
                },
                complete:function(){
                    checkBut = false;
                },
                error:function (data) {
                }
            }) ;
            }
        });

        var upload = layui.upload;
        //执行实例---- 上传图片
        //执行实例
        var uploadInst = upload.render({
            elem: '#uploader' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,number: 1
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                if(res.code > 0){
                    return layer.msg("上传失败！",{icon:2});
                }
                var imgPath = res.path;
                addImg(imgPath);

            }
            , error: function () {
                //请求异常回调
            }
        });

    })
    function addImg(data){
        var html = '<div class="bj-img imgSpan"><span class="layui-icon-close layui-icon" onclick="delImg(this)"></span>';
        html += '<img src="${commonStaticImgPath}'+data+'" height="700" width="1200"/>';
        html += '</div>';
        $("#imgsDiv").append(html);
        $("#img").val(data);
        $("#uploader").addClass("layui-hide");
    }

    //图片删除
    function delImg(that){
        $("#img").val('');
        $("#uploader").removeClass("layui-hide");
        $(that).parent().remove();
    }

    function  closeDiv() {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index);
    }

    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }


</script>
</body>
</html>
