<%@ 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">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/dist/viewer.css" media="all">
    <style>
        html{
            background-color: #fff;
        }
        .layui-form-select dl{
            max-height:200px;
            width: 80%;
        }
    </style>
</head>
<body>
<div class="aaa layui-form" id="LAY_app">
    <div class="layui-card">
            <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 w-200" >
                        <input type="text" name="name" lay-verify="name" autocomplete="off" placeholder="请输入姓名" class="layui-input" value="${emp.name}">
                    </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 ">
                        <input type="text" name="mobile" lay-verify="mobile" autocomplete="off" placeholder="请输入联系电话" class="layui-input" value="${emp.mobile}">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs12 mb-10 pr-30">

                <div class="layui-inline layui-col-xs6">
                    <label class="layui-form-label w-130">工号：</label>
                    <div class="layui-input-block w-200" >
                        <input type="text" name="jobNumber"  autocomplete="off" class="layui-input" value="${emp.jobNumber}">
                    </div>
                </div>
                <div class="layui-inline layui-col-xs6">
                    <label class="layui-form-label w-130">入职时间：</label>
                    <div class="layui-input-block w-200" >
                        <input type="text" name="hiredate" autocomplete="off"  class="layui-input" id="hiredate" placeholder="入职时间" value="<fmt:formatDate value="${emp.hiredate}" pattern="yyyy-MM-dd" />">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs12 mb-10 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 ">
                        <input type="text"  name="loginName" lay-verify="loginName" autocomplete="off" placeholder="请输入登录账号" class="layui-input" value="${user.loginName}">
                    </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" >
                        <c:if test="${empty user.password}">
                            <input type="password" name="password" lay-verify="password" autocomplete="new-password" placeholder="请输入登录密码" class="layui-input" value="">
                        </c:if>
                        <c:if test="${not empty user.password}">
                            <input type="password" name="password" lay-verify="password" autocomplete="new-password" placeholder="请输入登录密码" class="layui-input" value="default">
                        </c:if>
                    </div>
                </div>
            </div>

        <div class="layui-col-xs12 mb-10 pr-30">
            <div class="layui-inline layui-col-xs6">
                <label class="layui-form-label w-130">身份证号：</label>
                <div class="layui-input-block w-200" >
                    <input type="text" name="idCard"  autocomplete="off" lay-verify="idCode" class="layui-input" value="${emp.idCard}">
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-form-item  mb-5">
            <div class="layui-inline layui-col-xs6">
                <label class="layui-form-label">焊工证：</label>
                <div class="layui-input-block">
                    <div id="imgsDiv">
                        <c:if test="${not empty emp.hgImgs}">
                            <div class="bj-img imgSpan">
                                <span class="layui-icon-close layui-icon" onclick="delImg(this,'imgs')"></span>
                                <img src="${commonStaticImgPath}${emp.hgImgs}" height="700" width="1200">
                                <input type="hidden" name="hgImgs" class="hgImgs" value="${emp.hgImgs}">
                            </div>
                        </c:if>
                    </div>

                    <div class="upload-container" id="uploader" <c:if test="${not empty emp.hgImgs}">hidden</c:if>>
                        <img src="" alt="img placeholder" id="imgsAdd">
                    </div>
                </div>
            </div>
            <div class="layui-inline layui-col-xs6">
                <label class="layui-form-label">低压电工证：</label>
                <div class="layui-input-block">
                    <div id="imgsDiv2">
                        <c:if test="${not empty emp.dydgImgs}">
                            <div class="bj-img imgSpan">
                                <span class="layui-icon-close layui-icon" onclick="delImg(this,'imgs2')"></span>
                                <img src="${commonStaticImgPath}${emp.dydgImgs}" height="700" width="1200">
                                <input type="hidden" name="dydgImgs" class="dydgImgs" value="${emp.dydgImgs}">
                            </div>
                        </c:if>
                    </div>

                    <div class="upload-container" id="uploader2" <c:if test="${not empty emp.dydgImgs}">hidden</c:if>>
                        <img src="" alt="img placeholder" id="imgsAdd2">
                    </div>
                </div>
            </div>
        </div>

           <div class="layui-col-xs12 mb-10 pr-30">
               <div class="layui-inline layui-col-xs12">
                   <label class="layui-form-label w-130"><i class="mark">*</i>角色：</label>
                   <div class="layui-input-block ">
                      <%-- <input type="radio" name="roleId" title="业务" value="2"  lay-type="业务" <c:if test="${emp.roleId eq '2' }">checked</c:if>>
                       <input type="radio" name="roleId" title="设计" value="3"  lay-type="设计" <c:if test="${emp.roleId eq '3' }">checked</c:if>>
                       <input type="radio" name="roleId" title="工程负责人" value="4"  lay-type="工程负责人" <c:if test="${emp.roleId eq '4' }">checked</c:if>>
                       <input type="radio" name="roleId" title="施工队负责人" value="5"  lay-type="施工队负责人" <c:if test="${emp.roleId eq '5' }">checked</c:if>>
                       <input type="radio" name="roleId" title="施工人员" value="8"  lay-type="施工人员" <c:if test="${emp.roleId eq '8' }">checked</c:if>>
                       <input type="radio" name="roleId" title="文员" value="6"  lay-type="文员" <c:if test="${emp.roleId eq '6' }">checked</c:if>>
                       <input type="radio" name="roleId" title="财务" value="1"  lay-type="财务" <c:if test="${emp.roleId eq '1' }">checked</c:if>>
                       <input type="radio" name="roleId" title="仓库管理" value="7"  lay-type="仓库管理" <c:if test="${emp.roleId eq '7' }">checked</c:if>>--%>
                          <c:forEach items="${roles}" var="role">
                              <input type="radio" name="roleId" title="${role.columns.name}" value="${role.columns.id}"  lay-type="${role.columns.name}" <c:if test="${emp.roleId eq role.columns.id }">checked</c:if>>
                          </c:forEach>
                   </div>
               </div>
           </div>

            <input type="hidden" name="id" id="id" value="${emp.id}">
    </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/dist/viewer.js"></script>
