<#include "/common/defaultEngine.html"/>
<@pageTheme mark="${config.optimize()?string('true', 'false')}">
<@header title="新增菜单" bodyClass="white-bg" libs=["bootstrapSelect"]/>
<div class="wrapper wrapper-content ibox-content">
<@f.form id="form-menu-add" class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-3 control-label "><span style="color: red; ">*</span><@ctx.i18n text = "上级菜单"/>：</label>
        <div class="col-sm-8">
            <@f.treeselect id="treeId" value="${menu.id}" name="parentId" boxTitle="上级菜单选择" url="sys/menu/menuTreeData"
                labelValue="${menu.name}"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label"><span style="color: red; ">*</span><@ctx.i18n text = "菜单类型"/>：</label>
        <div class="col-sm-8">
            <@f.radio name="type" dictType="sys_menu_type"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label"><span style="color: red; ">*</span><@ctx.i18n text = "菜单名称"/>：</label>
        <div class="col-sm-8">
            <@f.input name="name" required=true/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label"><span style="color: red; ">*</span><@ctx.i18n text = "所属模块"/>：</label>
        <div class="col-sm-8">
            <@f.checkbox name="moduleCodes" items=modules itemLabel="moduleName" itemValue="moduleCode" required=true/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label"><@ctx.i18n text = "请求地址"/>：</label>
        <div class="col-sm-8">
            <@f.input name="url" helpTip="Controller类中Mapping 如：@RequestMapping(\"/sys/demo\") 填写:sys/demo + 具体方法@GetMapping"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label"><@ctx.i18n text = "目标"/>：
            <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" data-placement="bottom"
               data-content="菜单已什么形式打开">
                <i class="fa fa-question-circle-o" style="color: orange"></i></a>
        </label>
        <div class="col-sm-8">
            <@f.select name="target" dictType="sys_menu_target" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label"><@ctx.i18n text = "权限标识"/>：
        </label>
        <div class="col-sm-8">
            <@f.input name="perms" helpTip="控制器中定义的权限标识，如：<@shiro.hasPermission name=\"sys:menu:add\">"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label"><span style="color: red; ">*</span><@ctx.i18n text = "排序"/>：</label>
        <div class="col-sm-8">
            <@f.input name="orderNum" required=true/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label"><@ctx.i18n text = "图标"/>：
        </label>
        <div class="col-sm-8">
            <@f.iconselect name="icon" placeholder="选择图标"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label"><@ctx.i18n text = "是否显示(新)"/>：
        </label>
        <div class="col-sm-8">
            <@f.radio name="isNew" dictType="sys_yes_no" value="N"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label"><@ctx.i18n text = "菜单状态"/>：</label>
        <div class="col-sm-8">
            <@f.radio name="hide" dictType="sys_show_hide"/>
        </div>
    </div>
</@f.form>
</div>
<@footer>
<script type="text/javascript">
    var prefix = baseURL + "sys/menu";
    $("#form-menu-add").validate({
        onkeyup: false,
        rules:{
            menuType:{
                required:true,
            },
            name:{
                remote: {
                    url: prefix + "/checkMenuNameUnique",
                    type: "POST",
                    dataType: "html",
                    data: {
                        "parentId": function() {
                            return $("input[name='parentId']").val();
                        },
                        "name" : function() {
                            return opt.common.trim($("#name").val());
                        }
                    },
                    dataFilter: function(data, type) {
                        return opt.validate.unique(data);
                    }
                }
            },
            orderNum:{
                digits:true
            },
        },
        messages: {
            "name": {
                remote: "菜单已经存在"
            }
        },
        focusCleanup: true
    });

    function submitHandler() {
        if (opt.validate.form()) {
            var data;
            if($('input[name="type"]:checked').val() === "1"){
                var options = {
                    id:'form-menu-add',
                    del:['moduleCodes']/*需要删除提交表单数据*/
                };
                data = opt.form.dataUp(options);
            }else if($('input[name="type"]:checked').val() === "0"){
                var options = {
                    id:'form-menu-add',
                    del:['perms','url','target','moduleCodes']/*需要删除提交表单数据*/
                };
                data = opt.form.dataUp(options);
            }else{
                var options = {
                    id:'form-menu-add',
                    del:['url','target','icon','moduleCodes']/*需要删除提交表单数据*/
                };
                data = opt.form.dataUp(options);
            }
            var moduleCodes = "";
            $('input[name="moduleCodes"]:checked').each(function () {
                moduleCodes += $(this).val() + ",";
            });
            moduleCodes = moduleCodes.substring(0,moduleCodes.length-1);
            data.push({"name": "moduleCodes", "value": moduleCodes});
            opt.operate.save(prefix + "/add", data);
        }
    }

    /**
     * 利用redio 组件回调事件处理 数据权限数据控制显示还是隐藏
     * 回传两个参数 name 当前控制名称, data 当前点击对象, event 事件对象
     **/
    function redioCallback(name, data, event) {
        if(name == "type"){
            if ($(data).is(':checked')){
                var menuType = $(event.target).val();
                if (menuType == "0") {
                    $("#url").parents(".form-group").hide();
                    $("#perms").parents(".form-group").hide();
                    $("#menuIcon").parents(".form-group").show();
                    $("#icon").parents(".form-group").show();
                    $("#target").parents(".form-group").hide();
                    $("input[name='visible']").parents(".form-group").show();
                    $("input[name='isNew']").parents(".form-group").show();
                } else if (menuType == "1") {
                    $("#url").parents(".form-group").show();
                    $("#perms").parents(".form-group").show();
                    $("#menuIcon").parents(".form-group").show();
                    $("#icon").parents(".form-group").show();
                    $("#target").parents(".form-group").show();
                    $("input[name='hide']").parents(".form-group").show();
                    $("input[name='isNew']").parents(".form-group").show();
                } else if (menuType == "2") {
                    $("#url").parents(".form-group").hide();
                    $("#perms").parents(".form-group").show();
                    $("#menuIcon").parents(".form-group").hide();
                    $("#icon").parents(".form-group").hide();
                    $("#target").parents(".form-group").hide();
                    $("input[name='hide']").parents(".form-group").show();
                    $("input[name='isNew']").parents(".form-group").hide();
                }
            }
        }
    }
</script>
</@footer>
</@pageTheme>