<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>权限维护</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="../../../static/assets/library/layui/css/layui.css"
          th:href="@{/assets/library/layui/css/layui.css}"/>
    <link rel="stylesheet" href="../../../static/assets/library/fonts/fontawesome6/css/all.css"
          th:href="@{/assets/library/fonts/fontawesome6/css/all.css}"/>

    <link rel="stylesheet" href="../../../static/business/upms/permission/css/edit.css" th:href="@{/business/upms/permission/css/edit.css}">

</head>
<body>
<div class="container">
    <div class="form-container">
        <div class="form-body">
            <form id="permission-form">
                <!-- 基本信息部分 -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-id-card"></i> 基本信息
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="authCode" class="required">授权码</label>
                            <input type="text" id="authCode" class="form-control" placeholder="输入授权码，如：AUTH_USER_MANAGE" required>
                            <div class="form-error" id="auth-code-error">授权码不能为空，且必须唯一</div>
                            <div class="form-text">用于系统内部识别的唯一代码，通常使用大写英文和下划线</div>
                        </div>
                        <div class="form-group">
                            <label for="authName" class="required">授权名称</label>
                            <input type="text" id="authName" class="form-control" placeholder="输入授权名称，如：用户管理" required>
                            <div class="form-error" id="auth-name-error">授权名称不能为空</div>
                            <div class="form-text">权限的显示名称，用于界面展示</div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="authType" class="required">授权类型</label>
                            <select id="authType" class="form-control" required>
                                <option value="M">模块权限</option>
                                <option value="F">功能权限</option>
                                <option value="O">操作权限</option>
                                <option value="D">数据权限</option>
                                <option value="S">系统权限</option>
                            </select>
                            <div class="form-text">权限的分类类型，决定权限的应用范围</div>
                        </div>
                        <div class="form-group">
                            <label for="authLevel">授权级别</label>
                            <input type="number" id="authLevel" class="form-control" placeholder="输入授权级别" min="1" max="10" value="1">
                            <div class="form-text">数字越小级别越高，1为最高级别</div>
                        </div>
                    </div>
                </div>

                <!-- 权限详情部分 -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-key"></i> 权限详情
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="privilegeCode">权限标识符</label>
                            <input type="text" id="privilegeCode" class="form-control" placeholder="输入权限标识符，如：user:manage">
                            <div class="form-text">用于权限验证的标识符，通常使用小写英文和冒号分隔</div>
                        </div>
                        <div class="form-group">
                            <label for="privilegeName">权限名称</label>
                            <input type="text" id="privilegeName" class="form-control" placeholder="输入权限名称，如：用户管理权限">
                            <div class="form-text">权限的具体名称，用于权限分配时显示</div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="privilegeType">权限类型</label>
                            <select id="privilegeType" class="form-control">
                                <option value="R">读取权限</option>
                                <option value="W">写入权限</option>
                                <option value="X">执行权限</option>
                                <option value="A">管理权限</option>
                                <option value="C">创建权限</option>
                                <option value="D">删除权限</option>
                            </select>
                            <div class="form-text">权限的具体操作类型</div>
                        </div>
                        <div class="form-group">
                            <label for="privilegeLevel">权限级别</label>
                            <input type="number" id="privilegeLevel" class="form-control" placeholder="输入权限级别" min="1" max="10" value="1">
                            <div class="form-text">权限的详细级别，数字越小级别越高</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="privilegeIconsId">权限图标</label>
                        <div class="icon-selection" id="privilegeIconsId">
                            <div class="icon-option" data-icon="fas fa-user">
                                <i class="fas fa-user"></i>
                                <span>用户</span>
                            </div>
                            <div class="icon-option" data-icon="fas fa-users">
                                <i class="fas fa-users"></i>
                                <span>用户组</span>
                            </div>
                            <div class="icon-option" data-icon="fas fa-user-tag">
                                <i class="fas fa-user-tag"></i>
                                <span>角色</span>
                            </div>
                            <div class="icon-option" data-icon="fas fa-key">
                                <i class="fas fa-key"></i>
                                <span>权限</span>
                            </div>
                            <div class="icon-option" data-icon="fas fa-cog">
                                <i class="fas fa-cog"></i>
                                <span>设置</span>
                            </div>
                            <div class="icon-option" data-icon="fas fa-chart-bar">
                                <i class="fas fa-chart-bar"></i>
                                <span>统计</span>
                            </div>
                            <div class="icon-option" data-icon="fas fa-file">
                                <i class="fas fa-file"></i>
                                <span>文件</span>
                            </div>
                            <div class="icon-option" data-icon="fas fa-database">
                                <i class="fas fa-database"></i>
                                <span>数据</span>
                            </div>
                            <div class="icon-option" data-icon="fas fa-shield-alt">
                                <i class="fas fa-shield-alt"></i>
                                <span>安全</span>
                            </div>
                            <div class="icon-option" data-icon="fas fa-lock">
                                <i class="fas fa-lock"></i>
                                <span>锁定</span>
                            </div>
                            <div class="icon-option" data-icon="fas fa-unlock">
                                <i class="fas fa-unlock"></i>
                                <span>解锁</span>
                            </div>
                            <div class="icon-option" data-icon="fas fa-eye">
                                <i class="fas fa-eye"></i>
                                <span>查看</span>
                            </div>
                            <div class="icon-option" data-icon="fas fa-edit">
                                <i class="fas fa-edit"></i>
                                <span>编辑</span>
                            </div>
                            <div class="icon-option" data-icon="fas fa-trash">
                                <i class="fas fa-trash"></i>
                                <span>删除</span>
                            </div>
                            <div class="icon-option" data-icon="fas fa-plus">
                                <i class="fas fa-plus"></i>
                                <span>添加</span>
                            </div>
                        </div>
                        <div class="form-text">选择权限在界面中显示的图标</div>
                    </div>
                </div>

                <!-- 层级关系部分 -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-sitemap"></i> 层级关系
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="parentId">父级权限</label>
                            <select id="parentId" class="form-control">
                                <option value="">无父级权限（顶级权限）</option>
                                <option value="1">系统管理</option>
                                <option value="2">用户管理</option>
                                <option value="3">角色管理</option>
                                <option value="4">权限管理</option>
                                <option value="5">内容管理</option>
                                <option value="6">数据报表</option>
                            </select>
                            <div class="form-text">选择上级权限，建立权限层级关系</div>
                        </div>
                        <div class="form-group">
                            <label for="parentAuthName">父级权限名称</label>
                            <input type="text" id="parentAuthName" class="form-control" placeholder="自动填充父级权限名称" readonly>
                            <div class="form-text">父级权限的名称，选择父级权限后自动填充</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="privilegeState">权限节点状态</label>
                        <select id="privilegeState" class="form-control">
                            <option value="0">根节点 (closed)</option>
                            <option value="1">叶节点 (open)</option>
                        </select>
                        <div class="privilege-state-info">
                            <div class="state-item">
                                <div class="state-indicator state-closed"></div>
                                <span>根节点：可以包含子权限的节点</span>
                            </div>
                            <div class="state-item">
                                <div class="state-indicator state-open"></div>
                                <span>叶节点：最末级的权限节点</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 状态设置部分 -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-cog"></i> 状态设置
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="sort">排序</label>
                            <input type="number" id="sort" class="form-control" placeholder="输入排序值" value="0">
                            <div class="form-text">数字越小排序越靠前</div>
                        </div>
                        <div class="form-group">
                            <label for="state">系统状态</label>
                            <select id="state" class="form-control">
                                <option value="0">正常</option>
                                <option value="1">删除</option>
                                <option value="2">受限操作</option>
                            </select>
                            <div class="form-text">系统层级状态的数学表述</div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="status">状态字符</label>
                            <select id="status" class="form-control">
                                <option value="0">正常</option>
                                <option value="1">删除</option>
                                <option value="2">受限操作</option>
                            </select>
                            <div class="form-text">系统层级状态字符类型</div>
                        </div>
                        <div class="form-group">
                            <label for="privilegeStatus">权限状态</label>
                            <select id="privilegeStatus" class="form-control">
                                <option value="0">正常</option>
                                <option value="1">删除</option>
                                <option value="2">受限操作</option>
                            </select>
                            <div class="form-text">权限自身的状态</div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="delFlag">删除标志</label>
                            <select id="delFlag" class="form-control">
                                <option value="0">未删除</option>
                                <option value="1">已删除</option>
                            </select>
                            <div class="form-text">逻辑删除标志，已删除的数据不会真正从数据库删除</div>
                        </div>
                    </div>
                </div>

                <!-- 其他信息部分 -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-info-circle"></i> 其他信息
                    </div>

                    <div class="form-group">
                        <label for="remark">备注</label>
                        <textarea id="remark" class="form-control" rows="3" placeholder="输入备注信息"></textarea>
                    </div>
                </div>
                <div class="form-footer">
                    <button type="button" class="btn btn-light" id="cancel-btn">
                        <i class="fas fa-times"></i> 取消
                    </button>
                    <button type="button" class="btn btn-primary" id="save-btn" lay-submit="" lay-filter="save">
                        <i class="fas fa-save"></i> 保存权限
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="../../../static/assets/library/jquery/jquery.js" th:src="@{/assets/library/jquery/jquery.js}"></script>
<script src="../../../static/assets/library/layui/layui.js" th:src="@{/assets/library/layui/layui.js}"></script>
<script type="text/javascript" src="../../../static/business/upms/permission/js/edit.js" th:src="@{/business/upms/permission/js/edit.js}"></script>
</body>
</html>