<?php 
$this->display(tpl('head',true)); 
?>

<script src="/public/global/js/colpick.js" type="text/javascript" charset="utf-8"></script>
<fieldset class="layui-elem-field layui-field-title">
  	<legend>网站导航菜单管理</legend>
  	<div class="layui-row" style="margin: 10px">
		<a class="layui-btn layui-btn-sm  layui-btn-warm" href="/admin/homemenu/index/">菜单管理</a>
		<a class="layui-btn layui-btn-sm  layui-btn-danger" href="/admin/homemenu/add/">添加菜单</a>
	</div>
</fieldset>
<style>
	.layui-table thead tr th{
		text-align: center;
	}
	.layui-form-switch{
		margin-top: 0;
	}
	.layui-table tbody tr td:nth-child(3),.layui-table tbody tr td:nth-child(5){
		text-align: center;
	}
</style>
<form class="layui-form" id="from" method="post" action="">
	<table class="layui-table" >
		<thead>
			<tr>
				<th>名称</th>
				<th width="100">排序</th>
				<th width="80">状态</th>
				<th width="100">字体颜色</th>
				<th width="110">操作</th>
			</tr>
		</thead>
		<tbody id="tbody">
			<?php
			foreach($data AS $row){
				$state='';
				if(!$row[state]){
					$state='checked';
				}
				$target='_blank';
				if(!$row[target]){
					$target='_self';
				}
			?>
			<tr>
				<td>
					<a href="<?php echo $row[link] ?>" target="<?php echo $target ?>" style="color: <?php echo $row['color'] ?>;">【<?php echo $row[name] ?>】</a>
				</td>
				<td><input class="layui-input" type="number" name="order[<?php echo $row[id]?>]" value="<?php echo $row[reorder]?>" /></td>
				<td>
					<input {{$state}} lay-skin="switch" lay-filter="state" id="<?php echo $row[id]?>" lay-text="开启|关闭" type="checkbox">
				</td>
				<td>
					<input class="layui-input" type="text" id="color<?php echo $row[id]?>" name="color[<?php echo $row[id]?>]" value="<?php echo $row['color']?>" />
					<script type="text/javascript">
				    	$("#color<?php echo $row[id] ?>").css('background-color','<?php echo $row[color]?>');
				    	$("#color<?php echo $row[id] ?>").css('color','#fff');
				    	$('#color<?php echo $row[id] ?>').colpick({
								layout:'hex',
								submit:0,
								colorScheme:'dark',
							onChange:function(hsb,hex,rgb,el,bySetColor) {
								$(el).css('border-color','#'+hex);
								$(el).css('color','#FFF');
								$(el).css('background-color','#'+hex);
								if(!bySetColor) $(el).val('#'+hex);
							}
						}).keyup(function(){
							$(this).colpickSetColor(this.value);
						});
				    </script>
				</td>
				<td>
					<a class="layui-btn layui-btn-sm layui-btn-warm" href="/admin/homemenu/edit/id_<?php echo $row[id] ?>">编辑</a>
					<a class="layui-btn layui-btn-sm layui-btn-danger" href="/admin/homemenu/del/id_<?php echo $row[id] ?>">删除</a>
				</td>
			</tr>
			<?php 
			if($row['list']){
				foreach($row['list'] AS $rows){
					$state='';
					if(!$rows[state]){
						$state='checked';
					}
					$target='_blank';
					if(!$rows[target]){
						$target='_self';
					}
			?>
			<tr>
				<td>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|——&nbsp;&nbsp;<a href="<?php echo $rows[link] ?>" target="<?php echo $target ?>" style="color: <?php echo $rows[color] ?>;">【<?php echo $rows[name] ?>】</a>
				</td>
				<td><input class="layui-input" type="number" name="order[<?php echo $rows[id]?>] " value="<?php echo $rows[reorder] ?>" /></td>
				<td>
					<input <?php echo $state ?> lay-skin="switch" lay-filter="state" id="<?php echo $rows[id] ?>" lay-text="开启|关闭" type="checkbox">
				</td>
				<td>
					<input class="layui-input" id="color<?php echo $rows[id] ?>" type="text" name="color[<?php echo $rows[id] ?>]" value="<?php echo $rows[color] ?>" />
					<script type="text/javascript">
				    	$("#color<?php echo $rows[id] ?>").css('background-color','<?php echo $rows[color] ?>');
				    	$("#color<?php echo $rows[id] ?>").css('color','#fff');
				    	$('#color<?php echo $rows[id] ?>').colpick({
								layout:'hex',
								submit:0,
								colorScheme:'dark',
							onChange:function(hsb,hex,rgb,el,bySetColor) {
								$(el).css('border-color','#'+hex);
								$(el).css('color','#FFF');
								$(el).css('background-color','#'+hex);
								if(!bySetColor) $(el).val('#'+hex);
							}
						}).keyup(function(){
							$(this).colpickSetColor(this.value);
						});
				    </script>
				</td>
				<td>
					<a class="layui-btn layui-btn-sm layui-btn-warm" href="/admin/homemenu/edit/id_<?php echo $rows[id] ?>">编辑</a>
					<a class="layui-btn layui-btn-sm layui-btn-danger" href="/admin/homemenu/del/id_<?php echo $rows[id] ?>">删除</a>
				</td>
			</tr>

			<?php } }?>
		<?php } ?>
		</tbody>
	</table>
	<div class="my_button" style="margin-top: 20px;">
		<input type="hidden" name="step" id="step" value="post" />
		<button class="layui-btn">立即设置颜色或排序</button>
	</div>
</from>

<script type="text/javascript">
	layui.config({
		version: '<?php echo NOWTIME ?>'
	});
	layui.use(['form','layer'], function(){
	  	var form = layui.form
	  	,layer = layui.layer;
	  	
	  	form.on('switch(state)', function(obj){
	  		
		  	if(obj.elem.checked==true){
		  		var state=0;
		  	}else{
		  		var state=1;
		  	}
		  	console.log(obj);
		  	$.ajax({
					url:"/admin/homemenu/state/",
					type: 'POST',
					data:{'state':state,'id':obj.elem.id,'json':true},
					dataType: 'json',
					success: function(data){
						if(data.code !=0){
							layer.alert(data.text);
						}else{
							if(obj.elem.checked==true){
						  		layer.tips("已开启", obj.othis);
						  	}else{
						  		layer.tips("已关闭", obj.othis);
						  	}
						}
						
					}
				})
	  	});
	})
</script>


<?php 
$this->display(tpl('foot')); 
?>
