<%@page trimDirectiveWhitespaces="true"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="gen" uri="http://help.jspgen.com/taglib/jstl"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
<title>微信公众号</title>
<!-- 当前页面 -->
<link type="text/css" href="${config.statie}ui/admin/images/admin.css" rel="stylesheet">
<style type="text/css">
.colorChoose{width:13px;height:13px;vertical-align:middle;display:inline-block;background-image:url(${config.statie}ui/cms/admin/images/color-ico.gif);}
.general{width:400px;height:20px;max-width:500px;max-height:100px;}
</style>
</head>
<body>
<div id="wrapper">
  <div class="area">
    <h2><i><gen:if test='${empty param.id}'>添加<gen:else />编辑</gen:if>群发信息</i></h2>
    <div class="area-content">
      <table width="100%" border="0" cellspacing="0" cellpadding="0" class="table">
        <tr class="ignore">
          <td width="30%" align="center" valign="top" bgcolor="#FBFBFB" class="border-right"><table width="80%" border="0" cellpadding="0" style="margin:30px 10px;">
              <tr>
                <td bgcolor="#FFFFFF" style="padding:10px;border-radius:10px;font-size:14px;"><h3>【模板内容】</h3>${gen:nrbr(wechatTemp.content)}<br /><br />
                <h3>【模板示例】</h3>${gen:nrbr(wechatTemp.example)}</td>
              </tr>
            </table></td>
          <td width="70%" align="left" valign="top">
          	<form id="form" name="form" method="post" action="<gen:if test='${empty param.id}'>wechat_send!save.gen<gen:else />wechat_send!update.gen</gen:if>">
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="15%" align="right">说明：</td>
                  <td class="orange">内容中输入 {{nickname}} 标识，可显示粉丝昵称</td>
                </tr>
                <tr class="border-top">
                  <td align="right">标题：</td>
                  <td>${wechatSend.title}</td>
                </tr>
                <c:forEach items="${wechatSend.dataMap}" var="map">
                <tr class="border-top">
                  <td align="right" valign="middle"><span class="red">*</span>&nbsp;${map.key}：</td>
                  <td><table border="0" cellspacing="0" cellpadding="0">
                      <tr class="ignore">
                        <td width="60%"><textarea id="${map.key}_value" name="${map.key}_value" class="text small general">${map.value['value']}</textarea></td>
                        <td width="20px">&nbsp;<a href="javascript:void(0);" to="${map.key}_color" class="colorChoose" title="颜色" style="background-color:${map.value['color']};"><input name="${map.key}_color" type="hidden" value="${map.value['color']}" />
                          </a></td>
                          <td align="left">&nbsp;<label for="${map.key}_value" generated="true" class="tip normal"></label></td>
                      </tr>
                    </table></td>
                </tr>
                </c:forEach>
                <tr class="border-top">
                  <td align="right">链接地址：</td>
                  <td><input name="url" type="text" class="text small" value="${wechatSend.url}" size="80" /></td>
                </tr>
                <tr class="border-top">
                  <td align="right">信息状态：</td>
                  <td><label><input name="status" type="radio" value="0" ${empty wechatSend.status || wechatSend.status=='0'?'checked':''}/> 待发</label>
                    &nbsp;&nbsp;
                    <label><input name="status" type="radio" value="1" ${wechatSend.status=='1'?'checked':''}/> 发布</label></td>
                </tr>
                <tr class="border-top">
                  <td align="right">接收对象：</td>
                  <td><label><input name="groupid" type="radio" value="" ${empty wechatSend.groupid?'checked':''}/> 所有粉丝（${wechat.fans}）</label></td>
                </tr>
                <tr class="border-top">
                  <td align="right">测试对象：</td>
                  <td><input name="openid" type="text" class="text small" value="${wechat.openid}" size="60" placeholder="请输入Openid" />&nbsp;&nbsp;
                  <a href="javascript:void(0);" class="button green tiny test">测试</a></td>
                </tr>
                <tr class="border-top">
                  <td colspan="2" class="push txt-c"><input type="hidden" name="formHash" value="${formHash}"/>
                    <input type="hidden" name="id" value="${wechatSend.id}" />
                    <input type="hidden" name="appid" value="${wechatSend.appid}" />
                    <input type="hidden" name="tempid" value="${wechatSend.tempid}" />
                    <input type="hidden" name="title" value="${wechatSend.title}" />
                    <input name="submit" class="button blue small" type="submit" value="确 定" />
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <input name="reset" class="button gray small" type="reset" value="取 消" /></td>
                </tr>
              </table>
            </form></td>
        </tr>
      </table>
    </div>
  </div>
