{extend name="public/base" /}
{block name="body"}
<style>
.clinhei{width:100%;height:25px;}	
.inp{width:200px;}
.inpdiv{width:25%;}
.inpdivbut{width:10%;float:left;}
.so{width:80px;height:34px;border:0;margin-top:25px;text-align:center;line-height:34px;cursor: pointer;}
.tdinp{width:100%;border:0;}
.up{border:0;cursor: pointer;}
.mod{position: fixed;top: 20%;right:20%;width: 350px;}
.xxx{width:50px;height:30px;line-height:30px;color:#fff;text-align:center;cursor: pointer;border-radius:3px;margin-top:10px;float: right;margin-bottom:10px;}
</style>

<div class="main-box clearfix">
	<header class="main-box-header clearfix">
		<div class="pull-left">
			<h2>模板消息</h2>
		</div>
		
	</header>
	<div class="main-box-body clearfix">

		    <div class="container">
              <form  id="forms" enctype="multipart/form-data">

                <div class="inpdiv" style="width:200px;">
					<label for="name" style="color: #e84e40;">测试ID 用于测试推送</label>
                    <input type="text" class="form-control inp" id="cid">
                </div>

                <div class="inpdiv" style="width:200px;margin-top: 20px;">
					<label for="name" style="color: #e84e40;">标题</label>
                    <input type="text" class="form-control inp" id="title" value="{$d.title}">
                </div>

                <div class="inpdiv" style="width:200px;margin-top: 20px;">
					<label for="name" style="color: #e84e40;">预约内容</label>
                    <input type="text" class="form-control inp" id="keyword1" value="{$d.content}">
                    <input type="hidden" id="colorkeyword1">
                    <div class="xxx" id="color2">颜色</div>
                </div>

                <div class="input-group" style="width:200px;margin-top: 20px;">
					<input type="text" class="form-control inp" name="keyword2" id="keyword2"  placeholder="预约时间" value="{$d.time}">
                    <span class="input-group-addon"><i class="fa fa-th"></i></span>
                </div>
                
                <div class="inpdiv" style="width:200px;margin-top: 20px;">
					<label for="name" style="color: #e84e40;">外链地址</label>
                    <input type="text" class="form-control inp" id="link" value="{$d.link}">
                </div>

                <div class="inpdiv" style="width:200px;margin-top: 20px;margin-bottom:20px;">
					<label for="name" style="color: #e84e40;">备注</label>
                    <input type="text" class="form-control inp" id="remark" value="{$d.remark}">
                    <input type="hidden" id="colorremark">
                    <div class="xxx" id="color3">颜色</div>
                </div>

                <div class="inpdivbut">
                    <div class="btn-danger so" onclick="push()">开始推送</div>
                    <div class="btn-danger so" onclick="sb()">保存素材</div>
                </div>
            </form>
			</div>	
            <div class="clinhei"></div>
            <a href="{:url('wxpushall/templatehistory',array('id'=>$wxid))}" class="btn btn-success">推送记录</a>
            <a href="javascript:history.back(-1)" class="btn btn-success">返回</a>

            <img src="/public/images/mob.jpg" alt="" class="mod">
	</div>

	
</div>
{/block}
{block name="script"}
<script src="/public/js/colorpicker.js"></script>
<!-- datepicker statr -->
<link href="/public/plugs/datepicker/css/foundation-datepicker.min.css" rel="stylesheet" type="text/css">
<script src="/public/plugs/datepicker/js/foundation-datepicker.js"></script>
<script src="/public/plugs/datepicker/js/foundation-datepicker.zh-CN.js"></script>
<script>
// 颜色选择器
var a = Colorpicker.create({
	el: "color2",
	color: "#000",
	change: function (elem, hex) {
        $('#colorkeyword1').val(hex)
        $('#keyword1').css('color',hex)
		elem.style.backgroundColor = hex;
	}
});
var a = Colorpicker.create({
	el: "color3",
	color: "#000",
	change: function (elem, hex) {
        $('#colorremark').val(hex)
        $('#remark').css('color',hex)
		elem.style.backgroundColor = hex;
	}
});
// 时间选择器
$('#keyword2').fdatepicker({
    clearBtn: true,
    todayBtn: true,
	format: 'yyyy-mm-dd h:i',
	pickTime: true
});

// 推送
function push(){
    var cid = $('#cid').val();
    var wxid = "{$wxid}";
    var title = $('#title').val();
    var keyword1 = $('#keyword1').val();
    var keyword2 = $('#keyword2').val();
    var link = $('#link').val();
    var remark = $('#remark').val();
    var colortitle = $('#colortitle').val();
    var colorkeyword1 = $('#colorkeyword1').val();
    var colorremark = $('#colorremark').val();
    if(title==''){
        swal('错误','标题错误', {icon : "error",buttons:{confirm:{className : 'btn btn-danger'}},});
    }else if(keyword1==''){
        swal('错误','内容错误', {icon : "error",buttons:{confirm:{className : 'btn btn-danger'}},});
    }else if(link==''){
        swal('错误','链接错误', {icon : "error",buttons:{confirm:{className : 'btn btn-danger'}},});
    }else if(remark==''){
        swal('错误','请写备注', {icon : "error",buttons:{confirm:{className : 'btn btn-danger'}},});
    }else{
        if(cid==''){
            // 群发推送
            swal({
                    title: '确定推送模板消息?',
                    text: "",
                    type: 'warning',
                    buttons:{
                        confirm: {
                            text : '确认',
                            className : 'btn btn-success'
                        },
                        cancel: {
                            text : '关闭',
                            visible: true,
                            className: 'btn btn-danger'
                        }
                    }
                }).then((Delete) => {
                    if (Delete) {
                            // 群发
                            $.ajax({  
                                type: "POST",   
                                url:"{:url('Wxpushall/templatePush')}", 
                                data: {wxid:wxid,title:title,keyword1:keyword1,keyword2:keyword2,link:link,remark:remark,colortitle:colortitle,colorkeyword1:colorkeyword1,colorremark:colorremark},
                                dataType:"json",			  
                                success: function(data) {  
                                    if(data.status==1){
                                        swal('成功',data.reg, {icon : "success",buttons:{confirm:{className : 'btn btn-success'}},});
                                    }else{
                                        swal('错误',data.reg, {icon : "error",buttons:{confirm:{className : 'btn btn-danger'}},});
                                    }  
                                }  
                            });
                    } else {   
                        swal.close();
                    }
                });
            }else{
                // 单个测试推送
                $.ajax({  
                    type: "POST",   
                    url:"{:url('Wxpushall/templateOne')}", 
                    data: {cid:cid,wxid:wxid,title:title,keyword1:keyword1,keyword2:keyword2,link:link,remark:remark,colortitle:colortitle,colorkeyword1:colorkeyword1,colorremark:colorremark},
                    dataType:"json",			  
                    success: function(data) {  
                        if(data.status==1){
                            swal('成功',data.reg, {icon : "success",buttons:{confirm:{className : 'btn btn-success'}},});
                        }else{
                            swal('错误',data.reg, {icon : "error",buttons:{confirm:{className : 'btn btn-danger'}},});
                        }  
                        
                    }  
                });
            }
    }

}

// 保存素材
function sb(){
    var title = $('#title').val();
    var content = $('#keyword1').val();
    var time = $('#keyword2').val();
    var link = $('#link').val();
    var remark = $('#remark').val();
    $.ajax({  
        type: "POST",   
        url:"{:url('Wxpushall/saveTemplate')}", 
        data: {title:title,content:content,time:time,link:link,remark:remark},
        dataType:"json",			  
        success: function(data) {  
            if(data.status==1){
                swal('保存成功',data.reg, {icon : "success",buttons:{confirm:{className : 'btn btn-success'}},});
            }else{
                swal('错误',data.reg, {icon : "error",buttons:{confirm:{className : 'btn btn-danger'}},});
            }  
            
        }  
    });
}


</script>
{/block}