{extend name="public/base"/}
{block name="style"}
<style>

.preview-item_3sS-z1Cr {
	margin-top: 20px;
}
.mt {
	margin-top: 20px;
}
.menu_2tnQ8yA6 {
	position: relative;
	width: 294px;
	height: 500px;
	border: 1px solid #e3e3e3;
	background-color: #ebebeb;
	background-image: url(/public/images/head.png);
	background-position: 0 0;
	-moz-background-size: 100% auto;
	background-size: 100% auto;
	background-repeat: no-repeat;
}
.bar_3TmI2kJM {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 45px;
    border-top: 1px solid #f3f3f3;
}
.keyboard_1qKI1DB{
    background-image:url(data:image/jpeg;base64,/9j/4QlQaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzEzOCA3OS4xNTk4MjQsIDIwMTYvMDkvMTQtMDE6MDk6MDEgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiLz4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8P3hwYWNrZXQgZW5kPSJ3Ij8+/+0ALFBob3Rvc2hvcCAzLjAAOEJJTQQlAAAAAAAQ1B2M2Y8AsgTpgAmY7PhCfv/bAIQAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAgICAgICAgICAwMDAwMDAwMDAwEBAQEBAQECAQECAgIBAgIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMD/90ABAAF/+4ADkFkb2JlAGTAAAAAAf/AABEIAC0AKAMAEQABEQECEQH/xACEAAEAAwEBAAAAAAAAAAAAAAAABwgKAQYBAQEBAQEAAAAAAAAAAAAAAAACAwEEEAAABQMBAwsDBQAAAAAAAAABAgMEBQYHEQATITEIEhRBUVRxgZPS8BYisTJhkcHxEQACAQMCBgIDAQAAAAAAAAAAARECITES8EFRYaHB0XHhAzJCkf/aAAwDAAABEQIRAD8A3k9Fbd3Q9FP26AdFbd3Q9FP26AdFbd3Q9FP26AdFbd3Q9FP26AdFbd3Q9FP26A//0N6GgHzhnQELVnfSmaHuRRNspKnbgSUjWgHxUNP0XKzFIUztDmSjvqmfbEFKPGUckMmnsiL7HHPcbBIxVB2polTaN793iHXFWmH43vMJzTrEsaA//9Hehnwz2Dnh5b+r5uyQKtVJcS5UdWFPxcXDVVNQtUPryEczNO04ydQdDltkkX6fi5x6pFvjGkbgOCmbstquiJ3RTlTKpgCBvTTTpl/so79OnyvUS5i8b3uHH6F7rzKxZH57Y3WRcGsDIXhGOUpNmDolZspksWjZASmpZMwXBfNjdLTR5ouBRDINhLkwVoomNSvVGe88uGM5SOaquTxP1xvu/H2kXca6UmevyuYmrKYb0Vb6j61j5upKXYJQFSSdRQT+amKSQXCIYGF/SDpiVnJbJcyqaiwZKkbAa46PxyoamWoWbe+HhQ2bcWcOOT+r+efG2QYAcDnPXn9xAc8AwAB4+fAfOaH/0t6HgA7gERxx8gxkftDf8x2nMgp7dFS3NTWnuHR9VuWUvJRlc1BUzag29cQFD1LMzFNV6tVtOsEX1QLooR6Eo7ZtzkWWKVFZuoBgNszAfXooVVNaqScQub7b+LyocabtRvefqlq9eg4kzSynJYqbpZr9R3KPMIcqiwoJDciMhjwbU4J/UG6CBifBmecGUHPODqtqpf0o0xh4nef8ViOEw5mcrPrv0WC1lp6ioKC5PdWQyTaPtzM1I7uLKDQU3c6jK6nzztXyUk6BNk+ph84bPzzUm/AGjREp1Q2hUgAxxABlzrTqcq14fnvgtNaepejGM8d3bx89/H+deUs//9Peh8/zSYwAXON5gHO8f1ZEOwdw+fDd29YDPz4If3oBv6x3dn3b+vA+f58cJA8saZu8g//U3oaAaAaAaA5w3+H5xoD/2Q==);
    background-position: 50%;
    background-repeat: no-repeat;
    -moz-background-size: 40px 45px;
    background-size: 40px 45px;
    width: 40px;
}
.bar-item_1ZTYyCRO {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: #fafafa;
    border-left: 1px solid #e3e3e3;
}
.bar-item-text_2flYIQws {
    height: 100%;
    line-height: 45px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    color: #7d7d7d;
    font-size: 12px;
    cursor: pointer;
}
.disabled_e6XL1Mk8 {
    cursor: default!important;
}
.sub-menu_12X9R8s5 {
    position: absolute;
    bottom: 55px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 66px;
    background: #fff;
}
.triangle_2UhOdTJJ {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -12px;
    border: 6px solid transparent;
    border-top-color: #fff;
}
.sub-menu-item_2lyhtcv9 {
    font-size: 12px;
    height: 27px;
    line-height: 27px;
    text-align: center;
    color: #757575;
    cursor: pointer;
}
.ibox-content {
    background-color: #fff;
    color: inherit;
    padding: 15px;
}
</style>
<link rel="stylesheet" type="text/css" href="/public/wechat/style.css"/>
{/block}
{block name="body"}

<div class="main-box clearfix">
	<header class="main-box-header clearfix">
		<div class="pull-left">
			<h2>{$meta_title}</h2>
		</div>
		<div class="pull-right">
			
		</div>
	</header>
	<div class="main-box-body clearfix">
		
		<div class="table-responsive clearfix">

			<div class="table-responsive clearfix">
				
				<ul class="nav nav-tabs" style="margin-top:20px;">
					<li class="active">
						<a href="{:url('menu')}">菜单栏配置</a>
					</li>
					<li>
						<a href="{:url('subscribe')}">被关注回复</a>
					</li>
					<!---
					<li>
						<a href="{:url('defaults')}">默认回复</a>
					</li>
					-->
					<li >
						<a href="{:url('admin/template/index')}">模板消息</a>
					</li>
					<li >
						<a href="{:url('admin/customservice/text')}">文本消息</a>
					</li>
					<li >
						<a href="{:url('admin/keys/index')}">关键字回复</a>
					</li>
				</ul>
				<div class="tab-content">
					<div class="radio radio-nice radio-inline">
						<input type="radio" name="type" id="type-1" value="1" {eq name="type" value="1"}checked{/eq}/>
						<label for="type-1">授权菜单</label>
						{if $Think.session.user_auth.group==3}
						<input type="radio" name="type" id="type-2" value="2" {eq name="type" value="2"}checked{/eq}/>
						<label for="type-2">自定义菜单</label>
						{/if}
					</div>
					<div id="type1">
						<p class='serve_hint'>说明：<br/>
							1.使用授权菜单后，公众号会自动生成如下菜单；<br/>
							2.若公众号在微信后台或其他平台修改菜单栏，需回到该页面再次[保存并发布]授权菜单，方能重新使用授权菜单
						</p>
							
						<div class="preview-item_3sS-z1Cr preview-item__tpl_2HojIdmm">
						   <h5 class="mt">菜单预览</h5>
						   <div class="menu_2tnQ8yA6 mt-s">
							<div class="bar_3TmI2kJM">
							 <div class="keyboard_1qKI1DB"></div>

							{volist name="menu" id="vo"}
							 <div class="bar-item_1ZTYyCRO">
							  <div class="bar-item-text_2flYIQws disabled_e6XL1Mk8">
							   {$vo.name}
							  </div>
							   {notempty name="vo.sub_button"}
								  <div class="sub-menu_12X9R8s5">
								   <div class="triangle_2UhOdTJJ"></div>
									{volist name="vo.sub_button" id="voo"}
								   <div class="sub-menu-item_2lyhtcv9 disabled_e6XL1Mk8">
									{$voo.name}
								   </div>
								   {/volist}
								  </div>
								{/notempty}
							 </div>
							{/volist}
							</div>
						   </div>
						</div>
						
						<div style="margin-top:15px">
							<button type="button" class="btn btn-primary" id="btn-generate-menu">保存并发布</button>
						</div>
					</div>
					<div id="type2" style="display:none">
						<p class='serve_hint'>说明：<br/>
							1.使用自定义菜单后，公众号会自动生成如下菜单；<br/>
							2.若公众号在微信后台或其他平台修改菜单栏，需回到该页面再次[保存并发布]授权菜单，方能重新使用授权菜单
						</p>
						<button type="button" class="btn btn-primary" id="btn-copy-menu"><span>复制授权菜单</span></button>
						<span class="">（点击后，授权菜单内容将被一键复制，且用户仍可进行自定义）</span>
						<div class="ibox-content">
                
							<div class="mobile-preview pull-left">
								<div class="mobile-header">公众号</div>
								<div class="mobile-body"></div>
								<ul class='mobile-footer'>
									
									{foreach $cmenu as $menu} 
									<li class="parent-menu">
										<a>
											<i class="icon-sub hide"></i>
											<span data-type="{$menu.type}" data-customizeurl="{$menu.url}">{$menu.name}</span>
										</a>
										<div class="sub-menu text-center hide">
											<ul>
												{if empty($menu['sub']) eq false}
												{foreach $menu.sub as $submenu}
												<li>
													<a class="bottom-border">
														<span data-type="{$submenu.type}" data-customizeurl="{$submenu.url}">{$submenu.name}</span>
													</a>
												</li>
												{/foreach}
												{/if}
												<li class="menu-add"><a><i class="icon-add"></i></a></li>
											</ul>
											<i class="arrow arrow_out"></i>
											<i class="arrow arrow_in"></i>
										</div>
									</li>
									{/foreach}

									<li class="parent-menu menu-add">
										<a><i class="icon-add"></i></a>
									</li>
								</ul>
							</div>
							<div class="pull-left" style="position:absolute;z-index:99;">
								<div class="popover fade right up in menu-editor">
									<div class="arrow"></div>
									<h3 class="popover-title">
										菜单名称
										<a class="pull-right menu-delete">删除</a>
									</h3>
									<div class="popover-content menu-content"></div>
								</div>
							</div>
							<div class="hide menu-editor-parent-tpl">
								<form class="form-horizontal">
									<p>已添加子菜单，仅可设置菜单名称。</p>
									<div class="form-group" style="margin-top:50px">
										<label class="col-xs-3 control-label">菜单名称</label>
										<div class="col-xs-6">
											<input name="menu-name" class="form-control input-sm">
											<span class="help-block m-b-none">字数不超过5个汉字或16个字母</span>
										</div>
									</div>
								</form>
							</div>
							<div class="hide menu-editor-content-tpl">
								<form class="form-horizontal">
									<div class="form-group" style="margin-top:50px">
										<label class="col-xs-3 control-label">菜单名称</label>
										<div class="col-xs-6">
											<input name="menu-name" class="form-control input-sm">
											<span class="help-block m-b-none">字数不超过13个汉字或40个字母</span>
										</div>
									</div>
									<div class="form-group" style="margin-top:30px">
										<label class="col-xs-3 control-label">页面地址</label>
										<div class="col-xs-6">
											<select class="form-control" name="type" id="menu-type" style="width:auto;" onchange="menuchange(this.value)">
												<option value="0">自定义网址</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>
												<option value="7">阅读历史</option>
												<option value="8">个人中心</option>
												<option value="9">充值</option>
												<option value="10">书架</option>
												<option value="11">搜索</option>
												<option value="12">联系客服</option>
											</select>
											<span class="help-block m-b-none">用户点击菜单会跳转到一项链接</span>
										</div>
									</div>
									<div class="form-group" style="margin-top:30px" id="form-customizeurl" style="display:none">
										<label class="col-xs-3 control-label">自定义URL</label>
										<div class="col-xs-6">
											<input name="customizeurl" id="menu-customizeurl" class="form-control input-sm editor-content-input">
											<span class="help-block m-b-none">地址可自定义输入，或选择内部网址</span>
										</div>
									</div>
								</form>
							</div>
							<div style="clear:both"></div>
							<div style="width:830px;padding-top:40px;text-align:center">
									<button type="button" class="btn btn-primary menu-submit" >保存并发布</button>
							</div>
						</div>
					</div>
				</div>
				
				
			</div>
			
		</div>
	</div>
</div>
{/block}
{block name="script"}
<script>
	var editurl="{:url('wxmp/menuedit')}";
	var arrayurl =[0,"/?channel=1&source=wechat_menu","/?channel=2&source=wechat_menu","/featured.html?source=wechat_menu&channel=1","/featured.html?source=wechat_menu&channel=2","/top.html?source=wechat_menu&channel=1","/top.html?source=wechat_menu&channel=2","/focushistory?source=wechat_menu","/personal/info?source=wechat_menu","/pay/index?source=wechat_menu","/personal/bookcase?source=wechat_menu","/search.html?source=wechat_menu","kefu_qrcode_url"];
	var type={$type};
    $(function () {
		if (type==1)
		{
			$('#type1').show();
			$('#type2').hide();
		}else{
			$('#type2').show();
			$('#type1').hide();
		}
		
        $('#btn-generate-menu').click(function () {
            $.ajax({
                url: '{:url("wxmp/push",array("model_id"=>18))}',
                type: 'POST',
                contentType: 'application/json',
				success: function(data){
					if(data.code==1)
					{
						updateAlert('菜单生成成功，大约5分钟后生效', 'success');
					}else{
						updateAlert('菜单生成失败'+data.msg, 'error');
						setTimeout(function() {
							//window.location.reload()
						}, 1000);
					}
				}
            })
            return false;
        });
		$('#btn-copy-menu').click(function () {
			$.ajax({
                url: '{:url("wxmp/menucopy",array("model_id"=>18))}',
                type: 'POST',
                contentType: 'application/json',
				success: function(data){
					if(data.code==1)
					{
						updateAlert('菜单复制成功', 'success');
						setTimeout(function() {
							window.location.reload()
						}, 1000);
					}else{
						updateAlert('菜单复制失败', 'error');
						setTimeout(function() {
							//window.location.reload()
						}, 1000);
					}
				}
            })
            return false;
		});
		
		$('input[type=radio][name=type]').change(function() {
			if (this.value==1)
			{
				$('#type1').show();
				$('#type2').hide();
			}else{
				$('#type2').show();
				$('#type1').hide();
			}
		});
    });

	function menuchange(value){
		if (value==0)
		{
			$('#form-customizeurl').show();
		}else{
			$('#form-customizeurl').hide();
		}
	
	}
</script>

<script src="/public/wechat/menu.js"></script>

{/block}