{extend name="common/layout" /}
{block name="title"}用户等级{/block}
{block name="css"}
<link href="{$static}/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
{/block}
{block name="content"}
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <div class="row align-items-center g-2">
          <div class="col"><h4 class="card-title mb-0">用户等级</h4></div>
          <div class="col-auto">
            <div class="d-flex flex-wrap gap-2">
              <a class="btn btn-success btn-sm" href="{:url('/admin/user_level/add')}"><i class="ri-add-line"></i> 新增等级</a>
              <button type="button" class="btn btn-danger btn-sm" id="btn-delete"><i class="ri-delete-bin-line"></i> 删除</button>
              <button type="button" class="btn btn-light btn-sm" id="btn-refresh"><i class="ri-refresh-line"></i> 刷新</button>
            </div>
          </div>
        </div>
      </div>
      <div class="card-body">
        <div class="alert alert-info mb-3">
          成长值 = 积分 + 金币 + 发帖数 + 回帖数，仅自动匹配「社区会员」等级。「社区管理」等级只作权限分组模板，绝不会被成长值写入，须在用户管理中手动赋予。
        </div>
        <form class="row g-2 admin-toolbar mb-3" id="search-form">
          <div class="col-md-4 col-lg-3">
            <input type="text" class="form-control form-control-sm" name="keyword" placeholder="等级名称">
          </div>
          <div class="col-md-3 col-lg-2">
            <select class="form-select form-select-sm" name="status">
              <option value="">全部状态</option>
              <option value="1">启用</option>
              <option value="0">禁用</option>
            </select>
          </div>
          <div class="col-auto">
            <button type="button" class="btn btn-primary btn-sm" id="btn-search">搜索</button>
          </div>
        </form>
        <table id="data-table"></table>
      </div>
    </div>
  </div>
</div>
{/block}
{block name="js"}
<script src="{$static}/js/bootstrap-table/bootstrap-table.min.js"></script>
<script src="{$static}/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script>
var $table = $('#data-table');
$table.bootstrapTable(AdminPage.tableDefaults({
  url: "{:url('/admin/user_level/list')}",
  pageSize: 20,
  queryParams: function (params) { return AdminPage.queryFromForm('#search-form', params); },
  columns: [
    { checkbox: true },
    { field: 'id', title: 'ID', width: 60 },
    { field: 'name', title: '等级名称', formatter: function (v, row) {
      var bg = row.color || '#64748b';
      return '<span class="badge rounded-pill" style="background:'+bg+';color:#fff">'+(v||'')+'</span>';
    }},
    { field: 'badge_icon', title: '头像角标', width: 120, formatter: function (v) {
      if (!v) return '<span class="text-muted">—</span>';
      if (/^(https?:)?\/\//i.test(v) || v.charAt(0) === '/') {
        return '<img src="'+v+'" alt="" style="width:22px;height:22px;border-radius:50%;object-fit:cover;vertical-align:middle;">';
      }
      return '<code class="small">'+v+'</code>';
    }},
    { field: 'range_label', title: '成长值区间' },
    { field: 'community_role_label', title: '社区身份', width: 100, formatter: function (v, row) {
      if (row.community_role === 'manager') {
        return AdminPage.badge(v||'社区管理', 'warning');
      }
      return AdminPage.badge(v||'社区会员', 'secondary');
    }},
    { field: 'sort', title: '排序', width: 80 },
    { field: 'status', title: '状态', width: 90, formatter: function (value, row) {
      if (parseInt(value) === 1) {
        return '<a href="javascript:void(0)" onclick="toggleStatus('+row.id+',0)">'+AdminPage.badge('启用','success')+'</a>';
      }
      return '<a href="javascript:void(0)" onclick="toggleStatus('+row.id+',1)">'+AdminPage.badge('禁用','danger')+'</a>';
    }},
    { field: 'operate', title: '操作', formatter: function (v, row) {
      return '<a class="btn btn-sm btn-success me-1" href="{:url(\'/admin/user_level/edit\')}?id='+row.id+'">编辑</a>' +
             '<button type="button" class="btn btn-sm btn-danger" onclick="deleteOne('+row.id+')">删除</button>';
    }}
  ]
}));
$('#btn-search,#btn-refresh').on('click', function () { $table.bootstrapTable('refresh'); });
$('#btn-delete').on('click', function () {
  var rows = $table.bootstrapTable('getSelections');
  if (!rows.length) { AdminUI.notify('请选择数据', 'warning'); return; }
  AdminUI.confirm('确认删除选中等级？', function () {
    $.post("{:url('/admin/user_level/delete')}", { ids: rows.map(function (r) { return r.id; }) }, function (res) {
      AdminUI.result(res);
      if (res.code === 1) $table.bootstrapTable('refresh');
    }, 'json');
  });
});
function deleteOne(id) {
  AdminUI.confirm('确认删除该等级？', function () {
    $.post("{:url('/admin/user_level/delete')}", { id: id }, function (res) {
      AdminUI.result(res);
      if (res.code === 1) $table.bootstrapTable('refresh');
    }, 'json');
  });
}
function toggleStatus(id, status) {
  $.post("{:url('/admin/user_level/status')}", { id: id, status: status }, function (res) {
    AdminUI.result(res);
    if (res.code === 1) $table.bootstrapTable('refresh');
  }, 'json');
}
</script>
{/block}