{extend name="common/layout" /}
{block name="title"}{if isset($row)}编辑用户组{else /}新增用户组{/if}{/block}
{block name="css"}
<style>
.group-assign-box{
  max-height:280px;
  overflow:auto;
  padding:14px 16px;
  margin-bottom:0;
  border:1px solid var(--bs-border-color);
  border-radius:.375rem;
  background:var(--bs-tertiary-bg);
}
.group-assign-box .form-check{
  margin:8px 0;
  min-height:22px;
}
.group-assign-box .assign-node{
  margin:10px 0;
}
.group-assign-box .assign-children{
  margin:4px 0 8px 18px;
  padding-left:10px;
  border-left:1px solid var(--bs-border-color);
}
.group-assign-box hr{
  margin:10px 0;
}
</style>
{/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>
            <input type="text" class="form-control" name="title" value="{$row.title|default=''}" {if isset($row) && $row.id==1}readonly{/if}>
          </div>
          <div class="col-md-6">
            <label class="form-label">备注</label>
            <input type="text" class="form-control" name="remark" value="{$row.remark|default=''}">
          </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">
            <label class="form-label">权限分配 {if isset($row) && $row.rules=='*'}<span class="text-success">(超级管理员拥有全部权限)</span>{/if}</label>
            <div class="group-assign-box">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" name="rules[]" value="*" {if in_array('*', $checkedRules)}checked{/if} id="rules-all">
                <label class="form-check-label" for="rules-all">全部权限</label>
              </div>
              <hr>
              {volist name="ruleTree" id="rule"}
                <div class="assign-node">
                  <strong>{$rule.title}</strong>
                  {if condition="!empty($rule['name'])"}
                  <div class="form-check">
                    <input class="form-check-input rule-item" type="checkbox" name="rules[]" value="{$rule.id}" id="rule-{$rule.id}" {if in_array((string)$rule.id, $checkedRules) || in_array('*', $checkedRules)}checked{/if}>
                    <label class="form-check-label" for="rule-{$rule.id}">{$rule.name}</label>
                  </div>
                  {/if}
                  {if condition="!empty($rule['children'])"}
                    <div class="assign-children">
                      {volist name="rule.children" id="child"}
                      <div class="form-check">
                        <input class="form-check-input rule-item" type="checkbox" name="rules[]" value="{$child.id}" id="rule-{$child.id}" {if in_array((string)$child.id, $checkedRules) || in_array('*', $checkedRules)}checked{/if}>
                        <label class="form-check-label" for="rule-{$child.id}">{$child.title}{if $child.name}（{$child.name}）{/if}</label>
                      </div>
                        {if condition="!empty($child['children'])"}
                        <div class="assign-children">
                          {volist name="child.children" id="g"}
                          <div class="form-check">
                            <input class="form-check-input rule-item" type="checkbox" name="rules[]" value="{$g.id}" id="rule-{$g.id}" {if in_array((string)$g.id, $checkedRules) || in_array('*', $checkedRules)}checked{/if}>
                            <label class="form-check-label" for="rule-{$g.id}">{$g.title}{if $g.name}（{$g.name}）{/if}</label>
                          </div>
                          {/volist}
                        </div>
                        {/if}
                      {/volist}
                    </div>
                  {/if}
                </div>
              {/volist}
            </div>
          </div>
          <div class="col-12">
            <label class="form-label">菜单分配</label>
            <div class="group-assign-box">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" name="menus[]" value="*" {if in_array('*', $checkedMenus)}checked{/if} id="menus-all">
                <label class="form-check-label" for="menus-all">全部菜单</label>
              </div>
              <hr>
              {volist name="menuTree" id="menu"}
                <div class="assign-node">
                  <div class="form-check">
                    <input class="form-check-input menu-item" type="checkbox" name="menus[]" value="{$menu.id}" id="menu-{$menu.id}" {if in_array((string)$menu.id, $checkedMenus) || in_array('*', $checkedMenus)}checked{/if}>
                    <label class="form-check-label" for="menu-{$menu.id}">{$menu.title}</label>
                  </div>
                  {if condition="!empty($menu['children'])"}
                  <div class="assign-children">
                    {volist name="menu.children" id="mc"}
                    <div class="form-check">
                      <input class="form-check-input menu-item" type="checkbox" name="menus[]" value="{$mc.id}" id="menu-{$mc.id}" {if in_array((string)$mc.id, $checkedMenus) || in_array('*', $checkedMenus)}checked{/if}>
                      <label class="form-check-label" for="menu-{$mc.id}">{$mc.title}</label>
                    </div>
                    {/volist}
                  </div>
                  {/if}
                </div>
              {/volist}
            </div>
          </div>
          <div class="col-12 d-flex gap-2">
            <button type="submit" class="btn btn-primary">保存</button>
            <a href="{:url('/admin/group')}" class="btn btn-light">返回</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{/block}
{block name="js"}
<script>
$('#data-form').on('submit', function (e) {
    e.preventDefault();
    $.post("{:url('/admin/group/save')}", $(this).serialize(), function (res) {
        AdminUI.result(res);
        if (res.code === 1) location.href = "{:url('/admin/group')}";
    }, 'json');
});
</script>
{/block}