{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;}

.layui-table-cell{
    height: auto;
}
</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/level/index');}', 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:'min_once_pay'}">一次性消费最低</td>
                        <td lay-data="{width:140,field:'max_once_pay'}">一次性消费最高</td>
                        <td lay-data="{width:140,field:'total_pay'}">累计消费</td>
                        <td lay-data="{width:140,field:'deduct_score'}">抵扣积分</td>

                        <td lay-data="{width:140,field:'',toolbar: '#imgModel'}">级别图片</td>
                        <td lay-data="{width:140,field:'discount'}">级别折扣</td>
                        <td lay-data="{width:200,field:'create_time'}">创建日期</td>
 						{if condition='$leveledit=1 || $leveldel==1 || $setgrowthrule==1 || $scoreruleedit==1'}
                        <td lay-data="{ width: 260, align:'center', toolbar: '#barDemo'}">操作</td>
                        {/if}
                    </tr>
                    </thead>
                </table>
            </div>
            
        </div>
    </div>

<div id="addbox" class="new_msg_div">
	<form  action="" method="post" id="addlevelform">
 	<div class="xmsgd">
	    <div class="layui-input-block" style="margin-left:0;">
            <input type="hidden" name="id" id="levelid">
	       	<span class="hjf"><small>级别名称 *：</small><input type="text" class="layui-input" name="name" id="name" /></span>
			<span class="hjf"><small>可享折扣：</small><input type="text" class="layui-input" name="discount" id="discount" placeholder="如：九五折，输入0.95" /></span>

            <div class="inter-tit"><font style="color: salmon;margin-left:30px;">升级规则1</font></div>

			<span class="hjf">
                <small>一次性消费 *：</small>
                <input type="text" class="layui-input" style="width:90px;" name="min_once_pay" id="min_once_pay" placeholder="最低消费" onkeyup="value=value.replace(/[^\d]/g,'') " ng-pattern="/[^a-zA-Z]/" />
                <input type="text" class="layui-input" style="width:90px;margin-left:10px;" name="max_once_pay" id="max_once_pay" placeholder="最高消费" onkeyup="value=value.replace(/[^\d]/g,'') " ng-pattern="/[^a-zA-Z]/" />
            </span>
            <div class="inter-tit"><font style="color: salmon;margin-left:30px;">升级规则2</font></div>

			<span class="hjf">
                <small>累计消费 *：</small>
                <input type="text" class="layui-input" name="total_pay" id="total_pay" placeholder="输入金额" onkeyup="value=value.replace(/[^\d]/g,'') " ng-pattern="/[^a-zA-Z]/" />
            </span>
            <span class="hjf">
                <small>抵扣积分：</small>
                <input type="text" class="layui-input" name="deduct_score" id="deduct_score" placeholder="抵扣积分数" onkeyup="value=value.replace(/[^\d]/g,'') " ng-pattern="/[^a-zA-Z]/" />
            </span>

			<span class="hjf">
				<small>等级图片：<br/><span class="imgsize">宽{$imgsize[0]}px<br/>高{$imgsize[1]}px</span></small>
				<input type="file" name="img" id="imginput" />
				<img src="" id="imgbox" style="max-height:100px;max-width:100px; float:left; clear:both; margin-left:90px; margin-top:5px;">
			</span>
	    </div>
    </div>
	</form>
</div>

