{extend name="common/layout" /}
{block name="title"}{if isset($row)}编辑菜单{else /}新增菜单{/if}{/block}
{block name="content"}
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h4 class="card-title mb-0">{if isset($row)}编辑菜单{else /}新增菜单{/if}</h4>
      </div>
      <div class="card-body">
        <form id="data-form" method="post" class="row g-3">
          <input type="hidden" name="id" value="{$row.id|default='0'}">
          <div class="col-md-6">
            <label class="form-label">上级分组</label>
            <select class="form-select" name="pid">
              {volist name="parents" id="p"}
              <option value="{$p.id}" {if isset($row) && $row.pid==$p.id}selected{elseif !isset($row) && $p.id==0}selected{/if}>{$p.title}</option>
              {/volist}
            </select>
            <div class="form-text">选择已有目录作为分组，或作为一级菜单</div>
          </div>
          <div class="col-md-6">
            <label class="form-label">菜单名称</label>
            <input type="text" class="form-control" name="title" value="{$row.title|default=''}" placeholder="显示在侧边栏的名称">
          </div>
          <div class="col-md-6">
            <label class="form-label">图标</label>
            <input type="text" class="form-control" name="icon" value="{$row.icon|default='ri-circle-line'}" placeholder="如 ri-home-4-line">
          </div>
          <div class="col-md-6">
            <label class="form-label">类型</label>
            <select class="form-select" name="type" id="menu-type">
              <option value="1" {if isset($row) && $row.type==1}selected{/if}>目录（分组，不跳转）</option>
              <option value="2" {if !isset($row) || $row.type==2}selected{/if}>菜单（可打开页面）</option>
            </select>
          </div>
          <div class="col-md-6 menu-url-group">
            <label class="form-label">链接地址</label>
            <input type="text" class="form-control" name="url" value="{$row.url|default=''}" placeholder="如 /admin/user，目录可留空">
          </div>
          <div class="col-md-6 menu-rule-group">
            <label class="form-label">绑定权限</label>
            <select class="form-select" name="name" id="rule-select">
              {volist name="rules" id="r"}
              <option value="{$r.name}" {if isset($row) && $row.name==$r.name}selected{/if}>{$r.title}</option>
              {/volist}
            </select>
            <div class="form-text">从权限节点中选择；无匹配时可在下方自定义</div>
          </div>
          <div class="col-md-6 menu-rule-group">
            <label class="form-label">自定义权限标识</label>
            <input type="text" class="form-control" name="name_custom" id="name-custom" value="" placeholder="可选，填写后优先生效，如 admin/xxx">
          </div>
          <div class="col-md-6">
            <label class="form-label">排序</label>
            <input type="number" class="form-control" name="sort" value="{$row.sort|default='0'}">
          </div>
          <div class="col-md-6">
            <label class="form-label">状态</label>
            <select class="form-select" name="status">
              <option value="1" {if !isset($row) || $row.status==1}selected{/if}>显示</option>
              <option value="0" {if isset($row) && $row.status==0}selected{/if}>隐藏</option>
            </select>
          </div>
          <div class="col-12 d-flex gap-2">
            <button type="submit" class="btn btn-primary">保存</button>
            <a href="{:url('/admin/menu')}" class="btn btn-light">返回</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{/block}
{block name="js"}
<script>
function toggleType() {
    var isDir = $('#menu-type').val() === '1';
    $('.menu-url-group, .menu-rule-group').toggle(!isDir);
}
toggleType();
$('#menu-type').on('change', toggleType);

$('#data-form').on('submit', function (e) {
    e.preventDefault();
    var data = $(this).serializeArray();
    var custom = $.trim($('#name-custom').val() || '');
    if (custom) {
        data = data.filter(function (item) { return item.name !== 'name'; });
        data.push({ name: 'name', value: custom });
    }
    data = data.filter(function (item) { return item.name !== 'name_custom'; });
    $.post("{:url('/admin/menu/save')}", $.param(data), function (res) {
        AdminUI.result(res); if (res.code === 1) location.href = "{:url('/admin/menu')}";
    }, 'json');
});
</script>
{/block}