{include file="public/header" /}

<link rel="stylesheet" href="__PUBLIC__/css/font-awesome.min.css__VERSION__">
<link rel="stylesheet" href="__PUBLIC__/css/ace.min.css__VERSION__">
<link rel="stylesheet" href="__PUBLIC__/layui/style/menu.css__VERSION__">
<script src="__PUBLIC__/js/fuelux.tree.min.js__VERSION__"></script>
<script src="__PUBLIC__/js/ace-elements.min.js__VERSION__"></script>
<script src="__PUBLIC__/js/ace.min.js__VERSION__"></script>
<script src="__PUBLIC__/js/api/auth.js__VERSION__"></script>

<header class="f w100 bg bc">
    {include file="public/logo" /}
    
    <div class="cl main-title">
        账号
    </div>
    <span title="保存（Ctrl+S）"><i class="ma-icon ma-icon-save"></i></span>
    {include file="public/button" /}
</header>

<ul class="ma-toolbar-container not-select">
    {if (in_array('/auth/admin/showlist', $auth_menu))}<li data-id="admin" class="selected">账号<i class="ma-icon ma-icon-list"></i></li>{/if}
    {if (in_array('/auth/role/showlist', $auth_menu))}<li data-id="role">角色<i class="ma-icon ma-icon-list"></i></li>{/if}
    {if (in_array('/auth/menu/showlist', $auth_menu))}<li data-id="menu">菜单<i class="ma-icon ma-icon-list"></i></li>{/if}
</ul>

