<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
    <meta name="decorator" content="base" />
    <link rel="stylesheet" href="${ctxPlugin}/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">

    <link rel="stylesheet" href="${ctxPlugin}/static/css/reset.css" media="all">
    <script src="${ctxPlugin}/lib/zTree/v3/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="${ctxPlugin}/lib/zTree/v3/js/jquery.ztree.core-3.5.min.js"></script>
    <script type="text/javascript" src="${ctxPlugin}/lib/zTree/v3/js/jquery.ztree.excheck-3.5.js"></script>


    <style>
        body .layer-ext-myskin .layui-layer-content {
            overflow: visible;
        }
        html {
            background-color: #fff;
            padding-bottom: 50px;
        }
    </style>
</head>
<body>

<div class="layui-form">
    <div class="">
        <div class="layui-card-body">
                <input type="hidden" name="id" value="${member.columns.id}">
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="mark">*</span>姓名：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input" value="${member.columns.name}">
                    </div>
                    <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" value="${member.columns.mobile}">
                    </div>

                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">入职时间：</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input sf-ly-date" readonly="readonly" id="hiredate" name="hiredate" value="${member.columns.hiredate}">
                    </div>

                </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="mark">*</span>账号：</label>
                <div class="layui-input-inline">
                    <input type="text" name="loginName" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input" value="${member.columns.login_name}">
                </div>
                <label class="layui-form-label">密码：</label>
                <div class="layui-input-inline">
                    <input type="password" class="layui-input" lay-verify="password" id="password" name="password" value="aqzaqaz@">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="mark">*</span>所属部门：</label>
                <div class="layui-input-inline" style="width: 300px;">
                    <ul id="treeDemo" class="ztree" style="padding: 30px;"></ul>
                </div>
            </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="mark">*</span>角色权限：</label>
                    <div class="layui-input-block">
                        <c:forEach var="role" items="${roles}">
                            <input type="checkbox" name="roleId" title="${role.columns.name}" value="${role.columns.id}" class="${role.columns.type}"
                            ${fns:contains(member.columns.role_ids, role.columns.id, ",") ? 'checked' : ''} lay-filter="roleId">
                        </c:forEach>
                    </div>
                </div>
        </div>
    </div>
    <div class="operate-footer">
        <button class="layui-btn" lay-submit lay-filter="component-form-element">保存</button>
        <button class="layui-btn layui-btn-primary" onclick="cancel()">取消</button>
    </div>
</div>

<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>

<script type="text/javascript">
    var pass = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]+$/;
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'jquery', 'layer', 'laydate'], function(){
        var $ = layui.$
            ,admin = layui.admin
            ,element = layui.element
            ,form = layui.form

            ,index = parent.layer.getFrameIndex(window.name); //获取窗口索引;

        var laydate = layui.laydate;
        form.verify({
            password:function(value,item){
                if(!$.trim(value)){
                    return "登录密码不能为空,请输入登录密码后保存！";
                }
                if(!value=='aqzaqaz@' && !pass.test($.trim(value))){
                    return "请输入密码格式为数字加字母！";
                }
            }

        });
        loadTreeNodes('${member.columns.department_id}');

        $(".sf-ly-date").each(function(){
            laydate.render({
                elem: this,
                trigger: 'click'
            });
        });

        var role_ids = "${member.columns.role_ids}";
        $.each(role_ids.split(","), function( key, value ) {
            if(value == 1){
                $(".orderisMany").removeClass("layui-hide");
            }
        });


        form.on('checkbox(roleId)', function(data){
            var valu = data.value;
            if(data.elem.checked){
                if($(this).attr("class")=='1' || $(this).attr("class")=='2'  || $(this).attr("class")=='4'|| $(this).attr("class")=='5'|| $(this).attr("class")=='6'|| $(this).attr("class")=='7'|| $(this).attr("class")=='8'|| $(this).attr("class")=='9'|| $(this).attr("class")=='a'
                    || $(this).attr("class")=='b'|| $(this).attr("class")=='c'|| $(this).attr("class")=='d'){
                    $('input[name=roleId]').each(function(){
                        var _value=$(this).attr("value");
                        if(_value==valu) return;
                        $(this).prop("checked", false);
                        form.render('checkbox');
                    })
                }else{
                    $("input:checkbox[name='roleId']:checked").each(function(i){
                        var _class=$(this).attr("class");
                        if(_class=='1' || _class=='2' || _class=='4'|| _class=='5'|| _class=='6'|| _class=='7'|| _class=='8'|| _class=='9'|| _class=='a'|| _class=='b'|| _class=='c'|| _class=='d'){
                            $(this).prop("checked", false);
                            form.render('checkbox');
                        }

                    });
                }
            }
        });


        form.on('submit(component-form-element)', function(data){
            //var postData = JSON.stringify(data.field);
            var postData = data.field;
            var roleIds = '';
            $("input:checkbox[name='roleId']:checked").each(function(i){
                roleIds += ',' + $(this).val();
            });
            if(roleIds == ''){
                layer.msg("请选择角色权限", {icon:2});
                return false;
            }
            var nodes = ztreeNode.getCheckedNodes(true);
            console.log(nodes)
            var permissions = "";
            for(var i = 0; i < nodes.length; i++){
                permissions = nodes[i].id;
            }
            if(isBlank(permissions)){
                layer.msg("请选择上级部门")
                return false
            }
            postData.departmentId=permissions;
            var valid = true;
            $.ajax({
                url: '${ctx}/member/beforeSave',
                data: postData,
                type: 'post',
                async: false,
                success: function(result){
                    if("1" == result){
                        layer.msg("登录名已被占用!", {icon:2});
                        valid = false;
                    }
                    else if ("2" == result) {
                        layer.msg("登录账号不能为空!", {icon: 2});
                        valid = false;
                    }
                }
            });
            if(!valid){
                return false;
            }
            postData.roleId = roleIds.substring(1);
            $.post('${ctx}/member/saveMember', 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});
                    } else {
                        layer.msg(result, {icon: 2});
                    }

                }
            });
            return false;
        });

    });

    var nodes;
    var ztreeNode;
    var setting = {
        // { "Y" : "ps", "N" : "ps" }
        check: {enable: true,chkStyle: "radio",radioType : "all"},
        data: {simpleData: {enable: true,idKey: "id",pIdKey: "parentId",rootPId: 0}}
    };


    function loadTreeNodes(depId){

        $.post('${ctx}/departmentSetting/getDepartList',{depId:depId}, function(data){
            nodes = eval(data);
            ztreeNode = $.fn.zTree.init($("#treeDemo"), setting, nodes);
            ztreeNode.expandAll(false);
        });
    }

    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }
    function cancel(){
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }
</script>
</body>
</html>