{include file="public/header" /}

<link rel="stylesheet" href="__PUBLIC__/codemirror/lib/codemirror.css__VERSION__">
<link rel="stylesheet" href="__PUBLIC__/codemirror/theme/ayu-mirage.css__VERSION__">
<link rel="stylesheet"href="__PUBLIC__/editor/css/editormd.css__VERSION__" />
<style>
  
</style>
<script src="__PUBLIC__/js/api/word.js"></script>

<style>
.CodeMirror {
    border: 1px solid black;
    font-size: 13px;
    font-size: 13px;
    font-family: '微软雅黑';
    line-height: 22px;
    height: 100%;
}
#api-tab-div .selected,#api-tab-div li:hover,#add-duty .selected,#add-duty li:hover{color:#59a85c;background:#474b4e}
#add-duty li{text-align:left;padding:5px;height:30px;line-height:20px}
#add-duty li span{display:block;float:left;}
#add-duty li label{color:#868686;}
#add-duty .tleft{float:left;width:120px;border-right:1px solid #2d2d2d;padding:0 10px 0 0;margin:0 10px 10px 0}
#add-duty .ma-icon-delete{float:right}
.word_left{float: left;width: 280px;}
.word_right{float: left;}
.word_right{width: calc(100% - 280px);height: 100%;}
.ma-api-info label {width: 85px;}
</style>