<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<script type="text/html" id="barDemo">	
{notempty name="$editscorerule"} 
	<a class="ex_view" href="{:url('vip/scorerule/edit')}?levelid={{d.id}}">设置积分规则</a>
{/notempty}
<!--{notempty name="$editgrowthrule"}
	<a class="ex_view" href="{:url('vip/level/setgrowthrule')}?levelid={{d.id}}">成长值规则</a>
{/notempty}-->
{notempty name="$aleveledit"}
	<a class="ex_start edit" lay-event="edit" data-data="{{d.id}},{{d.name}},{{d.min_value}},{{d.max_value}},{{d.img}}" >修改</a>
{/notempty}
<!--{notempty name="$leveldel"}	
	<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>
	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/level/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 === 'edit'){
                var id = data.id;
                if(!id){
                    layer.msg('未获取到此条等级信息', {
                        icon: 2
                    });
                    return false;
                }
                console.log(id);
                console.log(data);

			 	$("#levelid").val(id);
				$("#name").val(data.name);
				$("#discount").val(data.discount);
				$("#min_once_pay").val(data.min_once_pay);
				$("#max_once_pay").val(data.max_once_pay);
				$("#total_pay").val(data.total_pay);
				$("#deduct_score").val(data.deduct_score);
				$("#imgbox").attr('src',"__PUBLIC__/uploads/"+data.img);
			    layer.open({
			        title:'修改用户级别',
			        type: 1,
			        skin: 'layui-layer-rim',
			        area:  ['450px', '510px'],
			        content: $('#addbox'),
			        btn:['提交修改','取消'],
			        yes:function(index){
                        var name = $.trim($("#name").val());
                        var min_once_pay = $.trim($("#min_once_pay").val());//一次性最少消费
                        var max_once_pay = $.trim($("#max_once_pay").val());//一次性最多消费
                        var total_pay = $.trim($('#total_pay').val());//累计消费
                        if(!min_once_pay){
                            $("#amaxvalue").focus();
                            layer.msg('请填写一次性消费的最小金额', {
                                icon: 2
                            });
                            return false;
                        }

                        if(!max_once_pay){
                            $("#amaxvalue").focus();
                            layer.msg('请填写一次性消费的最大金额', {
                                icon: 2
                            });
                            return false;
                        }

                        if(!total_pay){
                            $("#total_pay").focus();
                            layer.msg('请填写累计消费金额', {
                                icon: 2
                            });
                            return false;
                        }

                        var img = $('#imgbox').attr('src');
                        if(!img){
                            layer.msg('请上传此级别用户显示的图片', {
                                icon: 2
                            });
                            return false;
                        }

                        if(!name){
                            $("#name").focus();
                            layer.msg('请填写等级名称', {
                                icon: 2
                            });
                        }

			        	if(id && name){
			        		var formid = document.getElementById("addlevelform");
							var sformData = new FormData(formid);
							$.ajax({
							  type:'post',
							  url:"{:url('vip/level/edit')}",
							  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/level/index')}";
							        }
							      });
							    }else{
							      layer.msg(s.msg, {
							        icon: 2
							      });
							    }
							  }});
							return false;
			        	}else{
			        		msg = id?'请填写类型名称':'无法修改这条数据';
			        		layer.msg(msg, {
			        		    icon: 2,
			        		});
			        	}
			        }
			     			        
				});
			}
		});

	});

layui.use('form', function(){ 
}); 
	

// 新添加类型
$("#addlevelbtn").on('click',function(){

    layer.open({
        title:'添加用户级别',
        type: 1,
        skin: 'layui-layer-rim',
        area:  ['450px', '510px'],
        content: $('#addbox'),
        btn:['立即添加','取消'],
        yes:function(index){
        	var name = $.trim($("#name").val());
        	var min_once_pay = $.trim($("#min_once_pay").val());//一次性最少消费
        	var max_once_pay = $.trim($("#max_once_pay").val());//一次性最多消费
            var total_pay = $.trim($('#total_pay').val());//累计消费
        	if(!min_once_pay || !isInt(min_once_pay)){
        		$("#amaxvalue").focus();
				layer.msg('请填写一次性消费的最小金额', {
				    icon: 2
				});
				return false;
        	}

            if(!max_once_pay || !isInt(max_once_pay)){
                $("#amaxvalue").focus();
                layer.msg('请填写一次性消费的最大金额', {
                    icon: 2
                });
                return false;
            }

            if(!total_pay || !isInt(total_pay)){
                $("#total_pay").focus();
                layer.msg('请填写累计消费金额', {
                    icon: 2
                });
                return false;
            }

        	var img = $('#imgbox').attr('src');
        	if(!img){
        		layer.msg('请上传此级别用户显示的图片', {
				    icon: 2
				});
				return false;
        	}

            if(!name){
                $("#name").focus();
                layer.msg('请填写等级名称', {
                    icon: 2
                });
            }

            var formid = document.getElementById("addlevelform");
            var sformData = new FormData(formid);
            $.ajax({
                type:'post',
                url:"{:url('vip/level/add')}",
                data:sformData,
                processData: false,  // 不处理数据
                contentType:false,
                success:function(s){
                    console.log(s);
                    if(s.status==1){
                        layer.open({
                            content: '恭喜您添加成功！',
                            btn: ['确认'],
                            yes: function(index, layero) {
                                window.location.href="{:url('vip/level/index')}";
                            }
                        });
                    }else{
                        layer.msg(s.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>