{extend name="admin@public/basic" /}
{block name="style"}{/block}
<link rel="stylesheet" href="__STATIC__/css/admin/public.css" media="all"/>
{block name="cotent"}
<form class="layui-form form-width-99admin">
    <br>
    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">上级菜单</label>
        <div class="layui-input-block">
            <select id="pid" class="pid" lay-filter="pid">
                {foreach up_menu as $vo }
                {eq name='$vo.id' value='$menu.pid|default=0'}
                <option selected value="{$vo.id|default=''}">{$vo.title|raw|default=''}</option>
                {else}
                <option value="{$vo.id|default=''}">{$vo.title|raw|default=''}</option>
                {/eq}
                {/foreach}
            </select>
        </div>
    </div>
    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">菜单名称</label>
        <div class="layui-input-block">
            <input type="text" id="title" class="layui-input" lay-verify="title" lay-verify="required" value="{$menu.title|default=''}" placeholder="请输入菜单名称">
        </div>
    </div>
    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">菜单链接</label>
        <div class="layui-input-block">
            <input type="text" id="href" class="layui-input" lay-verify="href" value="{$menu.href|default='#'}" placeholder="请输入菜单链接">
        </div>
    </div>

    <div class="layui-form-item layui-row">
        <div class="magb15 layui-col-md4 layui-col-xs12">
            <label class="layui-form-label">图标编码</label>
            <div class="layui-input-block">
                <input type="text" id="icon" class="layui-input" lay-verify="icon" value="{$menu.icon|default=''}" placeholder="请输入图标编码">
            </div>
        </div>

        <div class="magb15 layui-col-md4 layui-col-xs12">
            <label class="layui-form-label">图标样式</label>
            <span class='layui-btn layui-btn-primary' style='padding:0 12px;min-width:45px'>
                {if isset($menu.icon_type) && $menu.icon_type=='fa'}
                <i id='icon-preview' class="fa  {$menu.icon|raw|default=''}"></i>
                {else/}
                <i id='icon-preview' class="layui-icon " data-icon="{$menu.icon|raw|default=''}">{$menu.icon|raw|default=''}</i>
                {/if}
             </span>
            <button data-icon='icon' type='button' class='layui-btn layui-btn-primary select_icon'>选择图标</button>
        </div>


        <div class="magb15 layui-col-md4 layui-col-xs12">
            <label class="layui-form-label">菜单排序</label>
            <div class="layui-input-block">
                <input type="text" id="sort" class="layui-input" lay-verify="sort" value="{$menu.sort|default='0'}" placeholder="请输入排序">
            </div>
        </div>
    </div>

    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">备注信息</label>
        <div class="layui-input-block">
            <textarea id="remark" placeholder="请输入备注信息" class="layui-textarea">{$menu.remark|default=''}</textarea>
        </div>
    </div>

    {if !empty($menu)}
    <input type="hidden" class="id" id="id" value="{$menu.id|default=''}">
    {/if}

    <div class="layui-form-item layui-row layui-col-xs12">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-sm" id="submitBtn">提交</button>
            <button class="layui-btn layui-btn-sm layui-btn-primary" data-close="closeOpen">取消</button>
        </div>
    </div>
</form>
{/block}

{block name="script"}
<script>

    /**
     * 添加、编辑
     */
    $("#submitBtn").on("click", function () {
        var url = "{if empty($menu.id)}{:url('@admin/menu/add')}{else/}{:url('@admin/menu/edit')}{/if}";
        var data = {
            id: $("#id").val(),
            pid: $("#pid").val(),
            title: $("#title").val(),
            href: $("#href").val(),
            icon: $("#icon").val(),
            sort: $("#sort").val(),
            remark: $("#remark").val(),
        };
        $.request.post(url, data, function (res) {
            $.msg.success(res.msg, function () {
                $.tool.reload('open');
            })
        })
        return false;
    });

    /**
     * 选择图标并且自动填充
     */
    $(".select_icon").click(function () {
        var selectIcon = layer.open({
            title: "选择图标",
            type: 2,
            area: ['1000px', '600px'],
            content: "{:url('@admin/tool.icon/fa')}",
            success: function (layero, selectIcon) {
                var body = layer.getChildFrame('body', selectIcon);
            },
            end: function () {
                var icon = window.sessionStorage.getItem("icon");
                $('#icon').attr('value', icon);
                $('#icon-preview').attr('data-icon', icon);
                $('#icon-preview').attr('class', 'fa ' + icon);
                // $("#icon-preview").html(icon);
                window.sessionStorage.removeItem("icon");
            }
        })
        return false;
    })
</script>
{/block}