<%@ 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}/static/css/reset.css" media="all">
    <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">
    <style>
        body .layer-ext-myskin .layui-layer-content {
            overflow: visible;
        }
        html{
            background-color: #fff;
        }
    </style>
</head>
<body style="">

<div class="" id="" style="height: 400px;">
    <div class="layui-card" style="height: 470px;padding: 20px;">
        <div class="layui-card-body">
            <form class="layui-form" action="" lay-filter="component-form-element">
                <input type="hidden" name="id" value="${member.columns.id}">
                <div class="layui-form-item ">
                    <label class="layui-form-label">服务工程师：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input layui-bg-gray" value="${member.columns.name}" disabled>
                    </div>
                    <label class="layui-form-label">工作年限：</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input sf-ly-date layui-bg-gray"  id="years" name="years" lay-verify="years" value="${member.columns.years}" disabled>
                    </div>
                </div>
                <div class="layui-form-item mt-15">
                    <label class="layui-form-label"><%--<span class="mark">*</span>--%>手机号：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="mobile" required lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="layui-input layui-bg-gray" value="${member.columns.mobile}" disabled>
                    </div>
                    <label class="layui-form-label">登录账号：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="loginName" required lay-verify="required" placeholder="请输入登录名" autocomplete="off" class="layui-input layui-bg-gray" value="${member.columns.login_name}" disabled>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-form-item mt-15">
                    <label class="layui-form-label">相关资质：</label>
                    <div class="layui-input-block">
                        <div id="imgsDiv">
                            <c:forEach items="${imglist}" var="img">
                                <div class="bj-img imgSpan"><%--<span class="layui-icon-close layui-icon" onclick="delImg(this)"></span>--%>
                                    <img src="${commonStaticImgPath.concat(img)}" data-img="${commonStaticImgPath.concat(img)}" height="700" width="1200"/>
                                    <input type="hidden" class="imgPicker" value="${img}"/>
                                </div>
                            </c:forEach>
                        </div>
                        <%--<div class="upload-container" id="uploader">
                            <img src="" alt="img placeholder" id="imgsAdd">
                        </div>--%>
                    </div>
                </div>
                <input type="hidden" name="imgs" id="imgs" value="${member.columns.license_img}">
<%--                <div class="layui-form-item text-c" style="margin-top: 20px;">--%>
<%--                    &lt;%&ndash;<button class="layui-btn " lay-submit lay-filter="component-form-element">保存</button>&ndash;%&gt;--%>
<%--                    <button class="layui-btn layui-btn-sm mt-20 w-76" onclick="cancel()">取 消</button>--%>
<%--                </div>--%>
                <div class="operate-footer pr-15" >
                    <button class="layui-btn layui-btn-primary" onclick="cancels()">取消</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="lookImg" class="hide pos-r">
    <div style="position:relative;width:100%;height:430px;">
        <div class="w-500 h-360 lookImg">
            <img src="" width="80%" id="image">
        </div>
    </div>
</div>

<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script type="text/javascript">
    var imgsCount=${imgsCount};
    var imgs='';
    var upload ;
    var reg =/^(0|[1-9][0-9]*)(\.\d+)?$/;
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'jquery', 'layer', 'laydate','upload'], function(){
         $ = layui.jquery;
        var form = layui.form;
        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引;
        upload = layui.upload;
        if (imgsCount>=3) {
            $("#uploader").hide();
        }

        form.verify({
            years:function(value,item){
                if(!reg.test($.trim(value))){
                    return "工作年限不能为负数！";
                }
            }
        });

        form.on('submit(component-form-element)', function(data){
            var postData = data.field;
            var valid = true;
            $.ajax({
                url: '${ctx}/siteEmployee/updateSaveBefore',
                data: postData,
                type: 'post',
                async: false,
                success: function(result){
                    if("1" == result){
                        layer.msg("登录名已被占用!", {icon:2});
                        valid = false;
                    }
                }
            });
            if(!valid){
                return false;
            }

            $.post('${ctx}/siteEmployee/updateSave', postData, function(result){
                if("ok" == result){
                    layer.msg("保存成功", {icon:1}, function(){
                        parent.location.reload();
                        parent.layer.close(index);
                    });
                }else{
                    if("err" == result){
                        layer.msg("保存失败，请刷新重试!", {icon:2});
                    }else if("existsLoginName" == result){
                        layer.msg("保存失败，登录名已被占用!", {icon:2});
                    }

                }
            });
            return false;
        });

        var uploadInst = upload.render({
            elem: '#uploader' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {

                });
            }
            , done: function (res) {
                addImg(res.path);
            }
            , error: function () {
                //请求异常回调
            }
        });

        $(".imgSpan img").click(function(){
            var img = $(this).attr("data-img");
            console.log(img);
            $("#lookImg img").attr('src',img);
            layer.open({
                type:1,
                title:'查看图片',
                area:['500px','480px'],
                content:$("#lookImg")
            })
        })

    });

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

    function addImg(data){
        imgs = '';
        imgsCount++;
        if (imgsCount >= 3) {
            $("#uploader").hide();
        }else{
            $("#uploader").show();
        }
        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 += '<input type="hidden" class="imgPicker" value="'+data+'"/> </div>';
        $("#imgsDiv").append(html);
        var imgSelector = $(".imgPicker");
        imgSelector.each(function (index) {
            var img = $(this).val();
            if (!isBlank(img)) {
                imgs += img + ",";
            }
        });
        console.log(imgs);
        $("#imgs").val(imgs);
    }

    function delImg(that){
        imgsCount--;
        if (imgsCount < 3) {
            $("#uploader").show();
        }
        $(that).parent().remove();
        var imgSelector = $(".imgPicker");
        imgSelector.each(function (index) {
            var img = $(this).val();
            if (!isBlank(img)) {
                imgs += img + ",";
            }
        });
        $("#imgs").val(imgs);
    }

    function cancel(){
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }




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