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

<link rel="stylesheet" href="__PUBLIC__/plugs/tagsinput/bootstrap-tagsinput.css">
<script src="__PUBLIC__/plugs/tagsinput/bootstrap-tagsinput.js"></script>

<link rel="stylesheet" type="text/css" href="__PUBLIC__/plugs/webuploader/webuploader.css">
<!-- 配置文件 -->
<script type="text/javascript" src="__PUBLIC__/plugs/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__PUBLIC__/plugs/ueditor/ueditor.all.min.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>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/plugs/board/board.min.css">
<!-- datepicker end -->
<style>
    select, input {
        margin-bottom: 0 !important;
    }
    #keyvalue {
        height: auto;
    }
    .template-msg-title {
        font-size: 14px;
        color: black;
        font-weight: bold;
    }
    .template-msg-editor {
        padding: 10px;
        background: white;
    }
</style>

{/block}
{block name="body"}
<div class="main-box clearfix">
	<header class="main-box-header clearfix">
		<div class="pull-left">
			<h2>{$meta_title}</h2>
		</div>
	</header>
	<div class="main-box-body clearfix">
	<form class="form-horizontal" id="main-form" style="margin-top:20px">
    <div class="form-group">
        <label class="col-sm-3 control-label no-padding-right" for="seller_name">任务名称</label>
        <div class="col-sm-9">
            <input type="text" name="name" id="name" class="form-control"
                   data-val="true"
                   data-val-required="请输入任务名称"
                   data-bind="value: name" value="{$info.name|default=''}"/>
            <div class="col-xs-10 no-padding-left" data-valmsg-for="name" data-valmsg-replace="true"></div>
        </div>
    </div>

    <div class="form-group">

        <label class="col-lg-3 control-label no-padding-right">选择模板</label>
		<div class="col-lg-9 col-sm-9">
			{empty name="msg"}
			
			<div class="alert alert-info">
				对不起，您还没有模板，请先到公众号后台申请。
			</div>
			{else /}
				
                <select name="template_id" id="TemplateId"  class="form-control" style="width:auto;">
					<option data-content="" value="" >未选择</option>
					{volist name="msg" id="vo"}
							<option data-content="{$vo.content}" data-example="{$vo.example}" value="{$vo.template_id}">{$vo.title}</option>
					{/volist}
                </select>
			{/empty}
                <input type="hidden" id="TemplateName" name="template_name" />
                <input id="TaskValue" type="hidden" name="template_value" class="span12" />
				<input type="hidden" id="Templateexample" name="template_example" />

            <div class="col-xs-10 no-padding-left" data-valmsg-for="template_id" data-valmsg-replace="true"></div>
        </div>
    </div>

	<div class="form-group">
        <label class="col-lg-3 control-label no-padding-right">模板示例</label>
		<div class="col-lg-9 col-sm-9">
			<span id="Texample"></span>
        </div>
    </div>
	<div class="form-group">
        <label class="col-lg-3 control-label no-padding-right">模板</label>
        <div class="col-lg-9 col-sm-9">

        </div>
    </div>
    <div class="form-group" id="show_template_editor" style="display: none;">
        <div class="col-sm-9 col-sm-offset-3">
            <div style="background:#eee; padding:10px">
                <div id="template-msg-editor" class="template-msg-editor">
                    <div class="template-msg-title"></div>
                    <div class="template-msg-main">
					
					</div>
                </div>

            </div>
        </div>
    </div>
	<div class="form-group">
		<label class="col-lg-3 control-label">原文链接</label>
		<div class="col-lg-9 col-sm-10">
			<select class="form-control" name="url" id="group" style="width:auto;">
				<option value="">未选择</option>
				{volist name="turl" id="vo"}
						<option value="{$vo.id|get_agent=###,$vo['uid']}">{$vo.title}&nbsp;&nbsp;&nbsp;&nbsp;{$vo.id|get_agent=###,$vo['uid']}</option>
				{/volist}
			</select>
			<div class="help-block">仅限您漫画网站内部的链接</div>
		</div>
	</div>
	 <hr/>
	
	<div class="form-group">
        <label class="col-sm-3 control-label no-padding-right">接收粉丝</label>
        <div class="col-sm-9">
			<div class="radio radio-nice radio-inline">
				<input type="radio" name="andience" id="andience-1" value="0" checked="checked"/>
				<label for="andience-1">全部粉丝</label>
			</div>
			<div class="radio radio-nice radio-inline">
				<input type="radio" name="andience" id="andience-2" value="2" />
				<label for="andience-2">按分类选择</label>
			</div>
			<div style="display: none; background: #edeeed; padding: 1rem 0 2rem; margin-top: 1rem;" id="checkbox_andience">
                <div class="control-group">
                    <label class="col-sm-2 bolder control-label no-padding-right">性别:</label>
					<div class="radio radio-nice radio-inline">
						<input type="radio" name="gender" id="gender-0" value="0" checked="checked"/>
						<label for="gender-0">不限</label>
					</div>

					<div class="radio radio-nice radio-inline">
						<input type="radio" name="gender" id="gender-1" value="1"/>
						<label for="gender-1">男</label>
					</div>

					<div class="radio radio-nice radio-inline">
						<input type="radio" name="gender" id="gender-2" value="2"/>
						<label for="gender-2">女</label>
					</div>
                </div>
                <div class="control-group">
                    <label class="col-sm-2 bolder control-label no-padding-right">充值情况:</label>

					<div class="radio radio-nice radio-inline">
						<input type="radio" name="paid" id="paid-none" value="0" checked="checked"/>
						<label for="paid-none">不限</label>
					</div>

					<div class="radio radio-nice radio-inline">
						<input type="radio" name="paid" id="paid-2" value="2" />
						<label for="paid-2">未充值粉丝</label>
					</div>

					<div class="radio radio-nice radio-inline">
						<input type="radio" name="paid" id="paid-1" value="1" />
						<label for="paid-1">已充值粉丝</label>
					</div>
                </div>
                <div class="control-group">
                    <label class="col-sm-2 bolder control-label no-padding-right">剩余书币:</label>

					<div class="radio radio-nice radio-inline">
						<input type="radio" name="welth" id="welth-none" value="0" checked="checked"/>
						<label for="welth-none">不限</label>
					</div>

					<div class="radio radio-nice radio-inline">
						<input type="radio" name="welth" id="welth-500" value="500" />
						<label for="welth-500">0-500</label>
					</div>

					<div class="radio radio-nice radio-inline">
						<input type="radio" name="welth" id="welth-2000" value="2000" />
						<label for="welth-2000">500-2000</label>
					</div>

					<div class="radio radio-nice radio-inline">
						<input type="radio" name="welth" id="welth-5000" value="5000" />
						<label for="welth-5000">2000-5000</label>
					</div>

                   
                </div>
                <div class="control-group">
                    <label class="col-sm-2 bolder control-label no-padding-right">关注时间:</label>

					<div class="radio radio-nice radio-inline">
						<input type="radio" name="subscribe_time" id="subscribe_time-none" value="0" checked="checked"/>
						<label for="subscribe_time-none">不限</label>
					</div>

					<div class="radio radio-nice radio-inline">
						<input type="radio" name="subscribe_time" id="subscribe_time-7" value="7" />
						<label for="subscribe_time-7">一周内</label>
					</div>

					<div class="radio radio-nice radio-inline">
						<input type="radio" name="subscribe_time" id="subscribe_time-15" value="15" />
						<label for="subscribe_time-15">半个月内</label>
					</div>

					<div class="radio radio-nice radio-inline">
						<input type="radio" name="subscribe_time" id="subscribe_time-30" value="30" />
						<label for="subscribe_time-30">一个月内</label>
					</div>

					<div class="radio radio-nice radio-inline">
						<input type="radio" name="subscribe_time" id="subscribe_time-90" value="90" />
						<label for="subscribe_time-90">三个月内</label>
					</div>

					<div class="radio radio-nice radio-inline">
						<input type="radio" name="subscribe_time" id="subscribe_time-early" value="99" />
						<label for="subscribe_time-early">更早</label>
					</div>
                </div>
            </div>
		</div>
	</div>      
	

    <hr/>
	<div class="form-group">
		<label class="col-lg-3 control-label">发送时间</label>
		<div class="col-lg-9 col-sm-9">
				<div class="input-group">
					<input type="text" class="form-control" id="create_time" name="scheduled_at" value="" readonly size="15">
					<span class="input-group-addon"><i class="fa fa-th"></i></span>
				</div>
				
				<div class="help-block"></div>
		</div>
	</div>
		<script>
		$('#create_time').fdatepicker({
			format: 'yyyy-mm-dd hh:ii',
			pickTime: true
		});
		</script>	
    <hr/>
        <div class="form-group">
        <label class="col-sm-3 control-label no-padding-right" for="seller_name">测试粉丝</label>
        <div class="col-sm-9">
            <input type="text" name="test_member_id" class="col-sm-5 form-control" style="width:auto;float:left" value="{$info.test_member_id|default=''}"/>
            <span id="testBtn" class="btn btn-primary" style="float:left">测试发送</span><br />用测试粉丝帐号点公众号菜单 "粉丝导航" > "个人中心"。<a href="javascript:;" class="showExample">查看示例</a>
        </div>
    </div>

    <div class="clearfix form-actions">
        <div class="col-md-offset-3 col-md-9">
            <button class="btn btn-success submit-btn ajax-post" type="submit" target-form="form-horizontal">确 定</button>
			<button class="btn btn-danger btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>

        </div>
    </div>
	</form>
	</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal">×</button>
                <h4 class="modal-title">配置模板消息</h4>
            </div>
            <div class="modal-body">
                <form>
                    <input type="hidden" name="did" />
					<div class="form-group" >
						<label class="col-lg-2 control-label" for="keyvalue">值</label>
						<div class="col-lg-10 col-sm-10">
							<input class="form-control" type="text" name="keyvalue" id="keyvalue" style="width:auto;"/>
						</div>
					</div>
					<div  style="height:40px">
						
					</div>
					<div class="form-group">
						<label class="col-lg-2 control-label" for="" >颜色</label>
						<div class="col-lg-10 col-sm-10">
							<select class="form-control" name="color" id="color" data-bind="value: color" style="width:auto;">
								<option value="#0000ff">蓝</option>
								<option value="#000000">黑</option>
								<option value="#ff0000">红</option>
								<option value="#ff1493">粉</option>
								<option value="#9370db">紫</option>
							</select>
						</div>
					</div>

					<div class="control-group">
					<label class="control-label" for=""></label>
					<div class="controls">
						可使用 {nickname} 占位符, 发送时会被替换成用户昵称<br /><br />
						可使用 {coinnum} 占位符, 发送时会被替换成书币数量<br/><br />
						可使用 {time} 占位符, 发送时会被替换成当前时间<br/>
					</div>
            </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="okEditBtn">提交</button>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript" src="__PUBLIC__/plugs/webuploader/webuploader.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/plugs/webuploader/webuploader.custom.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/droppable.js"></script>
<script type="text/javascript" src="__PUBLIC__/plugs/board/board.min.js"></script>


<!------webui-popover------->
<script src="__PUBLIC__/plugs/webui-popover/2.1.15/jquery.webui-popover.min.js"></script>
<link rel="stylesheet" href="__PUBLIC__/plugs/webui-popover/2.1.15/jquery.webui-popover.min.css">
<script>
    $(function () {
        $('#relyMenu > a').trigger('click');
        $('#templateMsgMenu').addClass("active");
		$('#TemplateId').val();
		
		
        $('.showExample').webuiPopover({
            html: true,
            trigger: 'hover',
            placement: 'top',
            content: function() {
                return '<div style="width:240px;min-height:430px"><img style="max-width:100%" src="/uploads/guide-user-center.jpg" /></div>';
            }
        });
		/***
		$('body').off('change', 'select[name=andience]').on('change', 'select[name=type]', function () {
            var value = $(this).val();
			console.log(value);
		});
		****/
		$("input[name='andience']").click(function () {
			if($(this).val()==2)
			{
				$('#checkbox_andience').show();
			}else{
				$('#checkbox_andience').hide();
			}
		})
		
    });
    $("#TemplateId").change(function () {
        var selectObj = this.options[this.options.selectedIndex];
        var text = selectObj.text;
        var content = selectObj.getAttribute("data-content");
		var example = selectObj.getAttribute("data-example");
        $("#TemplateName").val(text);
        $(".template-msg-title").html(text);
		$("#Templateexample").val(example);
		$("#Texample").html(example.replace(/\n/g,"<br>"));
        var cons = content.split('\n');
        var res = "<br/>";
        for (var i in cons) {
            if (cons[i].trim() == '') continue;
            res += getRow(cons[i]);
        }
		$('#show_template_editor').show();
        $(".template-msg-main").html(res);
    });
    function getRow(data) {
        var par = /\{{1,2}(\w+)\.DATA\}{1,2}/g;
        var res;
        var str = data;
        while (res = par.exec(data)) {
            //console.log(res[0]+"---->"+res[1])
            var ss = '<span class="template-msg-field" data-value="" data-color="" data-key="' + res[1] + '">' +
                '<span class="template-msg-field-value"></span> ' +
                '<i onclick="showEdit(\'' + res[1] + '\')" title="点击修改" class="fa fa-edit"></i>' +
            '</span> ';
            str = str.replace(res[0], ss);
        }
        return str + "</br>";
    }

    var curKey = "";
    function showEdit(key) {
        curKey = key;
        $("#myModal").modal("show");
    }

    $("#okEditBtn").click(function() {
        var titleSpan = $(".template-msg-field[data-key=" + curKey + "] .template-msg-field-value");
        titleSpan.css("color",$("#color").val());
        titleSpan.html($("#keyvalue").val());
        titleSpan.parent().attr('data-color', $("#color").val());
        titleSpan.parent().attr('data-value', $("#keyvalue").val());
        $("#myModal").modal("hide");
        var isCom = true;
        var str = "{";
        $(".template-msg-field").each(function () {
            var keyvalue = $(this).attr("data-value");
            var color = $(this).attr("data-color");
            if (keyvalue == '') isCom = false;
            str += '"' + $(this).attr("data-key") + '":{';
            str += '"value":"' + keyvalue + '",';
            str += '"color":"' + color + '"},';
        });
        str = str.substring(0,str.length-1);
        str += '}';
        $("#keyvalue").val("");
        if (!isCom) return;
        $("#TaskValue").val(str);
    });
    $("#testBtn").click(function () {
        var postData = $("#main-form").serialize();
        $.post("{:url('template/testsend')}", postData,function(d) {
            if (d.code == 0) {
				updateAlert("发送成功", 'success');
            }else if (d.code == 1099) {
				updateAlert("该粉丝不属于你", 'error');
            }else if (d.code == 1018) {
				updateAlert("请填写完整再测试", 'error');
            }else{
				updateAlert(d.errmsg, 'error');
			}
        },"json");
    });
</script>

</div>


{/block}