{template 'common/header'}
<link rel="stylesheet" href="./resource/css/wxapp-icon.css">
<div id="js-wxapp-create" ng-controller="MainCtrl" ng-cloak>
	<div class="container">
		<div class="caret-wxapp">
			<form action="" method="post">
				<input type="hidden" name="wxappval" value="{{submit}}">
			</form>
			<div class="panel panel-app">
				<div class="panel-heading">
					<ol class="breadcrumb we7-breadcrumb">
						<a href="javascript:;" onclick="history.go(-1)" class="go-back">
						<i class="wi wi-back-circle"></i></a>
						<span class="font-lg">新建小程序</span>
					</ol>
				</div>
				<div class="panel-body">
					<ul class="nav nav-wxapp" role="tablist">
						<li ng-class="{'active ban' : createStep == 1, 'finished ready' : createStep > 1}">
							<a href="javascript:void(0);">
								<i class="num">1</i>
								<div class="wxapp-step-name">
									<img src="./resource/images/creat-step-1.png"/>
									<p>选择应用</p>
								</div>
							</a>
						</li>
						<li ng-class="{'active ban' : createStep == 2, 'finished ready' : createStep > 2}">
							<a href="javascript:void(0);">
								<i class="num">2</i>
								<div class="wxapp-step-name">
									<img src="./resource/images/creat-step-2.png"/>
									<p>首页设计</p>
								</div>
							</a>
						</li>
						<li ng-class="{'active ban' : createStep == 3, 'finished ready' : createStep > 3}">
							<a href="javascript:void(0);">
								<i class="num">3</i>
								<div class="wxapp-step-name">
									<img src="./resource/images/creat-step-3.png"/>
									<p>底部导航</p>
								</div>
							</a>
						</li>
						<li ng-class="{'active ban' : createStep == 4, 'finished ready' : createStep > 4}">
							<a href="javascript:void(0);">
								<i class="num">4</i>
								<div class="wxapp-step-name">
									<img src="./resource/images/creat-step-4.png"/>
									<p>打包完成</p>
								</div>
							</a>
						</li>
					</ul>
					<div class="wxapp-content tab-content">
						<div id="select" ng-show="createStep == 1">
							<div class="form-defalut we7-form">
								<div class="form-group">
									<label for="" class="control-label col-sm-2">小程序名称</label>
									<div class="form-controls col-sm-10">
										<input type="text" name="name" value="{$wxapp_info['name']}" class="form-control wxapp-name" id="" placeholder="小程序名称">
									</div>
								</div>
								{if empty($wxapp_info)}
								<div class="form-group">
									<label for="" class="control-label col-sm-2">小程序账号</label>
									<div class="form-controls col-sm-10">
										<input type="text" name="account" value="" class="form-control wxapp-name" id="" placeholder="小程序账号">
									</div>
								</div>
								<div class="form-group">
									<label for="" class="control-label col-sm-2">原始ID</label>
									<div class="form-controls col-sm-10">
										<input type="text" name="original" value="" class="form-control wxapp-name" id="" placeholder="原始ID">
									</div>
								</div>
								<div class="form-group">
									<label for="" class="control-label col-sm-2">AppId</label>
									<div class="form-controls col-sm-10">
										<input type="text" name="key" value="" class="form-control wxapp-name" id="" placeholder="AppId">
									</div>
								</div>
								<div class="form-group">
									<label for="" class="control-label col-sm-2">AppSecret</label>
									<div class="form-controls col-sm-10">
										<input type="text" name="secret" value="" class="form-control wxapp-name" id="" placeholder="AppSecret">
									</div>
								</div>
								{/if}
								<div class="form-group">
									<label class="control-label col-sm-2">版本号</label>
									<div class="form-controls col-sm-1">
										<input type="number" name="version0" min="0" max="100" value="{$version_nums[0]}" {if !empty($version_nums)}disabled{/if} class="form-control wxapp-version version0">
									</div>
									<div class="form-controls pull-left">
										<p class="form-control-static wxapp-version">.</p>
									</div>
									<div class="form-controls col-sm-1">
										<input type="number" name="version1" min="0" max="100" value="{$version_nums[1]}" {if !empty($version_nums)}disabled{/if} class="form-control wxapp-version version1">
									</div>
									<div class="form-controls pull-left">
										<p class="form-control-static wxapp-version">.</p>
									</div>
									<div class="form-controls col-sm-1">
										<input type="number" name="version2" min="0" max="100" value="{$version_nums[2]}" {if !empty($version_nums)}disabled{/if} class="form-control wxapp-version version2">
									</div>
								</div>
								<div class="form-group">
									<input type="hidden" name="modules" value="">
									<label class="control-label col-sm-2">添加应用</label>
									<div class="form-controls col-sm-10">
										<ul class="app-list">
											<div we7-select-more></div>
										</ul>
									</div>
								</div>
								
							</div>
						</div>
						<div class="wxapp-modules">
							<div id="modules-Modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
								<div class="modal-dialog modal-dialog-default modal-lg">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
											<h3>
												<ul role="tablist" class="nav nav-pills" style="font-size:14px; margin-top:-20px;">
													<li role="presentation" class="basic">
														<a data-toggle="tab" data-type="basic" role="tab" aria-controls="baisc" href="#basic">选择需要打包的应用</a>
													</li>
												</ul>
											</h3>
										</div>
										<div class="modal-body modules-content">
											<div class="tab-content">
												<ul class="app-allow-list">
												</ul>
											</div>
										</div>
										<div class="modal-footer">
										</div>
									</div>
								</div>
							</div>
						</div>
						<div id="home" ng-show="createStep == 2">
							<div class="creat-wxapp-type" ng-show="type == 0">
								<input type="hidden" name="type" value="">
								<div class="type-heading">
									选择设计类型
								</div>
								<ul class="type-list">
									<li class="ban">
										<i class="wi wi-select-diy"></i>
										<p>DIY设计</p>
									</li>
									<li ng-click="selectType(2)">
										<i class="wi wi-select-tem"></i>
										<p>选择模板</p>
									</li>
									<li ng-click="selectType(3)">
										<i class="wi wi-select-app"></i>
										<p>直接跳转应用</p>
									</li>
								</ul>
							</div>
							<div ng-if="type == 2">
								<div class="wxapp-type-cut">
									<div class="dropdown dropdown-toggle">
										<a id="dLabel" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
											 选择模板
										    <span class="caret"></a>
										</a>
										<ul class="dropdown-menu" aria-labelledby="dLabel">
										    <li><a href="" class="active">DIY设计</a></li>
											<li ng-click="selectType(2)"><a href="" class="active">选择模板</a></li>
											<li ng-click="selectType(3)"><a href="" class="active">直接跳转应用</a></li>
										</ul>
									</div>
								</div>
								<div class="wxapp-tem-preview">
									<div class="wxapp-phone">
										<img src="./resource/images/iphone6.png" alt="" class="wxapp-phone-bg" />
										<div class="wxapp-home-preview">
											<img src="./resource/images/wxapp-default-tpl1.jpg" />
										</div>

									</div>
									<div class="panel panel-app tem-detail">
										<div class="panel-heading">
											模板功能
										</div>
										<div class="panel-body">
											<div class="tem-detail-heading">
												本模板包含以下功能
											</div>
											<div class="tem-detail-content">
												<ul>
													<li>更换幻灯片</li>
													<li>更换顶部小图标</li>
													<li>上传推荐图文</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
				
								<div class="creat-select-tem">
									<div class="select-tem-heading">
										选择模板
									</div>
									<div class="select-tem-filter">
										<div class="form-group" style="display:none;">
											<select name="" class="select-we7">
												<option value="">全部分类</option>
												<option value="">分类1</option>
												<option value="">分类2</option>
											</select>
										</div>
										<div class="input-group" style="display:none;">
											<input type="text" name="" class="form-control" placeholder="输入模板名">
											<span class="input-group-addon"><i class="fa fa-search"></i></span>
										</div>
									</div>
									<div class="select-tem-list">
										<input type="hidden" name="template" value="">
										<ul>
											<li class="select-tem-item" ng-click="selectTpl()">
												<img src="./resource/images/wxapp-default-tpl0.jpg"/>
												<a href="javascript:;" class="cover-dark">
													<i class="fa fa-check cover-selected"></i>
												</a>
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="form-group" ng-if="type == 3">
								<div class="wxapp-type-cut">
									<div class="dropdown dropdown-toggle">
										<a id="dLabel" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
											 直接跳转应用
										    <span class="caret"></a>
										</a>
										<ul class="dropdown-menu" aria-labelledby="dLabel">
										    <li><a href="" class="active">DIY设计</a></li>
											<li ng-click="selectType(2)"><a href="" class="active">选择模板</a></li>
											<li ng-click="selectType(3)"><a href="" class="active">直接跳转应用</a></li>
										</ul>
									</div>
								</div>
								<input type="hidden" name="tomodule" value="">
								<ul class="app-allow-list" style="padding-top: 110px;">
									<li class="select to-module" ng-click="selectHomeModule(m)" ng-repeat="m in modules">
										<div class="app-info">
											<img ng-src="{{m.icon}}"/>
											<p ng-bind="m.title"></p>
										</div>
										<a href="javascript:;" class="cover-dark">
											<i class="fa fa-check cover-selected"></i>
										</a>
									</li>
								</ul>
							</div>
						</div>
						<div id="bottom" ng-show="createStep == 3">
							<div class="wxapp-tem-preview wxapp-buttom-preview">
								<div class="wxapp-phone">
									<img src="./resource/images/iphone6.png" alt="" class="wxapp-phone-bg" />
									<div class="wxapp-home-preview">
										<div class="buttom-list-preview" ng-style="{'background-color': bottom.bgcolor}">
											<ul ng-style="{'border-top': '1px solid'+bottom.boundary}">
												<li ng-repeat="menu in menus">
													<img ng-src="{{menu.defaultImage}}" class="buttom-preview-img"/>
													<p class="buttom-preview-title" ng-bind="menu.name" ng-style="{'font-size':'12px', 'color': bottom.color}"></p>
												</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
							<div class="creat-buttom">
								<div class="buttom-heading">
									底部菜单
								</div>
								<div class="creat-buttom-select form-defalut">
									<div class="form-group">
										<label for="" class="control-label col-sm-3">是否显示</label>
										<div class="form-controls col-sm-9">
											<label><input name="" id="" class="form-control" type="checkbox"  style="display: none;">
											<div class="switch" ng-class="{'switchOn': ifShowMenu}" ng-click="showMenu()"></div>
											</label>
										</div>
									</div>
									<div class="form-group buttom-bg-color">
										<label for="" class="control-label col-sm-3">背景颜色</label>
										<div class="form-controls col-sm-4" >
											<div we7-colorpicker we7-my-color="bottom.bgcolor" we7-my-default-color="bottom.bgcolor"></div>
										</div>
									</div>
									<div class="form-group buttom-boundary-color">
										<label for="" class="control-label col-sm-3">交界线颜色</label>
										<div class="form-controls col-sm-4" >
											<div we7-colorpicker we7-my-color="bottom.boundary" we7-my-default-color="bottom.boundary"></div>
										</div>
									</div>
									<div class="form-group buttom-bg-color">
										<label for="" class="control-label col-sm-3">文字默认颜色</label>
										<div class="form-controls col-sm-4" >
											<div we7-colorpicker we7-my-color="bottom.color" we7-my-default-color="bottom.color"></div>
										</div>
									</div>
									<div class="form-group buttom-bg-color">
										<label for="" class="control-label col-sm-3">文字选中颜色</label>
										<div class="form-controls col-sm-4" >
											<div we7-colorpicker we7-my-color="bottom.selectedColor" we7-my-default-color="bottom.selectedColor"></div>
										</div>
									</div>
									<!-- <td>
										<div class="buttom-default-color">
											<div we7-colorpicker we7-my-color="menu.defaultColor" we7-my-default-color="menu.defaultColor"></div>
										</div>
									</td>
									<td>
										<div class="buttom-default-color">
											<div we7-colorpicker we7-my-color="menu.selectedColor" we7-my-default-color="menu.selectedColor"></div>
										</div>
									</td> -->
								</div>
								<div class="buttom-list">
									<table class="table we7-table buttom-list-table vertical-middle">
										<col width="70" />
										<col width="70" />
										<col width="100" />
										<col width="120" />
										<col width="70" />
										<tr>
											<th>默认</th>
											<th>选中</th>
											<th>菜单名称</th>
											<th>跳转到</th>
											<th>操作</th>
										</tr>
										<tr ng-repeat="menu in menus" class="we7-form">
											<td>
												<div class="nav-img-box">
													<img ng-src="{{menu.defaultImage}}" >
													<div ng-click="addDefaultImg($index)" class="select">选择</div>
													
												</div>
											</td>
											<td>
												<div class="nav-img-box">
													<img ng-src="{{menu.selectedImage}}">
													<div ng-click="addSelectedImg($index)" class="select">选择</div>
													
												</div>
											</td>
											<td>
												<input type="text" name="menuname" ng-model="menu.name" class="form-control" />
											</td>
											
											<td>
												<select class="form-control" id="lineheight" ng-model="menu.module" ng-options="menu.title group by menu.module.title for menu in show_url">
												</select>
											</td>
											<td>
												<a href="javascript:;" class="buttom-del" ng-click="delMenu($index)"><i class="fa fa-times-circle"></i></a>
											</td>
										</tr>
										<tr class="buttom-more">
											<td colspan="5"><a href="javascript:;" class="buttom-add" ng-click="addMenu()">+</a></td>
										</tr>
									</table>
								</div>
							</div>
						</div>
						<div id="finish" ng-show="createStep == 4">
							<div class="form we7-form wxapp-finish">
								<div class="form-group">
									<label for="" class="control-label col-sm-2">小程序名称</label>
									<div class="form-controls col-sm-10">
										<p class="form-control-static" ng-bind="submit.name"></p>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-sm-2">版本号</label>
									<div class="form-controls col-sm-10">
										<p class="form-control-static">V {{submit.version0}}.{{submit.version1}}.{{submit.version2}}</p>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-sm-2">打包应用</label>
									<div class="form-controls col-sm-10">
										<ul class="app-list">
											<li class="select" ng-repeat="m in submit.modules">
												<div class="app-info">
													<img ng-src="{{m.icon}}" />
													<p>{{m.title}}</p>
												</div>
											</li>
										</ul>
									</div>
								</div>
								<div class="form-group" ng-if="type == 2">
									<label class="control-label col-sm-2">首页模板</label>
									<div class="form-controls col-sm-10">
										<p class="form-control-static" ng-bind="submit.template"></p>
									</div>
								</div>
								<div class="form-group" ng-if="type == 3">
									<label class="control-label col-sm-2">首页跳转应用</label>
									<div class="form-controls col-sm-10">
										<p class="form-control-static" ng-bind="submit.tomodule.title"></p>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-sm-2">底部菜单</label>
									<div class="form-controls col-sm-10">	
										<table class="table-finish-buttom">
											<col width="75px"/>
											<col width="105"/>
											<col />
											<tr>
												<td>菜单图标</td>
												<td>菜单名字</td>
												<td>菜单链接模块</td>
											</tr>
											<tr ng-repeat="menu in submit.menus">
												<td>
													<img ng-src="{{menu.defaultImage}}" alt="" width="48px" height="48px"/>
												</td>
												<td ng-bind="menu.name"></td>
												<td ng-bind="menu.module.title"></td>
											</tr>
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>

	<nav class="navbar navbar-wxapp-bottom navbar-fixed-bottom" role="navigation">
		<div class="container">
			<div class="pager">
				<a type="button" class="btn btn-primary" ng-show="createStep != 1" ng-click="prevStep()">上一步</a>
				<a type="button" class="btn btn-primary" ng-show="createStep != 4" ng-click="nextStep()">下一步</a>
				<a type="button" class="btn btn-danger" ng-show="createStep == 4" ng-click="package()">生成版本打包下载</a>
				<!-- <a type="button" class="btn btn-default" ng-show="createStep == 4">首页预览</a> -->
			</div>
		</div>
	</nav>
