{layout name="layout" /}
<style>
.hjf input .file {
    width: 200px;
    float: left;
    height: 80px;
    width: 120px;
}.layui-table img {
    max-width: 100px;
}.laytable-cell-1-3 {
    width: 140px;
    height: 100%;
}
.hjf{width:100%; float:left; clear:both; padding:5px 0; box-sizing:border-box; padding-left:15px;}
.hjf small{width:80px; float:left; padding:6px 0; text-align:right; padding-right:10px;}
.hjf input{width:200px; float:left;}
.new_msg_div {
    overflow: initial;
}
.layui-textarea {
    width: 260px;
    height: 200px;
}
.inputwidth{
	margin-bottom:10px;
    width: 260px;
}
</style>
    <div class="if_wrap">
        <div id="if_con">
        	<div class="cus-con">
                <div class="set-top">
                {$topmenu}
                </div>
                <table class="layui-table" lay-data="{ url:'{:url('vip/weixinconfig/relay');}', page:true, id:'idTest'}" lay-filter="demo">
                    <thead>
                    <tr>
                      	<td lay-data="{width:60,field:'id', sort: true,templet: '#indexTpl'}">序号</td>
                        <td lay-data="{width:140,field:'name'}">口令名称</td>
                        <td lay-data="{width:140,field:'content'}">回复内容</td>          
                        <td lay-data="{width:140,field:'staff_name'}">创建人员</td>        
                        <td lay-data="{width:200,field:'create_time'}">创建日期</td>
 						{if condition='$editrelay || $delrelay'}
                        <td lay-data="{ width: 260, align:'center', toolbar: '#barDemo'}">操作</td>
                        {/if}
                    </tr>
                    </thead>
                </table>
            </div>
            
        </div>
    </div>
<div id="editbox" class="new_msg_div">
 		<form method="post" id="editform" class="layui-form layui-form-pane1">
		    <div class="layui-input-block" style="margin-left:0;">
		    	<input type="hidden" class="layui-input inputwidth" name="id" id="eid" />
		       	<span class="hjf"><small>口令名称</small><input type="text" class="layui-input inputwidth" name="ename" id="ename" /></span>
				<div class="layui-form-item">
	                <label class="layui-form-label">回复内容</label>
	                <div class="layui-input-block">
	                <textarea name="econtent" id="econtent" class="layui-textarea" ></textarea>
	                </div>
	           </div>
		    </div>
 
	    </form>

</div>

<div id="addbox" class="new_msg_div">
	<form  action="" method="post" id="addform" class="layui-form layui-form-pane1">
		<div class="layui-input-block" style="margin-left:0;">
			<div class="layui-form-item">
                <label class="layui-form-label">口令名称</label>
                <div class="layui-input-block">
                    <input type="text"  name="aname" id="aname" class="layui-input inputwidth"   placeholder="请输入口令" autocomplete="off" class="layui-input">
                </div>
            </div>
			<div class="layui-form-item">
                <label class="layui-form-label">回复内容</label>
                <div class="layui-input-block">
                <textarea name="acontent" class="layui-textarea" id="acontent" placeholder="请输入口令回复内容" ></textarea>
                </div>
	        </div>
		</div>
 
	</form>
