{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;
}
</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/menu');}', page:true,limit:20,limits: [20,30,40], 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:'type',toolbar:'#menu_type'}">菜单类型</td>
                        <td lay-data="{width:140,field:'mpname'}">父菜单名称</td>
                        <td lay-data="{width:220,field:'url'}">连接地址</td>
                        <td lay-data="{width:160,field:'appid'}">小程序appid</td>
                        <td lay-data="{width:180,field:'pagepath'}">小程序页面路径</td>
                        <td lay-data="{width:180,field:'key'}">消息回复关键字</td>
                        <td lay-data="{width:140,field:'staff_name'}">创建人员</td>
                        <td lay-data="{width:200,field:'create_time'}">创建日期</td>
                        {if condition='$menuedit || $menudel'}
                        <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;">
                <span class="hjf"><small>菜单类型：</small>
                    <input type="radio" lay-filter="menu_type" id="view" name="etype" value="view" title="网页" checked>
                    <input type="radio" lay-filter="menu_type" id="miniprogram" name="etype" value="miniprogram" title="小程序">
                    <input type="radio" lay-filter="menu_type" id="click" name="etype" value="click" title="消息回复">
                </span>
            <input type="hidden" class="layui-input" name="id" id="eid" />
            <span class="hjf"><small>名称：</small><input type="text" class="layui-input" name="ename" id="ename" /></span>
            <span class="hjf view"><small>连接地址</small><input type="text" class="layui-input" name="eurl" id="eurl" /></span>
            <span class="hjf xcx" style="display: none;"><small>小程序appid</small><input type="text" class="layui-input" name="appid" id="eappid" /></span>
            <span class="hjf xcx" style="display: none;"><small>小程序页面路径</small><input type="text" class="layui-input" name="pagepath" id="epagepath" /></span>
            <!--<span class="hjf click_msg" style="display: none;"><small>消息关键字</small><input type="text" class="layui-input" name="key" id="ekey" /></span>-->
        </div>

        <div class="layui-form-item click_msg" style="margin-top:15px;display: none;">
            <label class="layui-form-label" >消息关键字</label>
            <div class="layui-input-inline">
                <select name="key" id="ekey">
                    {volist name="keys" id="k"}
                    <option value="{$k.name}">{$k.name}</option>
                    {/volist}
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label" >选择父类</label>
            <div class="layui-input-inline">
                <select name="epid" id="epidselect">
                    <option value="0">顶级菜单</option>
                    {foreach $parentData as $k=>$v }
                    <option value="{$v['id']}">{$v['name']}</option>
                    {/foreach}
                </select>
            </div>
            <div class="layui-form-mid layui-word-aux"></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;">
            <span class="hjf"><small>菜单类型：</small>
                <input type="radio" name="type" lay-filter="menu_type" value="view" title="网页" checked>
                <input type="radio" name="type" lay-filter="menu_type" value="miniprogram" title="小程序">
                <input type="radio" name="type" lay-filter="menu_type" value="click" title="消息回复">
            </span>
            <span class="hjf"><small>菜单名称：</small><input type="text" class="layui-input" name="aname" id="aname" placeholder="请输入菜单名称" maxlength="8"/></span>
            <span class="hjf view"><small>链接地址：</small><input type="text" class="layui-input" name="aurl" id="aurl" placeholder="请输入完整的连接地址" /></span>
            <span class="hjf xcx" style="display: none;"><small>小程序appid</small><input type="text" class="layui-input" name="appid" id="appid" /></span>
            <span class="hjf xcx" style="display: none;"><small>小程序页面路径</small><input type="text" class="layui-input" name="pagepath" id="pagepath" /></span>
            <!--<span class="hjf click_msg" style="display: none;"><small>消息关键字</small><input type="text" class="layui-input" name="key" id="key" /></span>-->

        </div>

        <div class="layui-form-item click_msg" style="margin-top:15px;display: none;">
            <label class="layui-form-label" >消息关键字</label>
            <div class="layui-input-inline">
                <select name="key" id="key">
                    {volist name="keys" id="k"}
                    <option value="{$k.name}">{$k.name}</option>
                    {/volist}
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" >选择父类</label>
            <div class="layui-input-inline">
                <select name="apid" id="apidselect" >
                    <option value="0">顶级菜单</option>
                    {foreach $parentData as $k=>$v}
                    <option value="{$v['id']}">{$v[name]}</option>
                    {/foreach}
                </select>
            </div>
            <div class="layui-form-mid layui-word-aux"></div>
        </div>
    </form>
</div>
<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>