</div>
<script>

require(['fileUploader','underscore'], function(uploader){
	angular.module('wxApp').value('config', {
		'uniacid' : "{$uniacid}",
		'getlink_url' : "{php echo url('wxapp/post/getlink')}"
	});
	angular.bootstrap($('#js-wxapp-create'), ['wxApp']);
});
var modulesVal = [];
var selectModule = function(module, title, icon, showurl, version){
	var html = '<li class="select">'+
			'		<div class="app-info">'+
			'			<img src="'+icon+'" />'+
			'			<p>'+title+'</p>'+
			'		</div>'+
			'		<div class="cover-dark">'+
			'			<a href="javascript:;" class="cover-delect" onclick="delModule(\''+module+'\', this);"><i class="fa fa-minus-circle"></i>删除</a>'+
			'		</div>'+
			'	</li>';
	$('#select .app-list').prepend(html);
	modulesVal.push({
		title: title,
		module: module,
		icon: icon,
		url: showurl,
		version: version
	});
	$(':hidden[name="modules"]').val(modulesVal);				
	$('#modules-Modal').modal('hide');
};
var delModule = function(module, t) {
	if(!_.isEmpty(modulesVal)) {
		angular.forEach(modulesVal, function(val, key){
			if(val.module == module) {
				modulesVal = _.without(modulesVal, modulesVal[key]);
			}
		});
		$(':hidden[name="modules"]').val(modulesVal);
		$(t).parent().parent().remove();
	}
};
</script>
</html>