</div>
<script>document.getElementById('time').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());setInterval("document.getElementById('time').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);</script>
<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<script type="text/html" id="barDemo">	
{notempty name="$editrelay"}
	<a class="ex_start edit" lay-event="edit" data-data="{{d.id}},{{d.name}},{{d.content}}" >修改</a>
{/notempty}
{notempty name="$delrelay"}	
	<a class="ex_view" lay-event="del" data-id="{{d.id}}">删除</a>
{/notempty}
</script>
<script type="text/html" id="imgModel">
	<img src="__PUBLIC__/uploads/{{d.img}}" width="100%"/>
</script>
<script type="text/html" id="nametpl">
	{{test.replace('',)+d.name}}
	<img src="__PUBLIC__/uploads/{{d.img}}" width="100%"/>
</script>
<script>
	layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
		var laydate = layui.laydate //日期
				,laypage = layui.laypage //分页
		layer = layui.layer //弹层
				,table = layui.table //表格
				,carousel = layui.carousel //轮播
				,upload = layui.upload //上传
				,element = layui.element; //元素操作
		//监听工具条
		table.on('tool(demo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			var data = obj.data //获得当前行数据
					, layEvent = obj.event; //获得 lay-event 对应的值
			if (layEvent === 'del') {
				var id = $(this).attr("data-id");
				layer.confirm('你确定要删除这个回复信息？', function (index) {
					obj.del(); //删除对应行（tr）的DOM结构
					layer.close(index);
					//向服务端发送删除指令
					if(id){
						$.ajax({
							url:"{:url('vip/weixinconfig/delrelay');}",
							data:{id:id},
							type:'post',
							success:function(e){
								if(e.status==1){
									  layer.open({
									        content: '恭喜删除成功！',
									        btn: ['确认'],
									        yes: function(index, layero) {
									          window.location.href="{:url('vip/weixinconfig/relay')}";
									        }
									      });
								}else{
                    				layer.msg('删除失败',{
                    				    icon: 2,
                    				});
								}
							}
						})
					}
				});
			}else if(layEvent === 'edit'){
				var datastr = $(this).attr("data-data");
				var dataarr = datastr.split(',');
			 	$("#eid").val(dataarr[0]);
				$("#ename").val(dataarr[1]);
				$("#econtent").val(dataarr[2]);
			    layer.open({
			        title:'修改自动回复消息',
			        type: 1,
			        skin: 'layui-layer-rim',
			        area:  ['450px', '400px'],
			        content: $('#editbox'),
			        btn:['提交修改','取消'],
			        yes:function(index){
			        	var id    = $.trim($("#eid").val());
			        	var name  = $.trim($("#ename").val());
			        	var content = $.trim($("#econtent").val());
					    console.log(content);
			        	if(!name){
	        				layer.msg('请填写口令名称', {
	        				    icon: 2,
	        				});
	        				return false;
			        	}
			        	if(!content){
	        				layer.msg('请填写口令回复内容', {
	        				    icon: 2,
	        				});
	        				return false;
			        	}
			        	
			        	if(id && name){
			        		var formid = document.getElementById("editform");
							var sformData = new FormData(formid);
							$.ajax({
							  type:'post',
							  url:"{:url('vip/weixinconfig/editrelay')}",
							  data:sformData,
							  processData: false,  // 不处理数据
							  contentType:false,
							  success:function(s){
							    if(s.status==1){
							      layer.open({
							        content: '恭喜修改成功！',
							        btn: ['确认'],
							        yes: function(index, layero) {
							          window.location.href="{:url('vip/weixinconfig/relay')}";
							        }
							      });
							    }else{
							      layer.msg(s.msg, {
							        icon: 2
							      });
							    }
							  }});
							return false;
			        	}else{
			        		msg = id?'请填写类型名称':'无法修改这条数据';
			        		layer.msg(msg, {
			        		    icon: 2,
			        		});
			        	}
			        }
			     			        
				});
			}
		});
		laypage.render({
			elem: 'pageDemo' //分页容器的id
			,count: 100 //总页数
			,limits: [2,10,20,30]
			,skin: '#1E9FFF' //自定义选中色值
			//,skip: true //开启跳页
			,jump: function(obj, first){
				if(!first){
					layer.msg('第'+ obj.curr +'页');
				}
			}
		});
		
})

layui.use('form', function(){ 
	var form = layui.form;
	// 新添加类型
	$("#addmsgbtn").on('click',function(){
		 
	    layer.open({
	        title:'添加自动回复消息',
	        type: 1,
	        skin: 'layui-layer-rim',
	        area:  ['450px', '400px'],
	        content: $('#addbox'),
	        btn:['立即添加','取消'],
	        yes:function(index){
	        	var title   = $.trim($("#aname").val());
	        	var content = $.trim($("#acontent").val());
	        	if(!content){
    				layer.msg('请填写口令回复内容', {
    				    icon: 2,
    				});
    				return false;
	        	}
	        	if(title){
	        		var formid = document.getElementById("addform");
					var sformData = new FormData(formid);
					$.ajax({
					  type:'post',
					  url:"{:url('vip/weixinconfig/addrelay')}",
					  data:sformData,
					  processData: false,  // 不处理数据
					  contentType:false,
					  success:function(s){
					    if(s.status==1){
					      layer.open({
					        content: '恭喜您添加成功！',
					        btn: ['确认'],
					        yes: function(index, layero) {
					          window.location.href="{:url('vip/weixinconfig/relay')}";
					        }
					      });
					    }else{
					      layer.msg(s.msg, {
					        icon: 2
					      });
					    }
					  }});
				 
	        	}else{
	        		$("#aname").focus()
	        		layer.msg('请填写正确的名称', {
	        		    icon: 2,
	        		});
	        	}

	        }
		});
	})
	
}); 
	

function isInt(a){
	var pattern = /^[0-9]*$/;
    return pattern.test(a)?true:false;
}
 
//图片显示
$("#imginput,#editimginput").on('change',function(){
  var box = $(this).attr('id')=='editimginput'?'editimgbox':'imgbox';
  imgView(this,box);
  //$("#imgbox").removeClass("display");
});

// 图片显示处理函数
function imgView(filedom,box){
	console.log(filedom);
	// 判断是否支持fileReader
	if(window.FileReader){
		var reader = new FileReader();
		// 获取文件
		var file = filedom.files[0];
		var imagetype = /^image\//;
		// 判断是否是图片
		console.log(file);
		console.log(file.type); 
		if(!imagetype.test(file.type)){
			layer.msg('请上传正确图片类型文件', {
			    icon: 2,
			});
			return;
		}
		// 读取完成
		reader.onload = function(e){
			// 获取图片dom
			var img = document.getElementById(box);
			// 图片路径设置为读取的图片
			img.src = e.target.result;
		};
		reader.readAsDataURL(file);
	}	
} 

</script>	
</body>
</html>