</div>
<!-- 必备插件 -->
<script type="text/javascript" src="${config.statie}js/jquery.js"></script>
<script type="text/javascript" src="${config.statie}js/jquery.form.js"></script>
<script type="text/javascript" src="${config.statie}js/jquery.grapes.js"></script>
<script type="text/javascript" src="${config.statie}js/jquery.timers.js"></script>
<script type="text/javascript" src="${config.statie}js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="${config.statie}js/jquery.tablecolor.js"></script>
<!-- 颜色选择器插件 -->
<script type="text/javascript" src="${config.statie}js/colorPicker/jquery.colorPicker.js"></script>
<!-- 弹窗插件 -->
<script type="text/javascript" src="${config.statie}js/dialog/jquery.dialog.js?self=true"></script>
<script type="text/javascript" src="${config.statie}js/dialog/jquery.dialog.plugins.js"></script>
<!-- 表单验证插件 -->
<script type="text/javascript" src="${config.statie}js/validate/jquery.validate.js"></script>
<script type="text/javascript" src="${config.statie}js/validate/validate.expand.js"></script>
<script type="text/javascript" src="${config.statie}js/validate/messages_zh.js"></script>
<!-- UI界面必备 -->
<script type="text/javascript" src="${config.statie}ui/js/jspgen.js"></script>
<script type="text/javascript" src="${config.statie}ui/js/jspgen.ajax.js"></script>
<script type="text/javascript" src="${config.statie}ui/js/jspgen.ready.js"></script>
<!-- 当前页面 -->
<script type="text/javascript">
// document.domain = "jspgen.com";// 调用
$(document).ready(function(){
	// 表单验证
	var $form = $('#form'), $reset = $('input:reset');
	var validate = $form.validate({
		rules: {
			<c:forEach items="${wechatSend.dataMap}" var="map" varStatus="status">
			${map.key}_value:{required:true}${!status.last?',':''}
			</c:forEach>
		},
		messages: {
			<c:forEach items="${wechatSend.dataMap}" var="map" varStatus="status">
			${map.key}_value:{required:'不允许为空'}${!status.last?',':''}
			</c:forEach>
		},
		submitHandler: function(form) {
			$(form).ajaxSubmit($.extend({
				success: function(result) {
					// {'status':false,'message':'message', 'store':{'id':'id'}}
					if (result) {
						if (result.status) {
							$dialog.success(result.message, function() {
								refleshFromTab(); removeTab();
							});
						}else{
							$dialog.error(result.message);
						}
					}
				}
			}, formOptions));
			
			// 阻止表单默认提交
			return false;
		}
	});
	$reset.bind('click', function () {
		validate.resetForm();
	});
	// 颜色选择器
	$('.colorChoose').colorPicker(function(e, color){
		$(e).css('backgroundColor', color);
		$(e).find('input[name="'+$(e).attr('to')+'"]').attr('value', color);
	});
	// 群发测试
	var $aclick = true; // 禁用点击事件标识
	$('a.test').bind('click', function () {
		if(!$aclick) return ; $aclick = false;
		<c:forEach items="${wechatSend.dataMap}" var="map">if(grapes.isEmpty($('textarea[name="${map.key}_value"]').val())){$dialog.alert('请输入 ${map.key} 内容'); return false;}</c:forEach>
		if(grapes.isEmpty($('input[name="openid"]').val())){$dialog.alert('请输入Openid'); return false;}
		$.ajax({
			url: 'wechat_send!test.gen', type:'post', dataType:'json', data:$form.serialize(),
			success: function(result) {
				// {'status':false, 'message':'message'}
				if (result) {
					$aclick = true;
					if (result.status) {
						$dialog.success(result.message);
					}else{
						$dialog.error(result.message);
					}
				}
			}
		});
	});
});
</script>
</body>
</html>