<div class="ma-main-container">
    <div class="ma-middle-container">
        <div class="main-body admin-main">
            <div  class="ma-tree-wrapper not-select" style="width: auto;">
                <div class="ma-tree-toolbar">
                    <div class="ma-tree-toolbar-search">
                        <i class="ma-icon ma-icon-search"></i>
                        <input id="admin-sou" placeholder="输入关键字搜索">
                    </div>
                    <div>
                        <div title="新建账号" class="ma-tree-toolbar-btn">
                            <i class="ma-icon ma-icon-plus"></i>
                        </div>
                        <div title="刷新接口" class="ma-tree-toolbar-btn">
                            <i class="ma-icon ma-icon-refresh"></i>
                        </div>
                    </div>
                </div>
                <div class="ma-tree-container">
                    <div id="admin-list" class="ma-tree-item"></div>
                    <div class="no-data" style="display: none;">
                        无数据
                    </div>
                </div>
            </div>
        </div>
        <div class="main-body role-main" style="display: none;">
            <div  class="ma-tree-wrapper not-select" style="width: auto;">
                <div class="ma-tree-toolbar">
                    <div class="ma-tree-toolbar-search">
                        <i class="ma-icon ma-icon-search"></i>
                        <input id="role-sou" placeholder="输入关键字搜索">
                    </div>
                    <div>
                        <div title="新建角色" class="ma-tree-toolbar-btn">
                            <i class="ma-icon ma-icon-plus"></i>
                        </div>
                        <div title="刷新接口" class="ma-tree-toolbar-btn">
                            <i class="ma-icon ma-icon-refresh"></i>
                        </div>
                    </div>
                </div>
                <div class="ma-tree-container">
                    <div id="role-list" class="ma-tree-item"></div>
                    <div class="no-data" style="display: none;">
                        无数据
                    </div>
                </div>
            </div>
        </div>
        <div class="main-body menu-main" style="display: none;">
            <div  class="ma-tree-wrapper not-select" style="width: auto;">
                <div class="ma-tree-toolbar">
                    <div class="ma-tree-toolbar-search">
                        <i class="ma-icon ma-icon-search"></i>
                        <input id="menu-sou" placeholder="输入关键字搜索">
                    </div>
                    <div>
                        <div title="新建菜单" class="ma-tree-toolbar-btn">
                            <i class="ma-icon ma-icon-plus"></i>
                        </div>
                        <div title="刷新接口" class="ma-tree-toolbar-btn">
                            <i class="ma-icon ma-icon-refresh"></i>
                        </div>
                    </div>
                </div>
                <div class="ma-tree-container">
                    <div id="menu-list" class="api-menu ma-tree-item"></div>
                    <div class="no-data" style="display: none;">
                        无数据
                    </div>
                </div>
            </div>
        </div>
        
        <div class="ma-bottom-container">
            <div class="main-body admin-main">
                <ul class="ma-bottom-tab not-select">
                    <li class="selected" data-id="admin-from">
                        <i class="ma-icon ma-icon-options"></i>
                        账号信息
                    </li>
                    <li data-id="admin-power">
                        <i class="ma-icon ma-icon-parameter"></i>
                        拥有权限
                    </li>
                    <li class="float-right event-log">
                        <i class="ma-icon ma-icon-event"></i>
                        事件
                    </li>
                </ul>
                <div class="menu-list admin-from">
                    <div class="ma-api-info">
                        <label>
                            账号
                        </label>
                        <div style="flex: 1 1 0%;">
                            <input id="username" class="input" type="text">
                        </div>
                        <label>
                            密码
                        </label>
                        <div style="flex: 1 1 0%;">
                            <input id="password" class="input" type="text">
                        </div>
                        <label>状态</label>
                        <div style="flex: 1 1 0%;" class="ts-input">
                            <input type="radio" name="status" value="0">禁用&nbsp;
                            <input type="radio" name="status" value="1" checked>启用
                        </div>
                    </div>
                    <div class="ma-api-info">
                        <label>
                            姓名
                        </label>
                        <div style="flex: 1 1 0%;">
                            <input id="fullname" class="input" type="text">
                        </div>
                        <label>
                            邮箱
                        </label>
                        <div style="flex: 1 1 0%;">
                            <input id="email" class="input" type="text">
                        </div>
                        <label>
                            手机号
                        </label>
                        <div style="flex: 1 1 0%;">
                            <input id="phone" class="input" type="text">
                        </div>
                    </div>
                    <div class="ma-api-info">
                        <label>
                            身份
                        </label>
                        <div style="flex: 1 1 0%;">
                            <select id="role_id" class="input">
                                <option value="0">超级账号</option>
                                {foreach $role as $v}
                                <option value="{$v.id}">{$v.role_name}</option>
                                {/foreach}
                            </select>
                        </div>
                        <label>
                            编辑时间
                        </label>
                        <div style="flex: 1 1 0%;">
                            <input disabled id="update_time" class="input" type="text" value="无">
                        </div>
                        <label></label>
                        <div style="flex: 1 1 0%;"></div>
                    </div>
                </div>
                <div class="menu-list admin-power" style="display:none;background: #f7f7f7;">
                    <div id="tree-div"></div>
                </div>
            </div>
            <div class="main-body role-main" style="display: none;">
                <ul class="ma-bottom-tab not-select">
                    <li class="selected" data-id="role-from">
                        <i class="ma-icon ma-icon-options"></i>
                        角色信息
                    </li>
                    <li data-id="role-power">
                        <i class="ma-icon ma-icon-parameter"></i>
                        选择权限
                    </li>
                    <li class="float-right event-log">
                        <i class="ma-icon ma-icon-event"></i>
                        事件
                    </li>
                </ul>
                <div class="menu-list role-from">
                    <div class="ma-api-info">
                        <label>
                            角色名称
                        </label>
                        <div style="flex: 1 1 0%;">
                            <input id="role_name" class="input" type="text">
                        </div>
                        <label>
                            编辑时间
                        </label>
                        <div style="flex: 1 1 0%;">
                            <input disabled id="role_update_time" class="input" type="text" value="无">
                        </div>
                        <label></label>
                        <div style="flex: 1 1 0%;"></div>
                    </div>
                </div>
                <div class="menu-list role-power" style="display:none;background: #f7f7f7;">
                    <form class="layui-form form-horizontal" action="" lay-filter="component-form-group">
                        <div class="zTreeDemoBackground left">
                            <ul class="ztree" style="margin-left: 5px;margin-top:5px; padding: 0;">
                                <li>
                                    <a title="全部展开、折叠" style="color:#000">
                                        <span id="ztree_expandAll" data-open="true">
                                            全部展开、折叠
                                        </span>
                                    </a>
                                </li>
                            </ul>
                            <ul id="treeDemo" class="ztree"></ul>
                        </div>
                    </form>
                </div>
            </div>
            <div class="main-body menu-main" style="display: none;">
                <ul class="ma-bottom-tab not-select">
                    <li class="selected" data-id="menu-from">
                        <i class="ma-icon ma-icon-options"></i>
                        菜单信息
                    </li>
                    <li class="float-right event-log">
                        <i class="ma-icon ma-icon-event"></i>
                        事件
                    </li>
                </ul>
                <div class="menu-list menu-from">
                    <div class="ma-api-info">
                        <label>
                            菜单名称
                        </label>
                        <div style="flex: 1 1 0%;">
                            <input id="menu_name" class="input" type="text">
                        </div>
                        <label>
                            路由
                        </label>
                        <div style="flex: 1 1 0%;">
                            <input id="route" class="input" type="text">
                        </div>
                        <label>状态</label>
                        <div style="flex: 1 1 0%;" class="ts-input">
                            <input type="radio" name="menu_status" value="0">禁用&nbsp;
                            <input type="radio" name="menu_status" value="1" checked>启用
                        </div>
                    </div>
                    <div class="ma-api-info">
                        <label>
                            上级菜单
                        </label>
                        <div style="flex: 1 1 0%;">
                            <input id="pid_name" class="input" type="text" disabled value="顶级">
                        </div>
                        <label>
                            编辑时间
                        </label>
                        <div style="flex: 1 1 0%;">
                            <input disabled id="menu_update_time" class="input" type="text" value="无">
                        </div>
                        <label></label>
                        <div style="flex: 1 1 0%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="magic-contextmenu" id="admin-which" style="display: none; min-width: 150px; z-index: 9999999;">
	<div class="magic-contextmenu-body">
		<div class="magic-contextmenu-item magic-contextmenu-item-available magic-contextmenu-item-divided delete">
			<div class="magic-contextmenu-item-icon">
				<i class="ma-icon ma-icon-delete"></i>
			</div>
			<span class="magic-contextmenu-item-label">
				删除
			</span>
			<div class="magic-contextmenu-item-expand-icon">
			</div>
		</div>
	</div>