<script type="text/javascript">
    var viewer = new Viewer(document.getElementById('LAY_app'));
    //初始数据
    var $form;
    var form;
    var upload;
    var $;
    var imgs='';
    var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
    var reg =/^(0|[1-9][0-9]*)(\.\d+)?$/;
    var regIdCard = /^(\d{2})(\d{4})(\d{4})(\d{2})(\d{2})\d{2}(\d)(\d|X)$/;
    var pass = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]+$/;
    layui.use(['form', 'table', 'upload','laydate', 'jquery'], function () {
        $ = layui.jquery;
        form = layui.form;
        upload = layui.upload;
        laydate = layui.laydate;
        $form = $('form');

        form.verify({
            loginName:function(value,item){
                if(!$.trim(value)){
                    return "登录账号不能为空,请输入账号后保存！";
                }
                if($.trim(value).length<6){
                    return "登录账号不得小于6位,请重新输入！";
                }
            },
            password:function(value,item){
                if(!$.trim(value)){
                    return "登录密码不能为空,请输入登录密码后保存！";
                }
                if(!value=='default' && !pass.test($.trim(value))){
                    return "请输入密码格式为数字加字母！";
                }
            },
            name:function(value,item){
                if(!$.trim(value)){
                    return "姓名不能为空,请输入姓名后保存！";
                }
            },
            years:function(value,item){
                if($.trim(value)){
                    if(!reg.test($.trim(value))){
                        return "工作年限不能为负数！";
                    }
                }
            },
            mobile:function(value,item){
                if(!$.trim(value)){
                    return "手机号码不能为空,请输入手机号码后保存！";
                }
                if(!myreg.test($.trim(value))){
                    return "请输入正确的手机号码后保存！";
                }
            },
            idCode:function(value,item){
                if($.trim(value)){
                    if(!regIdCard.test($.trim(value))){
                        return "请输入正确的身份证号！";
                    }
                }
            },

        });

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

                });
            }
            , done: function (res) {

                $("#uploader").hide();
                addImg(res.path,"imgs","imgsDiv","hgImgs");
            }
            , error: function () {
                //请求异常回调
            }
        });

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

                });
            }
            , done: function (res) {
                $("#uploader2").hide();
                addImg(res.path,"imgs2","imgsDiv2","dydgImgs");
            }
            , error: function () {
                //请求异常回调
            }
        });

        laydate.render({
            elem: '#hiredate'
           ,trigger: 'click'
          // ,type: 'datetime'
        });

        var saveFag=false;
        form.on('submit(confirm)', function(data){
            if(saveFag){
                return false;
            }
             var roleName = $("input[type=radio]:checked").attr("lay-type");
             if(isBlank(roleName)){
                 layer.msg("请选择员工角色!",{time:2000});
                 return false;
             }
             data.field.roleName=roleName;
            var field=data.field;
            saveFag=true;
            $.ajax({
                url:'${ctx}/traderEmploye/employeSave',
                method:'post',
                data:field,
                dataType:'JSON',
                success:function(res){
                    console.log(res);
                    if(res.code=="200"){
                        layer.msg("保存成功",{time:1000});
                        closeDiv();
                        parent.table.reload('test');
                    }else{
                        layer.msg("保存失败,"+res.errMsg,{time:1000});
                        saveFag=false;
                    }
                },
                error:function (data) {
                    saveFag=false;
                }
            }) ;
        });

    })


    function addImg(data,imgType,div,imgPicker) {

        var html = '<div class="bj-img imgSpan"><span class="layui-icon-close layui-icon" onclick="delImg(this, \''+imgType+'\')"></span>';
        html += '<img src="${commonStaticImgPath}' + data + '" height="700" width="1200"/>';
        html += '<input type="hidden" class="'+imgPicker+'" value="' + data + '" name="'+imgPicker+'"/> </div>';
        $("#"+div).append(html);
    }

    function delImg(that,imgType) {
        $(that).parent().remove();
        if('imgs2'==imgType){
            $("#uploader").hide();
            $("#uploader2").show();
        }else{
            $("#uploader2").hide();
            $("#uploader").show();
        }
    }

    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>
