{layout name="layout" /}
<style>
.laytable-cell-1-card_img {
    width: 120px;
    height: 100%;
}
.layui-table-cell{
	height:21px;
	line-height: 21px;
}
</style>
    <div class="if_wrap">
        <div id="if_con">
        	<div class="cus-con">
                <div class="set-top">                   
                	{$topmenu}
					<div class="layui-btn "><a class="all_enabled" href="#">启用</a></div>
					<div class="layui-btn "><a  class="all_discontinuation"   href="#">停用</a></div>
                </div>
                <table class="layui-table" lay-data="{ url:'{:url('vip/card/index');}', page:true, id:'idTest'}" lay-filter="demo">
                    <thead>
                    <tr >
                        <td lay-data="{ checkbox: true,}"></td>
                      	<td lay-data="{width:60,field:'id', sort: true,templet: '#indexTpl'}">序号</td>
                        <td lay-data="{width:140,field:'card_name'}">卡片名称</td>
                        <td lay-data="{width:140,field:'card_type',toolbar: '#cardtypebox'}">卡片类型</td>       
                        <td lay-data="{width:120,field:'card_img',toolbar: '#imgbox'}">卡片封面</td>
                        <td lay-data="{width:90,field:'price'}">卡片售价</td>   
                        <td lay-data="{width:80,field:'discount'}">折扣</td>   
                        <td lay-data="{width:100,field:'card_prefix'}">卡片前缀</td>   
                        <td lay-data="{width:90,field:'card_balance'}">卡内金额</td>   
                        <td lay-data="{width:140,field:'card_desc'}">卡片说明</td> 
                        <td lay-data="{width:100,field:'expire_days'}">有效期(天)</td>    
                        <td lay-data="{width:200,field:'add_time'}">创建日期</td>
                    	<td lay-data="{width:100,field:'order_num'}">排序数字</td>   
                    	<td lay-data="{width:100,field:'card_num'}">卡片数量</td>
                    	{if condition="$cardedit==1 || $carddel || $setcardstatus"}
                        <td lay-data="{width: 160, align:'center', toolbar: '#barDemo'}">操作</td>
                        {/if}
                    </tr>
                    </thead>
                </table>
            </div>
            
        </div>
    </div>
<div id="editbox" class="new_msg_div">
 	<div class="xmsgd">
	    <div class="layui-input-block">
	    	<input type="hidden" class="layui-input" name="id" id="levelid" />
	       	级别名称：<input type="text" class="layui-input" name="ename" id="ename" />
			开始值<input type="text" class="layui-input" name="eminvalue" id="eminvalue" />
			结束值<input type="text" class="layui-input" name="emaxvalue" id="emaxvalue" />
	    </div>
	    <div class="layui-input-block">
	      <button class="layui-btn" id="editbtn">立即提交</button>
	      <button type="button" class="layui-btn layui-btn-primary layui-layer-close layui-layer-close1">取消</button>
	    </div>
    </div>
</div>
<div id="addbox" class="new_msg_div">
 	<div class="xmsgd">
	    <div class="layui-input-block">
	       	级别名称：<input type="text" class="layui-input" name="aname" id="aname" />
			开始值<input type="text" class="layui-input" name="aminvalue" id="aminvalue" />
			结束值<input type="text" class="layui-input" name="amaxvalue" id="amaxvalue" />
	    </div>
	    <div class="layui-input-block">
	      <button class="layui-btn" id="addbtn">立即提交</button>
	      <button type="button" class="layui-btn layui-btn-primary layui-layer-close layui-layer-close1">取消</button>
	    </div>
    </div>
</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="imgbox">
	{{# if(d.card_img){ }}
	<img src="__PUBLIC__/uploads/{{d.card_img}}" width="100%"/>
	{{# } }}
</script>
<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<script type="text/html" id="barDemo">
{notempty name="$setcardstatus"}
	<a class="ex_view operation_php" lay-event="setstatus" data-id="{{d.id}}">{{d.status==1?'停用':'启用'}}</a>
<input type="hidden" class="id_php" value="{{d.id}}"/>
{/notempty}
{notempty name="$cardedit"}
	<a class="ex_start edit" lay-event="edit" href="{:url('vip/card/edit');}?id={{d.id}}">修改</a>
{/notempty}
{notempty name="$carddel"}
	<a class="ex_view" lay-event="del" data-id="{{d.id}}">删除</a>
{/notempty}
</script>
<script type="text/html" id="cardtypebox">
	{{# if(d.card_type==2){ }}
	  储值卡
	{{# }else{ }}
	折扣卡
	{{# } }}
</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/card/del');}",
							data:{id:id},
							type:'post',
							success:function(e){
								if(e.status==1){
									layer.msg('恭喜删除成功', {
									    icon: 1,
									});
								}else{
									layer.msg('抱歉,删除失败',{
									    icon: 2,
									});
								}
							}
						})
					}
				});
			}else if(layEvent === 'setstatus'){
				var thisobj = $(this);
				var id   = $(this).attr("data-id"); // 获取要操作的id
				var text = $(this).html();  // 获取当前是什么状态
				var status = text=='启用'?'1':'0';
				layer.confirm('你确定要'+text+'吗？', function (index) {
					layer.close(index);
					//向服务端发送删除指令
					$.ajax({
						url:"{:url('vip/card/setstatus');}",
						data:{id:id,status:status},
						type:'post',
						success:function(e){
						    thisobj.html(text=='启用'?'停用':'启用');
							if(e.status==1){
								layer.msg('设置成功',{
								    icon: 1,
								});
							}else{
								layer.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(){ 
}); 
</script>

<script>
	$('.all_enabled').on('click', function () {
		var url = "{:url('Card/allEnabled')}";
		var arr = new Array;
		var str = '';
        var obj = $('input[type=checkbox]');
        for(var i = 0;i < obj.length;i++){
            if(obj[i].checked==true){
                arr.push(obj.eq(i).parents('tr').find('.id_php').val());
                obj.eq(i).parents('tr').find('.operation_php').text('停用')
            }
        }
        if(arr.length < 1){
            layer.msg('请选择要编辑的表格', {
                icon: 2,
            });return false;
        }

        str = arr.join(',');
		$.ajax({
			url: url,
			data: {idStr: str},
			type: 'post',
			success: function (e) {
				if (e.code == 200) {
					layer.msg('设置成功', {
						icon: 1,
					});
				} else {console.log(e.msg);
					layer.msg(e.msg, {
						icon: 2,
					});
				}
			}
		})
		return false;
	});

	$('.all_discontinuation').on('click', function () {
		var url = "{:url('Card/allDiscontinuation')}";
		var arr = new Array;
		var str = '';
        var obj = $('input[type=checkbox]');
        for(var i = 0;i < obj.length;i++){
            if(obj[i].checked==true){
                arr.push(obj.eq(i).parents('tr').find('.id_php').val());
                obj.eq(i).parents('tr').find('.operation_php').text('启用')
            }
        }
        if(arr.length < 1){
            layer.msg('请选择要编辑的表格', {
                icon: 2,
            });return false;
        }
		str = arr.join(',');
		$.ajax({
			url: url,
			data: {idStr: str},
			type: 'post',
			success: function (e) {
				if (e.code == 200) {
					/*$('.operation_php').each(function(i){
						$('.operation_php').eq(i).text('启用');
					})*/
					layer.msg('设置成功', {
						icon: 1,
					});
				} else {
					layer.msg(e.msg, {
						icon: 2,
					});
				}
			}, error: function () {
				console.log('000000000');
			}
		})
		return false;
	});
</script>
</body>
</html>