</div>

<div class="magic-contextmenu" id="role-which" style="display: none; min-width: 150px; z-index: 9999999;">
	<div class="magic-contextmenu-body">
		<div class="magic-contextmenu-item magic-contextmenu-item-available magic-contextmenu-item-divided delete">
			<div class="magic-contextmenu-item-icon">
				<i class="ma-icon ma-icon-delete"></i>
			</div>
			<span class="magic-contextmenu-item-label">
				删除
			</span>
			<div class="magic-contextmenu-item-expand-icon">
			</div>
		</div>
	</div>
</div>

<div class="magic-contextmenu" id="menu-which" style="display: none; min-width: 150px; z-index: 9999999;">
	<div class="magic-contextmenu-body">
		<div class="magic-contextmenu-item magic-contextmenu-item-available create">
			<div class="magic-contextmenu-item-icon">
				<i class="ma-icon ma-icon-plus"></i>
			</div>
			<span class="magic-contextmenu-item-label">
				创建下级
			</span>
			<div class="magic-contextmenu-item-expand-icon"></div>
		</div>
		<div class="magic-contextmenu-item magic-contextmenu-item-available magic-contextmenu-item-divided delete">
			<div class="magic-contextmenu-item-icon">
				<i class="ma-icon ma-icon-delete"></i>
			</div>
			<span class="magic-contextmenu-item-label">
				删除
			</span>
			<div class="magic-contextmenu-item-expand-icon">
			</div>
		</div>
	</div>
</div>
{include file="public/footer" /}