{layout name="layout" /}
<style>
.hjf input .file {
    width: 200px;
    float: left;
    height: 80px;
    width: 120px;
}.layui-table img {
    max-width: 100px;
	max-height: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;}
.layui-table .layui-table-cell{
	height:auto;
	min-height:none;
}
.label-select{
	width:100%;
	height:40px;
	line-height:40px;
}
.xmsgd{
	padding-bottom: 20px;
}
.display{ display: none;}
</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/setindex/index');}', page:true, id:'idTest'}" lay-filter="demo">
                    <thead>
                    <tr>
                      	<td lay-data="{width:80,field:'id', sort: true,templet: '#indexTpl'}">序号</td>
                        <td lay-data="{width:140,field:'name'}">名称</td>    
                        <td lay-data="{width:200,field:'img',toolbar: '#imgboxa'}">图标</td>
                        <td lay-data="{width:160,field:'staff_name'}">操作员</td>
                        <td lay-data="{width:160,field:'create_time'}">创建时间</td>
 						{if condition='$sedit=1 || $sdel==1'}
                        <td lay-data="{ width: 260, align:'center', toolbar: '#barDemo'}">操作</td>
                        {/if}
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
<div id="editbox" class="new_msg_div" style="height: 100%;">
 	<div class="xmsgd" style="height: 100%;">
	  <form method="post" id="editform" class="layui-form"  enctype="multipart/form-data">
	    <div class="layui-input-block" style="margin-left:0;">
	    	<input type="hidden" class="layui-input" name="id" id="eid"/>
	       	<div   class="layui-input-block" style="margin-left:0;">
	       	<span  class="hjf"><small>导航标题</small><input type="text" class="layui-input" name="name" id="names" /></span>
			<div class="layui-form-item" pane>
				<label class="layui-form-label">导航图标</label>
				<div class="layui-upload layui-form-label" style="padding-left:0;">
				    <input type="file" name="img"  id="imginputs" /><br/>
				  	<img src="" id="imgboxs" width="200" height="200" style="margin-top:10px;" class="display"/>
				</div>
	        </div>
	        <div class="layui-form-item">
				<label class="layui-form-label" >导航分类</label>
                <div class="layui-input-inline">
			            <select name="cateid" id="cateids" class="label-select">
			           		<option value="">请选择导航类别</option>
			           		{volist name="catearr" id="vo"}
			                <option value="{$vo.id}">{$vo.name}</option>
			                {/volist} 
			            </select>
			         <!--<input type="text" class="layui-input"  name="c_type" id="expiredays" value="">-->
			    </div>
			</div>
	    </div>
	    </div>
	    </form>
    </div>
</div>

<div id="addbox" class="new_msg_div">
	<form  action="" method="post" id="addform">
 	<div class="xmsgd">
	    <div class="layui-input-block" style="margin-left:0;">
	       	<span class="hjf"><small>导航标题：</small><input type="text" class="layui-input" name="name" id="name" /></span>
			<div class="layui-form-item" pane>
				<label class="layui-form-label">导航图标</label>
				<div class="layui-upload layui-form-label" style="padding-left:0;">
				    <input type="file" name="img"  id="imginput" /><br/>
				  	<img src="" id="imgbox" width="200" height="200" style="margin-top:10px;" class="display"/>
				</div>
	        </div>
	        <div class="layui-form-item">
				<label class="layui-form-label" >导航分类</label>
                <div class="layui-input-inline">
			            <select name="cateid" id="cateid" class="label-select">
			           		{volist name="catearr" id="vo"}
			                <option value="{$vo.id}">{$vo.name}</option>
			                {/volist} 
			            </select>
			         <!--<input type="text" class="layui-input"  name="c_type" id="expiredays" value="">-->
			    </div>
			</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="imgboxa">
    <img src="__PUBLIC__uploads/{{d.img}}" width="100%" />
</script>
<script type="text/html" id="barDemo">	
	<a class="ex_start edit" lay-event="edit" data-data="{{d.id}},{{d.name}},{{d.phone}}" >修改</a>
	<a class="ex_view" lay-event="del" data-id="{{d.id}}">删除</a>