<script type="text/html" id="menu_type">
    {{#  if(d.type == 'view'){ }}
    跳转页面
    {{#  } else if(d.type == 'miniprogram'){ }}
    跳转小程序
    {{#  } else if(d.type == 'click'){ }}
    关键字回复
    {{#  } else{ }}
    跳转页面
    {{#  } }}

</script>

<script type="text/html" id="barDemo">	
{notempty name="$menuedit"}
	<a class="ex_start edit" lay-event="edit" data-data="{{d.id}},{{d.name}},{{d.url}},{{d.parentid}}" >修改</a>
{/notempty}
{notempty name="$menudel"}	
	<a class="ex_view" lay-event="del" data-id="{{d.id}}"data-parentid="{{d.parentid}}">删除</a>
{/notempty}
{notempty name="$menuadd"}	
{{# if(d.parentid==0 && d.subnum<5){ }}
	<a class="ex_view addsubmenubtn" lay-event="add" 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','form','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; //元素操作
	    var form = layui.form;

        form.on('radio(menu_type)', function(data){
            //console.log(data.value); //被点击的radio的value值
            if(data.value == 'view'){
                $('.view').css('display','inline-block');
                $('.xcx').css('display','none');
                $('.click_msg').css('display','none');
            }else if(data.value == 'miniprogram'){
                $('.view').css('display','inline-block');
                $('.xcx').css('display','inline-block');
                $('.click_msg').css('display','none');
            }else if(data.value == 'click'){
                $('.view').css('display','none');
                $('.xcx').css('display','none');
                $('.click_msg').css('display','inline-block');
            }
        });


        //监听工具条
		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");
				var parentid = $(this).attr("data-parentid");
				layer.confirm('你确定要删除这个菜单？此操作同时也会删除它的子类菜单,你确定吗？', function (index) {
					obj.del(); //删除对应行（tr）的DOM结构
					layer.close(index);
					//向服务端发送删除指令
					if(id){
						$.ajax({
							url:"{:url('vip/weixinconfig/delmenu');}",
							data:{id:id,parentid:parentid},
							type:'post',
							success:function(e){
								if(e.status==1){
									  layer.open({
									        content: '恭喜删除成功！',
									        btn: ['确认'],
									        yes: function(index, layero) {
									          window.location.href="{:url('vip/weixinconfig/menu')}";
									        }
									      });
								}else{
                    				layer.msg('删除失败',{
                    				    icon: 2,
                    				});
								}
							}
						})
					}
				});
			}else if(layEvent === 'edit'){
				var datastr = $(this).attr("data-data");
				var dataarr = datastr.split(',');

                //菜单类型选择
                $("#"+data.type).attr("checked","checked");

                if(data.type == 'view'){
                    $('.view').css('display','inline-block');
                    $('.xcx').css('display','none');
                    $('.click_msg').css('display','none');
                }else if(data.type == 'miniprogram'){
                    $('.view').css('display','inline-block');
                    $('.xcx').css('display','inline-block');
                    $('.click_msg').css('display','none');
                    $('#eappid').val(data.appid);
                    $('#epagepath').val(data.pagepath);
                }else if(data.type == 'click'){
                    $('.click_msg').css('display','inline-block');
                    $('.view').css('display','none');
                    $('.xcx').css('display','none');
                    $('#ekey').val(data.key);
                }


                $('#epidselect option[value='+dataarr[0]+']').remove();
			 	$("#eid").val(dataarr[0]);
				$("#ename").val(dataarr[1]);
				$("#eurl").val(dataarr[2]);
				$("#epidselect").val(dataarr[3]); 
				form.render();
			    layer.open({
			        title:'修改微信菜单',
			        type: 1,
			        skin: 'layui-layer-rim',
			        area:  ['450px', '400px'],
			        content: $('#editbox'),
			        btn:['提交修改','取消'],
			        yes:function(index){
                        var type =$("input[name='etype']:checked").val();
			        	var id    = $.trim($("#eid").val());
			        	var name  = $.trim($("#ename").val());
			        	var url   = $.trim($("#eurl").val());
                        var appid = $.trim($("#eappid").val());
                        var pagepath  = $.trim($("#epagepath").val());
			        	var pid = $("#epidselect").val(); 
			        	if(!name){
	        				layer.msg('请填输入菜单名称', {
	        				    icon: 2,
	        				});
	        				return false;
			        	}
			        	if(pid==0){
			        		if(name.length>4){
			        			layer.msg('顶级菜单只能输入4个中文字符', {
		        				    icon: 2,
		        				});
			        			return false;
			        		}
			        	}else{
			        		if(name.length>7){
			        			layer.msg('二级菜单只能输入7中文字符', {
		        				    icon: 2,
		        				});
			        			return false;
			        		}
			        		
			        	}

                        console.log(type);
				        if(type!='click'&&url.indexOf("http://") == -1 && url.indexOf("https://") == -1){
			        		layer.msg('链接地址前必须添加“http://或者https://”', {
		    				    icon: 2,
		    				});
		        			return false;
			        	}

                        if(type == 'miniprogram'){
                            if(!appid){
                                layer.msg('请输入小程序appid', {
                                    icon: 2,
                                });
                                return false;
                            }
                            if(!pagepath){
                                layer.msg('请输入小程序页面路径', {
                                    icon: 2,
                                });
                                return false;
                            }
                            $('#ekey').val('');
                        }else if(type == 'view'){
                            $('#eappid').val('');
                            $('#epagepath').val('');
                            $('#ekey').val('');
                        }else if(type == 'click'){
                            $('#eappid').val('');
                            $('#epagepath').val('');
                            $("#eurl").val('');
                        }
			        
			        	if(id && name){
			        		var formid = document.getElementById("editform");
							var sformData = new FormData(formid);
							sformData.append("oldpid", dataarr[3]); // 数字123456被立即转换成字符串"123456"
							//alert(dataarr[3])
							$.ajax({
							  type:'post',
							  url:"{:url('vip/weixinconfig/editmenu')}",
							  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/menu')}";
							        }
							      });
							    }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;
	// 新添加类型
	$("body").on('click','#addmenubtn,.addsubmenubtn',function(){
		var _this = $(this);
		var id = _this.attr('data-id');
		if(id){
			var name =$('#apidselect option[value='+id+']').text();
			$('select[name=apid]').html('<option value="'+id+'">'+name+'</option>');
			form.render();
		}
	    layer.open({
	        title:'添加微信菜单',
	        type: 1,
	        skin: 'layui-layer-rim',
	        area:  ['450px', '400px'],
	        content: $('#addbox'),
	        btn:['立即添加','取消'],
	        yes:function(index){
                var type =$("input[name='type']:checked").val();
	        	var title = $.trim($("#aname").val());
	        	var pattern = /a-zZ-A0-9\#\/_\+/;
			    var url   = $.trim($("#aurl").val());
                var appid   = $.trim($("#appid").val());//小程序appid
                var pagepath   = $.trim($("#pagepath").val());//小程序页面路径
                var key   = $.trim($("#key").val());//消息回复关键词

	        	var pid = $('select[name=apid]').val();
	        	if(pid==0){
	        		if(title.length>4){
	        			layer.msg('顶级菜单只能输入4个中文字符', {
        				    icon: 2,
        				});
	        			return false;
	        		}
	        	}else{
	        		if(title.length>7){
	        			layer.msg('二级菜单只能输入7中文字符', {
        				    icon: 2,
        				});
	        			return false;
	        		}
	        	}

                console.log(type);
		        if(type!='click' && url.indexOf("http://") == -1 && url.indexOf("https://") == -1){
	        		layer.msg('链接地址前必须添加“http://或者https://”', {
    				    icon: 2,
    				});
        			return false;
	        	}

                if(type == 'miniprogram'){
                    if(!appid){
                        layer.msg('请输入小程序appid', {
                            icon: 2,
                        });
                        return false;
                    }
                    if(!pagepath){
                        layer.msg('请输入小程序页面路径', {
                            icon: 2,
                        });
                        return false;
                    }
                    $('#key').val('');
                }else if(type == 'view'){
                    $('#appid').val('');
                    $('#pagepath').val('');
                    $('#key').val('');
                }else if(type == 'click'){
                    if(!key){
                        layer.msg('请输入消息回复关键词', {
                            icon: 2,
                        });
                        return false;
                    }

                    $('#appid').val('');
                    $('#pagepath').val('');
                    $("#aurl").val('');
                }

	        	if(title){
	        		var formid = document.getElementById("addform");
					var sformData = new FormData(formid);
					$.ajax({
					    type:'post',
					    url:"{:url('vip/weixinconfig/addmenu')}",
					    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/menu')}";
					        }
					      });
					    }else{
					      layer.msg(s.msg, {
					        icon: 2
					      });
					    }
					}});
	        	}else{
	        		$("#aname").focus()
	        		layer.msg('请填写菜单名称', {
	        		    icon: 2,
	        		});
	        	}
	        }
		});
	})
	
	$('#setmenubtn').on('click',function(){
		layer.confirm('你确定要更新公众号的微信菜单吗？', function (index) {
			$.ajax({
			  type:'post',
			  url:"{:url('vip/weixinconfig/setwxmenu')}",
			  success:function(s){
				    if(s.status==1){
					      layer.msg('更新成功', {
						        icon: 1
						      });
				    }else{
				      layer.msg('更新失败', {
				        icon: 2
				      });
				    }
			  }});
		})
	})
	
	
	
	
}); 
	

function isInt(a){
	var pattern = /^[0-9]*$/;
    return pattern.test(a)?true:false;
}
 
</script>	
</body>
</html>