<header class="f w100 bg bc">
    {include file="public/logo" /}
    
    <div class="cl main-title">
        章节
    </div>
    <a href="" target="_blank" id="api-preview" title="预览接口文档（Ctrl+Z）" style="color:#59a869;margin-right: 6px;"><i class="ma-icon ma-icon-push"></i></a>

    <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('/word/tree/showlist', $auth_menu))}<li data-id="api" class="selected">章节<i class="ma-icon ma-icon-list"></i></li>{/if}
    {if (in_array('/word/index/showlist', $auth_menu))}<li data-id="item">文档<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 api-main">
            <div  class="ma-tree-wrapper not-select">
                <div class="ma-tree-toolbar" style="font-size: 12px;">
                    <div title="可预览人员" class="ma-tree-toolbar-btn" style="width: 80px;" id="click-duty">
                        <i class="ma-icon ma-icon-plus"></i>预览人员
                    </div>
                    <div title="选择文档：" class="ma-tree-toolbar-btn" style="float: right;position: relative;">
                        选择文档：<span style="color: #59a869;" id="api-tab-item">演示文档</span>
                    </div>
                </div>
                <div class="ma-tree-toolbar">
                    <div class="ma-tree-toolbar-search">
                        <i class="ma-icon ma-icon-search"></i>
                        <input id="api-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 title="折叠" class="ma-tree-toolbar-btn">
                            <i class="ma-icon ma-icon-folding"></i>
                        </div> -->
                    </div>
                </div>
                <div class="ma-tree-container" style="height: calc(100% - 57px);">
                    <div id="api-list" class="ma-tree-item"></div>
                    <div class="no-data" style="display: none;">
                        无数据
                    </div>
                </div>
            </div>
        </div>
        <div class="main-body item-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="item-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="item-list" class="ma-tree-item"></div>
                    <div class="no-data" style="display: none;">
                        无数据
                    </div>
                </div>
            </div>
        </div>
        
        <div class="ma-bottom-container">
            <div class="main-body api-main" style="height: 100%;">
                <ul class="ma-bottom-tab not-select">
                    <li class="selected" data-id="api-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 api-from" style="height: calc(100% - 28px);">
                    <div class="word_left">
                        <div class="ma-api-info">
                            <label>
                                章节名称
                            </label>
                            <div style="flex: 1 1 0%;">
                                <input class="input title" name="title" type="text">
                            </div>
                        </div>
                        <div class="ma-api-info">
                            <label>
                                路由地址
                            </label>
                            <div style="flex: 1 1 0%;">
                                <input class="input route" name="route" type="text">
                            </div>
                        </div>
                        <div class="ma-api-info">
                            <label>
                                状态
                            </label>
                            <div style="flex: 1 1 0%;line-height: 25px;">
                                <input name="status" type="radio" value="0"> 关闭 
                                <input name="status" type="radio" value="1" checked> 开启
                            </div>
                        </div>
                        <div class="ma-api-info">
                            <label>
                                打开方式
                            </label>
                            <div style="flex: 1 1 0%;line-height: 25px;">
                                <input name="type" type="radio" value="1" checked> 本页 
                                <input name="type" type="radio" value="2"> 外链
                            </div>
                        </div>
                        <div class="ma-api-info">
                            <label>
                                置顶
                            </label>
                            <div style="flex: 1 1 0%;line-height: 25px;">
                                <input name="top" type="radio" value="0" checked> 否 
                                <input name="top" type="radio" value="1"> 是
                            </div>
                        </div>
                        <div class="ma-api-info">
                            <label>
                                编辑器
                            </label>
                            <div style="flex: 1 1 0%;line-height: 25px;">
                                <input name="editor_type" type="radio" value="1" checked> Html
                                <input name="editor_type" type="radio" value="2"> Markdown
                            </div>
                        </div>
                        <div class="ma-api-info" id="action_button">
                            <label>快捷创建</label>
                            <div style="flex: 1 1 0%;">
                                <button type="button" style="margin-top:5px" onclick="addHtml(1)" class="btn btn-primary waves-light mr-1">节点</button>
                                <button type="button" style="margin-top:5px" onclick="addHtml(2)" class="btn btn-primary waves-light mr-1">建议</button>
                                <button type="button" style="margin-top:5px" onclick="addHtml(3)" class="btn btn-primary waves-light mr-1">提示</button>
                                <button type="button" style="margin-top:5px" onclick="addHtml(4)" class="btn btn-primary waves-light mr-1">警告</button>
                                <button type="button" style="margin-top:5px" onclick="addHtml(7)" class="btn btn-primary waves-light mr-1">代码块</button>
                                <button type="button" style="margin-top:5px" onclick="addHtml(8)" class="btn btn-primary waves-light mr-1">表格</button>
                                <button type="button" style="margin-top:5px" onclick="addHtml(11)" class="btn btn-primary waves-light mr-1">方法</button>
                                <button type="button" style="margin-top:5px" onclick="addHtml(6)" class="btn btn-primary waves-light mr-1">加粗</button>
                                <button type="button" style="margin-top:5px" onclick="addHtml(5)" class="btn btn-primary waves-light mr-1">code</button>
                                <button type="button" style="margin-top:5px" onclick="addHtml(9)" class="btn btn-primary waves-light mr-1">ul</button>
                                <button type="button" style="margin-top:5px" onclick="addHtml(10)" class="btn btn-primary waves-light mr-1">p</button>
                            </div>
                        </div>
                    </div>
                    <div class="word_right" id="html">
                        <textarea style="display: none;" id="code"></textarea>
                    </div>
                    <div class="word_right" id="markdown" style="display: none;">
                        <div id="my-editormd">
							<textarea id="my-editormd-markdown-doc" name="my-editormd-markdown-doc" style="display:none;"></textarea>
							<textarea id="my-editormd-html-code" name="my-editormd-html-code" style="display:none;"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-body item-main" style="display: none;">
                <ul class="ma-bottom-tab not-select">
                    <li class="selected" data-id="item-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 item-from">
                    <div class="ma-api-info">
                        <label>
                            文档名称
                        </label>
                        <div style="flex: 1 1 0%;">
                            <input id="item_title" class="input" type="text">
                        </div>
                        <label>
                            文档路由
                        </label>
                        <div style="flex: 1 1 0%;">
                            <input id="item_route" class="input" type="text">
                        </div>
                    </div>
                    <div class="ma-api-info">
                        <label>
                            状态
                        </label>
                        <div style="flex: 1 1 0%; line-height: 25px;">
                            <input name="item_status" type="radio" value="0"> 关闭 
                            <input name="item_status" type="radio" value="1"> 开启
                        </div>
                        <label>
                            是否需要登录 
                        </label>
                        <div style="flex: 1 1 0%; line-height: 25px;">
                            <input name="is_login" type="radio" value="0"> 否 
                            <input name="is_login" type="radio" value="1"> 是
                        </div>
                    </div>
                    <div class="ma-api-info">
                        <label>
                            备注
                        </label>
                        <div style="flex: 1 1 0%;">
                            <textarea id="item_des" class="input" style="height: 80px;"></textarea>
                        </div>
                    </div>
                    <div class="ma-api-info">
                        <label style="width:160px">
                            登录时，对其开放的人员：
                        </label>
                    </div>
                    <div class="ma-api-info">
                        <label></label>
                        <div style="flex: 1 1 0%;line-height: 25px;" id="item_user_list"></div>
                    </div>
                </div>
            </div>
            <!---->
        </div>
        <!---->
    </div>
