<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>KGCMS企业应用管理平台 - Powered by KGCMS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<!-- <meta http-equiv="cache-control" content="no-siteapp" /> -->
<link rel="stylesheet" href="{{ kg['tpl_url'] }}style/navig_update.css">
<script src="{{ kg['tpl_url'] }}script/jquery.min.js"></script>
<script src="{{ kg['server']['HTTP_HOST'] }}/tools/amazeui/js/amazeui.min.js"></script>
<script src="{{kg['tpl_url']}}script/common.js"></script>
<script src="{{ kg['tpl_url'] }}script/navig_update.js"></script>
</head>
<body data-type="generalComponents">
	{% include 'component_header.tpl' %}
	<div class="tpl-page-container tpl-page-header-fixed">
		<div class="scrollbar-wrap">
		{% include 'component_left.tpl' %}
		<div class="tpl-content-wrapper">
			<div class="tpl-content-page-title">
				系统及导航管理
			</div>
			<ol class="am-breadcrumb">
				<li><a href="#" class="am-icon-home">首页</a></li>
				<li><a href="navig_manage">系统及导航管理</a></li>
				<li class="am-active">添加/修改菜单</li>
			</ol>
			<div class="tpl-portlet-components">
				<div class="portlet-title">
					<div class="caption font-green bold">
						<span class="am-icon-code"></span> 添加/修改菜单
					</div>
					<div class="tpl-portlet-input tpl-fz-ml ngco-No-marginT ngre-HNo-paddidngT">
						<div class="am-btn-toolbar">
							<div class="am-btn-group am-btn-group-xs">
								<a href="navig_manage" class="am-btn am-btn-success"><span class="am-icon-plus"></span> 返回上级</a>
							</div>
						</div>
					</div>
				</div>
				<div class="tpl-block ">
						<form  method="post" id="editTwo">
						<table class="am-table am-table-striped am-table-hover table-main ngco-Esz-mgibdr">
							<thead>
								<tr>
									<th class="table-id">序号</th>
									<th class="table-title">链接名称/链接URL</th>
									<th class="table-title" colspan="2">链接模块</th>
									<th class="table-type">简要描述</th>
									<th class="table-author">图标</th>
									<th class="table-id">排序</th>
									<th class="table-type">新窗口打开</th>
									<th class="table-type">启用</th>
									<th class="table-set">操作</th>
								</tr>
							</thead>
							<tbody id="ngna-module">
								{% for row in data %}
								<tr>
								<td>{{loop.index}}</td>
								<td>
									<input name="title[]" value="{{row['name']}}" type="text" class="zty-sort" placeholder="请输入链接名称">
									<input class="ty-url" readonly="readonly" name="url[]" value="{{row['url']}}" placeholder="链接URL，自动生成" type="text" >								
								</td>
								<td>
									<div class="am-select-hover">
										<select data-am-selected="{btnSize: 'sm'}" class="first-select" name="page[]" style="display: none;">
											<option value="0">请选择链接类型</option>
											<option {% if row['page']=='index' %}selected="selected" {%endif%} value="index">应用首页</option>
											<option {% if row['page']=='article_list' %}selected="selected" {%endif%} value="/article?cid=">文章栏目页</option>
											<option {% if row['page']=='article_view' %}selected="selected" {%endif%} value="/article?id=">文章内容页</option>
											<option {% if row['page']=='product_list' %}selected="selected" {%endif%} value="/product?cid=">商品栏目页</option>
											<option {% if row['page']=='product_view' %}selected="selected" {%endif%} value="/product?id=">商品内容页</option>
											<option {% if row['page']=='photo_list' %}selected="selected" {%endif%} value="/photo?cid=">图片集栏目页</option>
											<option {% if row['page']=='photo_view' %}selected="selected" {%endif%}value="/photo?id=">图片集内容页</option>
											<option {% if row['page']=='customize' %}selected="selected" {%endif%} value="customize">自定义菜单</option>
										</select>
									</div>
								</td>
								<td>
									<!-- 下拉搜索框(文章栏目) -->
									<div class="am-select-hover" data-option="article_list">
										<select data-am-selected="{searchBox: 1}" class="" id="selected-searchq{{loop.index}}">
											{% for var in list%}
											<option {% if row['page']=='article_list' and row['mid']==var['id'] %}selected="selected" {%endif%} value="{{var['id']}}">{{var['title']}}</option>
											{% endfor %}
										</select>
									</div>
									<!-- 下拉搜索框(商品栏目) -->
									<div class="am-select-hover" data-option="product_list">
										<select data-am-selected="{searchBox: 1}">
											{% for var in category%}
											<option {% if row['page']=='product_list' and row['mid']==var['id'] %}selected="selected" {%endif%} value="{{var['id']}}">{{var['title']}}</option>
											{% endfor %}
										</select>
									</div>
									<!-- 下拉搜索框(图片栏目) -->
									<div class="am-select-hover" data-option="photo_list">
										<select data-am-selected="{searchBox: 1}" class="">
											{% for row in slide%}
											<option {% if row['page']=='photo_list' and row['mid']==var['id'] %}selected="selected" {%endif%} value="{{row['id']}}">{{row['title']}}</option>
											{% endfor %}
										</select>
									</div>
									<!-- 输入框 -->
									<div data-option="customize">
										<ul class="list-inline">
											<li class="align-middle"><input class="ngar-Vxiugai-radius ngco-Oe6-border" value="{% if row['page'] in ['article_view', 'product_view', 'photo_view'] %}{{row['mid']}}{%endif%}{%if row['page'] == 'customize'%}{{row['url']}}{%endif%}" type="text" size="20" placeholder=""></li>
											<li class="align-middle"><a target="_blank"><span class="am-icon-chain tooltip"></span></a></li>
										</ul>
									</div>
								</td>
								<td>
									<textarea name="description[]" rows="3">{{row['description']}}</textarea>
								</td>
								<td>
									<ul  class="list-inline">
										<li class="icon-img {% if not row['logo'] %}hidden{% endif %}">
											<div data-am-widget="figure" class="am-figure" data-am-figure="{  pureview: 'true' }">
											<img  src=" {% if row['logo'] %}{{row['logo']}}{% endif %}" alt=""/>
											</div>
										</li>
										<li>
											<div class="ewm-upload qrcodeUpload">
												<input type="file" class="input-file qrcodeInput">
												<input type="hidden" class="ewmGather" value="{{row['logo_data']}}" name="img[]">
												{% if row['logo'] %}
												<span class="am-icon-pencil-square-o ngna-span1"></span>
												{% else %}
												<div class="shuline"></div>
												<div class="hengline"></div>
												{% endif %}
											</div>
										</li>
									</ul>
								</td>
								<td>
									<input name="sort[]" value="{{row['sort']}}" type="text" class="zty-sort" size="4">
								</td>
								<td>
									<div class="tpl-switch">
										<label>
											<input type="checkbox"  class="ios-switch bigswitch tpl-switch-btn" {% if row['target'] %}checked{%endif%} />
											<div class="tpl-switch-btn-view ty-target">
												<div></div>
											</div>
										</label>
										<input type="hidden" name="target[]" value="{{row['target']}}">
									</div>
								</td>
								<td>
									<div class="tpl-switch">
										<label>
											<input type="checkbox"  class="ios-switch bigswitch tpl-switch-btn" {% if row['enable'] %}checked{%endif%} />
											<div class="tpl-switch-btn-view ty-enable">
												<div></div>
											</div>
										</label>
										<input type="hidden" name="enable[]" value="{{row['enable']}}">
									</div>
								</td>
								<td>
									<div class="am-btn-toolbar ngco-KNo-padding">
										<div class="am-btn-group am-btn-group-xs">
											<a class="am-btn am-btn-default am-btn-xs am-text-danger"><span class="am-icon-trash-o"></span>&nbsp;删除</a>
										</div>
									</div>
								</td>
								</tr>
									{% endfor %}
									
									{% if not data %}<tr class="no-data"><td colspan="10">没有相关数据</td></tr>{% endif %}
							</tbody>
						</table>
						<input type="hidden" name="action" value="submit" />
						</form>
						
						<div class="tpl-portlet-input tpl-fz-ml tpl-add-fl">
							<div class="am-btn-toolbar">
								<div class="am-btn-group am-btn-group-xs">
									<button class="am-btn am-btn-success" id="addList" type="button"><span class="am-icon-plus"></span> 新增</button>
								</div>
							</div>
						</div>
						<div class="am-g">
							<div class="tpl-form-body tpl-form-line">
								<div class="am-form-group">
									<div class="am-u-md-9 am-u-md-push-4  center_div ngco-W50bai-width ngco-No-marginT">
										<button type="button" class="am-btn am-btn-primary tpl-btn-bg-color-success distances submin_but am-edit">提交</button>
									</div>
								</div>
							</div>
						</div>
						<hr style="border-top: 1px solid #f8f8f8;" />
					
				</div>
			</div>
			{% include 'component_footer.tpl' %}
		</div>
		
		</div><!-- /.scrollbar-wrap -->
	</div>
				<script>
				$(function() {
					// 删除按钮
					$('.am-table-striped').on('click', '.am-text-danger', function() {
						$(this).parents('tr').remove();
						if($('#ngna-module tr').length<2){
							$('.no-data').show();
						}
					});
					// 插入一行
					$('#addList').click(function() {
						$('.no-data').hide();
						var indexs = $('.ty-index');
						if (indexs.length == 0) {
							index_num = 1;
						} else {
							index_num = indexs.length + 1;
						}
						var clone_html=$(' <tr><td>' + index_num + '</td> <td><input name="title[]" value="" type="text" class="zty-sort" placeholder="请输入链接名称"><input class="ty-url" readonly="readonly" name="url[]" value="" placeholder="链接URL，自动生成" type="text" ></td><td><div class="am-select-hover"><select data-am-selected="{btnSize: \'sm\'}" class="first-select" name="page[]" ><option value="0">请选择链接类型</option><option  value="index">应用首页</option><option value="/article?cid=">文章栏目页</option><option  value="/article?id=">文章内容页</option><option value="/product?cid=">商品栏目页</option><option  value="/product?id=">商品内容页</option><option  value="/photo?cid=">图片集栏目页</option><option value="/photo?id=">图片集内容页</option><option  value="customize">自定义菜单</option></select></div></td><td><div class="am-select-hover" data-option="article_list"><select data-am-selected="{searchBox: 1}">{% for var in list%}<option  value="{{var['id']}}">{{var['title']}}</option>{% endfor %}</select></div><div class="am-select-hover" data-option="product_list"><select data-am-selected="{searchBox: 1}" >{% for var in category%}<option value="{{var['id']}}">{{var['title']}}</option>{% endfor %}</select></div><div class="am-select-hover" data-option="photo_list"><select data-am-selected="{searchBox: 1}">{% for row in slide%}<option  value="{{row['id']}}">{{row['title']}}</option>{% endfor %}</select></div><div data-option="customize"><ul class="list-inline"><li class="align-middle"><input class="ngar-Vxiugai-radius ngco-Oe6-border" value="" type="text" size="20" placeholder=""></li><li class="align-middle"><a target="_blank"><span class="am-icon-chain tooltip"></span></a></li></ul></div></td> <td><textarea name="description[]" rows="3"></textarea></td> <td><ul  class="list-inline"><li class="hidden icon-img"><div data-am-widget="figure" class="am-figure" data-am-figure="{  pureview: \'true\' }"><img src=""  alt=""/></div></li><li><div class="ewm-upload qrcodeUpload"><input type="file" class="input-file qrcodeInput"><input type="hidden" class="ewmGather" value="" name="img[]"><div class="shuline"></div><div class="hengline"></div></div></li></ul></td><td><input name="sort[]" value="20" type="text" class="zty-sort" size="4"></td><td><div class="tpl-switch"><label><input type="checkbox"  class="ios-switch bigswitch tpl-switch-btn" /><div class="tpl-switch-btn-view ty-target"><div></div></div></label><input type="hidden" name="target[]" value=""></div></td><td><div class="tpl-switch"><label><input type="checkbox"  class="ios-switch bigswitch tpl-switch-btn" /><div class="tpl-switch-btn-view ty-enable"><div></div></div></label><input type="hidden" name="enable[]" value=""></div></td> <td><div class="am-btn-toolbar ngco-KNo-padding"><div class="am-btn-group am-btn-group-xs"><a class="am-btn am-btn-default am-btn-xs am-text-danger"><span class="am-icon-trash-o"></span>&nbsp;删除</a></div></div></td>'+'</tr>')
						
						$("#ngna-module").append(clone_html);
						$("#ngna-module").trigger('changed.dom.amui');
					});
					
					// 两个开关的控制
					$('.am-table-striped').on('change', '.tpl-switch :checkbox', function() {
						console.log($(this).prop('checked'))
						if ($(this).prop('checked')) {
							$(this).parents('.tpl-switch').find(':input[type="hidden"]').val(1);
						} else {
							$(this).parents('.tpl-switch').find(':input[type="hidden"]').val(0)
						}
					});
					
					// 页面加载
					$('.first-select').each(function(){
						select($(this),true);
					})
					// 第一个下拉的点击事件
					$('.am-table-striped').on('change', '.first-select', function() {
						select($(this));
					})
					// 第二个下拉的点击事件
					$('.am-table-striped').on('change', '[data-option] input,[data-option] select', function() {
						var value = $(this).val();
						var tr = $(this).parents('tr')
						var first =tr.find('.first-select').val()
						if(first == 'customize'||first == 'index'){
							tr.find('.ty-url').val(value)
						}else{
							tr.find('.ty-url').val(first + value)
						}
					})

				})
				// 下拉框选择
				function select($e,isinit) {
					var value = $e.val();
					var tr=$e.parents('tr');
					var customize=tr.find('[data-option="customize"]')
					var customize_input=customize.find('input')
					tr.find('[data-option] select,[data-option] input').removeAttr('name');
					tr.find('[data-option]').hide();
					customize.find('a').hide();
					if(!isinit){
						customize_input.val('');
						customize_input.removeAttr('placeholder');
					}
					if (value == '0') { // 请选择类型
						customize.attr('name', 'mid');
					}
					else if (value == 'index') { // 应用首页
						// customize.show();
						if(!isinit){customize_input.val('/').trigger('change');}
						customize_input.attr('name', 'mid');
					}
					else if (value == '/article?cid=') { // 文章栏目页
						tr.find('[data-option="article_list"]').show();
						tr.find('[data-option="article_list"] select').attr('name', 'mid');
					}
					else if (value == '/article?id=') { // 文章内容页
						customize.show();
						customize_input.attr('name', 'mid');
						customize_input.attr('placeholder', '请输入文章ID');
						customize.find('a').attr('href', 'article_manage').show();					
					}
					else if (value == '/product?cid=') { // 商品栏目页
						tr.find('[data-option="product_list"]').show();
						tr.find('[data-option="product_list"] select').attr('name', 'mid');
					}
					else if (value == '/product?id=') { // 商品内容页
						customize.show();
						customize_input.attr('name', 'mid');
						customize_input.attr('placeholder', '请输入商品ID');
						customize.find('a').attr('href', 'product_manage').show();	
					}
					else if (value == '/photo?cid=') { // 图片栏目页
						tr.find('[data-option="photo_list"]').show();
						tr.find('[data-option="photo_list"] select').attr('name', 'mid');
					}
					else if (value == '/photo?id=') { // 图片内容页
						customize.show();
						customize_input.attr('name', 'mid');
						customize_input.attr('placeholder', '请输入图片集ID');
						customize.find('a').attr('href', 'photo_manage').show();
					}
					else{ // 自定义菜单
					customize.show();
					customize_input.attr('name', 'mid');
					customize_input.attr('placeholder', '请输入URL链接');
					}
				}
				</script>
</body>
</html>