</script>
<script>

	layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element','form'], function(){
		var laydate = layui.laydate //日期
				,laypage = layui.laypage //分页
				,layer = layui.layer //弹层
				,table = layui.table //表格
				,carousel = layui.carousel //轮播
				,upload = layui.upload //上传
				,element = layui.element //元素操作
				,form=layui.form
		//监听工具条
		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/setindex/del');}",
							data:{id:id},
							type:'post',
							success:function(res){
								if(res.status==200){
                    				layer.msg('删除成功',{
                    				    icon:1,
                    				});
								}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]);
				$("#ephone").val(dataarr[2]); */
				$.ajax({
					url:"{:url('vip/setindex/getcatearr')}",
					type:'post',
					data:{id:dataarr[0]},
					success:function(res){
						if(res.code == 200){
							var data = res.data;
							$("#names").val(data.name);
							if(data.img.length > 0){
								$("#imgboxs").attr('src','__PUBLIC__uploads/'+data.img);
								$("#imgboxs").show();
							}
							$("#cateids").find("option[value = "+data.cateid+"]").attr("selected","selected");
							$('#eid').val(data.id);
							form.render();
							layer.open({
						        title:'修改用户级别',
						        type: 1,
						        skin: 'layui-layer-rim',
						        area: ['600px', '750px'],
						        content: $('#editbox'),
						        btn:['提交修改','取消'],
						        yes:function(index){
						        		var formid = document.getElementById("editform");
										var sformData = new FormData(formid);
										$.ajax({
										  type:'post',
										  url:"{:url('vip/setindex/edit')}",
										  data:sformData,
										  processData: false,  // 不处理数据
										  contentType:false,
										  success:function(res){
											  //console.log(res.msg);
											  //return false;
											  //alert(res.msg);
										    if(res.code == 200){
										      layer.open({
										        content: '恭喜您修改成功!',
										        btn: ['确认'],
										        yes: function(index, layero) {
										          window.location.href="{:url('vip/setindex/index')}";
										        }
										      });
										    }else{
										      layer.msg(res.msg, {
										        icon: 2
										      });
										    }
										  }});
										return false;
						        	
						        }
						     			        
							});
						}
					}
				})
			    
			}
		});
		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(){ 
}); 
	

// 新添加类型
$("#addsecretary").on('click',function(){
    layer.open({
        title:'添加首页导航',
        type: 1,
        skin: 'layui-layer-rim',
        area:  ['600px', '600px'],
        content: $('#addbox'),
        btn:['立即添加','取消'],
        yes:function(index){
        	var name  = $.trim($("#name").val());
        	if(name == ''){
        		 layer.msg("请填写标题", {
				        icon: 2
				      });
        		return false;
        	}
        	if(name){
        		var formid = document.getElementById("addform");
				var sformData = new FormData(formid);
				$.ajax({
				  type:'post',
				  url:"{:url('vip/setindex/add')}",
				  data:sformData,
				  processData: false,  // 不处理数据
				  contentType:false,
				  success:function(res){
				    if(res.code == 200){
				      layer.open({
				        content: '恭喜您添加成功！',
				        btn: ['确认'],
				        yes: function(index, layero) {
				          window.location.href="{:url('vip/setindex/index')}";
				        }
				      });
				    }else{
				      layer.msg(res.msg, {
				        icon: 2
				      });
				    }
				  }});
			 
        	}else{
        	/* 	$("#aname").focus();
        		layer.msg('请输入秘书名称', {
        		    icon: 2,
        		}); */
        	

        }}
	});
    
})
	// 图片显示（添加）
    $("#imginput").on('change',function(){
        imgViews(this,"imgbox");
        $("#imgbox").removeClass("display");
    });

	// 图片显示(修改)
	$("#imginputs").on('change',function(){
	   imgViews(this,"imgboxs");
	   $("#imgboxs").removeClass("display");
	});
	
	//图片显示处理函数
	function imgViews(filedom,img){
	    // 判断是否支持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;
	        }
	        // 读取完成
	        var image = img;
	        reader.onload = function(e){
	            // 获取图片dom
	            var img = document.getElementById(image);
	            // 图片路径设置为读取的图片
	            img.src = e.target.result;
	        };
	        reader.readAsDataURL(file);
	    }
	}
	
 
</script>	
</body>
</html>