<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/common_header :: common_header"></head>

<body>
<div class="x-body">
    <form id="formId" onsubmit="return false;">
        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>菜单名称
                </label>
                <div class="layui-input-inline">
                    <input type="text" name="menuName" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单图标</label>
                <div class="layui-input-inline" id="icondiv">
                    <span id="icon" class="iconfont"></span>
                    <button class="layui-btn layui-btn-sm" onclick="selectIcon()">选择图标</button>
                    <input type="text" style="display: none" name="menuIcon">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>父级菜单
                </label>
                <div class="layui-input-inline">
                    <select name="menuPid">
                        <option th:each="list:${pIdList}" th:value="${list.menuId}"
                                th:text="${list.menuName }"></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    菜单顺序
                </label>
                <div class="layui-input-inline">
                    <input type="text" name="menuOrder" class="layui-input" placeholder="不填写时默认在最后">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    菜单路径
                </label>
                <div class="layui-input-inline">
                    <input type="text" name="menuUrl" class="layui-input" placeholder="有子菜单无效(勿改)">
                </div>
            </div>
            <div class="layui-form-item" align="center">
                <input type="text" name="menuId" style="display: none;" value="0">
                <button class="layui-btn" onclick="checkToSave()">
                    保存
                </button>
                <button class="layui-btn layui-btn-danger" onclick="closeLayer()">
                    取消
                </button>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" th:src="@{/js/addOrEdit.js}"></script>
<style type="text/css">
    #icondiv {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
</style>
<script>
    function checkToSave() {
        var menuName = $("#formId input[name='menuName']").val().trim();
        var menuOrder = $("#formId input[name='menuOrder']").val().trim();
        if (menuName == '') {
            layer.msg('菜单名称不能为空!');
            return false;
        }
        var reg = /^[1-9]\d*$/;
        if (menuOrder != '' && !reg.test(menuOrder)) {
            layer.msg('菜单顺序必须为正整数!');
            return false;
        }
        setFormData();
        save(formdata);
    }

    $(function () {
        var id = [[${id}]];
        getObjById(id);
    })


    function setOtherObj(obj) {
        if (obj.menuIcon != null && obj.menuIcon != '') {
            $("#icon").html('&#' + obj.menuIcon + ';');
        } else {
            $("#icon").html('无');
        }
    }

    var unicode;

    function selectIcon() {
        var w = ($(window).width() * 0.9);
        var h = ($(window).height() * 0.8);
        unicode = layer.open({
            type: 2,
            area: [w + 'px', h + 'px'],
            fix: false, //不固定
            maxmin: true,
            shadeClose: true,
            shade: 0.4,
            title: "选择图标",
            content: '/menu/Icon'
        });
    }

    function setIcon(name, code) {
        layer.close(unicode);
        $('#icon').html('&nbsp;&nbsp;&#' + code + ';');
        $("#formId input[name='menuIcon']").val(code);
    }


</script>
</body>

</html>