</div>


<div class="ma-dialog-wrapper" id="api-tab-div" style="display: none;">
	<div class="ma-dialog" style="position: absolute; top: 300px; left: 619px; width: auto; height: auto;">
		<div class="ma-dialog-header not-select">
			切换文档
			<span>
				<i class="ma-icon ma-icon-close"></i>
			</span>
		</div>
		<div class="ma-dialog-content" style="padding: 5px 10px; overflow: auto;">
			<ul></ul>
		</div>
	</div>
</div>

<div class="ma-dialog-wrapper" id="add-duty" style="display: none;">
	<div class="ma-dialog" style="position: absolute; top: 300px; left: 619px; width: auto; height: auto;">
		<div class="ma-dialog-header not-select">
			文档 - 可预览人员
			<span>
				<i class="ma-icon ma-icon-close"></i>
			</span>
		</div>
		<div class="ma-dialog-content" style="padding: 5px 10px; overflow: auto;">
			<div class="tleft">
                <ul style="float: left;width: 100%;"></ul>
            </div>
            <div style="float: left;width: 200px;">
                <div class="ma-api-info">
                    <label>
                        账号
                    </label>
                    <div>
                        <input id="from_username" class="input" type="text">
                    </div>
                </div>
                <div class="ma-api-info">
                    <label>
                        密码
                    </label>
                    <div>
                        <input id="from_password" class="input" type="text">
                    </div>
                </div>
                <div class="ma-api-info">
                    <label>
                        姓名
                    </label>
                    <div>
                        <input id="from_fullname" class="input" type="text">
                    </div>
                </div>
                <div class="ma-api-info">
                    <label>
                        手机号
                    </label>
                    <div>
                        <input id="from_phone" class="input" type="text">
                    </div>
                </div>
                <div class="ma-api-info">
                    <label>
                        状态
                    </label>
                    <div style="line-height: 25px;">
                        <input name="from_status" type="radio" value="0"> 禁用 
                        <input name="from_status" type="radio" value="1" checked> 开启
                    </div>
                </div>
                <div class="ma-api-info">
                    <label>
                        备注
                    </label>
                    <div>
                        <textarea id="from_remark" class="input" style="height: 100px;"></textarea>
                    </div>
                </div>
                <div class="ma-api-info">
                    <label style="width: 90px;"></label>
                    <div>
                        <button id="post-duty" class="ma-button active">提交创建</button>
                    </div>
                </div>
            </div>
		</div>
	</div>
</div>


<div class="magic-contextmenu" id="item-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 magic-contextmenu-item-divided 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" /}

<script src="__PUBLIC__/codemirror/lib/codemirror.js__VERSION__"></script>
<!--<script src="__PUBLIC__/codemirror/addon/edit/matchbrackets.js__VERSION__"></script>-->
<!--<script src="__PUBLIC__/codemirror/addon/selection/active-line.js__VERSION__"></script>-->
<script src="__PUBLIC__/codemirror/keymap/sublime.js__VERSION__"></script>

<script src="__PUBLIC__/codemirror/mode/xml/xml.js__VERSION__"></script>
<script src="__PUBLIC__/codemirror/mode/javascript/javascript.js__VERSION__"></script>
<script src="__PUBLIC__/codemirror/mode/css/css.js__VERSION__"></script>
<script src="__PUBLIC__/codemirror/mode/vbscript/vbscript.js__VERSION__"></script>
<script src="__PUBLIC__/codemirror/mode/htmlmixed/htmlmixed.js__VERSION__"></script>
<script src="__PUBLIC__/editor/editormd.min.js__VERSION__"></script>