<view class="role-page">
  <view class="status-bar" style="height:{{statusBar}}px"></view>
  <view class="role-nav flexb">
    <text class="nav-back" bindtap="goBack">‹</text>
    <text class="nav-title">角色与权限</text>
    <text class="nav-link" bindtap="openCreate">新建</text>
  </view>

  <scroll-view scroll-y class="role-scroll" enhanced show-scrollbar="{{false}}">
    <view class="role-tip">可自由创建角色并勾选权限；预置角色也可改权限。</view>
    <view wx:if="{{!roles.length && !loading}}" class="role-empty">暂无角色，请先新建或联系管理员同步权限</view>
    <view wx:for="{{roles}}" wx:key="id" class="role-card" bindtap="editRole" data-id="{{item.id}}">
      <view class="flexb">
        <text class="role-name">{{item.role_name}}</text>
        <text class="role-tag">{{item.is_system ? '系统' : '自定义'}}</text>
      </view>
      <text class="role-sub">{{item.role_hint || ''}}</text>
      <text class="role-sub">已授权 {{item.permCount}} 项 · 点击编辑</text>
    </view>
  </scroll-view>
</view>

<view wx:if="{{showEditPanel}}" class="role-mask">
  <view class="role-mask-bg" bindtap="closeEdit"></view>
  <view class="role-panel">
    <view class="panel-title">编辑角色权限</view>
    <text class="panel-role-name">{{editingRoleName}}</text>
    <scroll-view scroll-y class="perm-scroll" style="height:{{permScrollHeight}}px">
      <view
        wx:for="{{permissionOptions}}"
        wx:key="perm_code"
        class="perm-row flexb {{item.checked ? 'perm-on' : ''}}"
        bindtap="togglePermItem"
        data-code="{{item.perm_code}}"
      >
        <view class="perm-text">
          <text class="perm-name">{{item.perm_name}}</text>
          <text class="perm-code">{{item.perm_code}}</text>
        </view>
        <view class="perm-check">{{item.checked ? '✓' : ''}}</view>
      </view>
    </scroll-view>
    <view class="panel-btns flexa">
      <button class="panel-btn cancel" bindtap="closeEdit" hover-class="btn-hover">取消</button>
      <button class="panel-btn ok" bindtap="saveRolePerms" hover-class="btn-hover">保存</button>
    </view>
  </view>
</view>

<view wx:if="{{showCreatePanel}}" class="role-mask">
  <view class="role-mask-bg" bindtap="closeCreate"></view>
  <view class="role-panel">
    <view class="panel-title">新建角色</view>
    <input class="name-input" placeholder="角色名称" value="{{newRoleName}}" bindinput="onNameInput"/>
    <scroll-view scroll-y class="perm-scroll" style="height:{{permScrollHeight}}px">
      <view
        wx:for="{{permissionOptions}}"
        wx:key="perm_code"
        class="perm-row flexb {{item.checked ? 'perm-on' : ''}}"
        bindtap="togglePermItem"
        data-code="{{item.perm_code}}"
      >
        <view class="perm-text">
          <text class="perm-name">{{item.perm_name}}</text>
          <text class="perm-code">{{item.perm_code}}</text>
        </view>
        <view class="perm-check">{{item.checked ? '✓' : ''}}</view>
      </view>
    </scroll-view>
    <view class="panel-btns flexa">
      <button class="panel-btn cancel" bindtap="closeCreate" hover-class="btn-hover">取消</button>
      <button class="panel-btn ok" bindtap="createRole" hover-class="btn-hover">创建</button>
    </view>
  </view>
</view>
