<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>私塾家</title>
<script th:include="sys/common/metaCSS" th:remove="tag"></script> 
<script th:include="sys/common/metaJS" th:remove="tag"></script> 
<script src="sys/js/My97DatePicker/WdatePicker.js" th:src="@{/static/sys/js/My97DatePicker/WdatePicker.js}"></script>
</head>
<style>
	.tablelink{margin-right:10px;}
	.stylecss{
	      color: red;
	}
	.select_width{
	     width: 70px;
	}
	.date_width{
	     width: 100px;
	}
	.li-input-list {
	    position: absolute;
        top: 36px;
	    left: 110px;
	    width: 520px;
	    background: #FFFFFF;
	    -webkit-box-shadow: 0 0 6px 0 rgba(66,66,66,0.10);
	    box-shadow: 0 0 6px 0 rgba(66,66,66,0.10);
	}
	.li-input-li {
    padding: 10px;
    cursor: pointer;
}
	.li-input-li img{
   vertical-align: middle;
}


    
</style>
<body>
<div class="place">
	<span>位置：</span>
	<ul class="placeul">
		<li><a href="#">微信管理</a></li>
		<li><a href="#">微信活动模板推送</a></li>
	</ul>
</div>
<div class="rightinfo">
	<ul class="seachform">
		<li >
			<label style="width: 100px">模板短ID:</label>
			<input name="wxId" id="wxId" type="text" class="scinput" style="    width: 520px;" placeholder="输入模板短ID" />
		</li>
	</ul>
	<ul class="seachform">
		<li >
			<label  style="width: 100px">跳转URL:</label>
			<input name="clickUrl" id="clickUrl" type="text" class="scinput" style="  width: 520px;" placeholder="输入跳转URL"  />
		</li>
	</ul>
	<ul class="seachform">
		<li class="page">
			<label  style="width: 100px">推送参数:</label>
			<input placeholder="参数1"  name="name"  type="text" class="scinput name" /> &nbsp;: &nbsp;<input name="val" style="width: 353px;" placeholder="参数值1" type="text" class="scinput val" />
		</li>
	</ul>
	<ul class="seachform">
		<li class="page">
			<label  style="width: 100px">&nbsp;</label>
			<input placeholder="参数2"  name="name"  type="text" class="scinput name" /> &nbsp;: &nbsp;<input name="val"  style="width: 353px;" placeholder="参数值2" type="text" class="scinput val" />
		</li>
	</ul>
	<ul class="seachform">
		<li class="page">
			<label  style="width: 100px">&nbsp;</label>
		<input  placeholder="参数3"  name="name"  type="text" class="scinput name" /> &nbsp;: &nbsp;<input name="val" style="width: 353px;" placeholder="参数值3" type="text" class="scinput val" />
		</li>
	</ul>
	<ul class="seachform">
		<li class="page">
			<label  style="width: 100px">&nbsp;</label>
			<input placeholder="参数4" name="name"  type="text" class="scinput name" /> &nbsp;: &nbsp;<input name="val" style="width: 353px;" placeholder="参数值4" type="text" class="scinput val" />
		</li>
	</ul>
	<ul class="seachform">
		<li >
			<label  style="width: 100px">&nbsp;</label>
			<input placeholder="参数5" name="name"  type="text" class="scinput name" /> &nbsp;: &nbsp;<input placeholder="参数值5" style="width: 353px;" name="val" type="text" class="scinput val" />
		</li>
	</ul>
	<ul class="seachform" style="position: relative;float: left;width: 100%;margin-right: 4rem;z-index: 99;">
		<li >
			<label  style="width: 100px">群发人员：</label>
		    <input name="addUserInput" id="addUserInput" placeholder="输入筛选人员的微信昵称,重复人员只会推送一次" type="text" class="scinput" style="width: 520px;" />
		    <div class="li-input-list" id="userlists">
										
			</div>
		</li>
		
	</ul>
	<br/>
	<ul class="seachform" style="position: relative;">
		<li style="margin-right:0px" >
			<label style="width: 100px">已选择群发人员：</label>
		</li>
		<li id="selectuser" style="width: 520px;">
		</li>
	</ul>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<ul class="seachform" style="padding-left: 100px;position: relative; ">
		<li>
			<label>&nbsp;</label>
			<input type="button" id="sendbutton" class="scbtn" value="群发送" />
		</li>
	</ul>

</div>
</body>
<script type="text/javascript">

function sendPush(){
	var desc="确定推送微信消息？";
	parent.layer.confirm(desc, 
			{icon: 4, btn: ['确定','取消']
	}, function(){
		var wxId=$("#wxId").val();
		var jsoText=$("#jsoText").val();
		var clickUrl=$("#clickUrl").val();
		var selectuser=$("#selectuser label");
		var openIds=[];
		for (var i = 0; i < selectuser.length; i++) {
			openIds.push($(selectuser[i]).data("opend"));
		}
		var jsonText=[];
		var page=$(".page");  
		
		for (var i = 0; i < page.length; i++) {
			if($(page[i]).find(".name").val()==''){
				continue;	
			}
			jsonText.push('{"name":"'+$(page[i]).find(".name").val()+'","val":"'+$(page[i]).find(".val").val()+'"}');
		}
		
		$.ajax({
			url: '[[${sysUrl}]]/sys/wx/sendPush',
			type: "post",
			data : {
				'wxId' : wxId,
				'openIds' : openIds.join(';'),
				'jsoText' : "["+jsonText.join(',')+"]",
				'clickUrl' : clickUrl
			},
			dataType: "json",
			success:function(data){
					if(data.meta.success){
						parent.layer.msg("推送成功",{icon:1});
						location.reload();
					}else{
						parent.layer.msg(data.meta.message,{icon:11});
					}
			}
		});
	});
}

$("#sendbutton").on('click',function(){
	sendPush();
});


$("#userlists").on("click",".li-input-li",function (){
		
		var opend=$(this).data('opend');
		var name=$(this).data('name');
		
		$("#userlists").html("");
		$("#selectuser").append('<label style="width: 100px;color:red" data-opend="'+opend+'">'+name+'</label>');
		$("#addUserInput").val('');
})
	


$("#addUserInput").bind("input propertychange",function(){
		if($("#addUserInput").val()==''){
			return ;
		}
	   	 $.ajax({
			 url : "[[${sysUrl}]]/kmtsys/sys/user/get",
	         type : 'post',
	         dataType : 'json',
	         contentType : "application/x-www-form-urlencoded; charset=utf-8",
	         data : {name:$("#addUserInput").val()},
	         success : function(data) {
	        	 if(data && data.code == 999){
	        		 var html=[];
	        		 var vipList=data.data.vipList;	
	        		  for (var i = 0; i < vipList.length; i++) {
	        			html.push('<div class="li-input-li"  data-userid="'+vipList[i].id+'"  data-opend="'+vipList[i].wx_account+'" data-name="'+vipList[i].wx_name+'"><img style="border-radius:100%;width: 30px;height: 30px;margin-bottom: 10px;" src="'+vipList[i].weixin_photo+'" alt="头像"/> - '+vipList[i].wx_name+'  </div>');
	        		  }
	        		 $("#userlists").html(html.join(''));
	        	 }
	         }
		   });
	   
	})



</script>
</html>