{layout name="layout" /}
<style>
a ,a:hover{
    color: #fff;
    text-decoration: none;
}
.set_con {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    min-width: 1130px;
    overflow: auto;
    box-sizing: border-box;
    padding-left: 50px;
}
.layui-form-item {
    /* margin-bottom: 15px; */
    clear: both;
    width: 1130px;
    margin: 10px 0;
    float: left;
}
.layui-input, .layui-textarea {
    width: 190px;
}
#if_con {
    overflow: auto;
	background:#fff;
}
.layui-form-label {
    width: 100px;
}

.display{ display:none}


.staff-filter {
    height: auto;
    overflow: hidden;
    margin-left: 90px;
}
.filter-wrap {
    background: #bfccdd;
    float: left;
    margin-bottom: 5px;
    width: auto;
    height: 30px;
    padding: 0 10px;
    border-radius: 4px;
    line-height: 30px;
    color: #fff;
    margin-right: 5px;
}

.filter-text {
    margin-right: 10px;
    font-size: 12px;
}

.cus-close {
    cursor: pointer;
    font-size: 16px;
}

.cus-close:hover {
    color: #319eac;
}



</style>
<div class="if_wrap">
<div id="if_con">
<div class="cus-con">
    <div class="set-top">
    {$topmenu}
    </div>
<form class="layui-form layui-form-pane1" action="addCoupon" method="post" id="addform" enctype="multipart/form-data">
    <div class="layui-form-item">
        <label class="layui-form-label">优惠券名称</label>
        <div class="layui-input-block">
            <input type="text" name="title" class="layui-input" lay-verify="required|title" required placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">优惠券类别</label>
        <div class="layui-input-inline">
            <select name="typeid">
                <option value="0">选择优惠券类别</option>
                {foreach $types as $v }
                <option value="{$v.id}">{$v.name}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">优惠券类型</label>
        <div class="layui-input-inline">
            <select name="discounttype" lay-filter="discounttype">
                <!-- <option value="0">不限</option> -->
                <option value="1">直减型</option>
                <option value="2">折扣型</option>
                <option value="3">兑换型</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item" id="coupon_num">
        <label class="layui-form-label">面值</label>
        <div class="layui-input-inline">
            <input type="text" name="money" class="layui-input" id="money" lay-verify="money" placeholder="请输入面值">
        </div>
        <div class="layui-form-mid layui-word-aux">元</div>
    </div>

    <div  id="product-div" style="display: none">
        <div class="layui-form-item">
            <label class="layui-form-label">兑换产品</label>
            <div class="layui-input-inline">
                <select id="shop_list" lay-filter="shop_list">
                    <option value="">请选择店</option>
                    {volist name="shop_list" id='vo'}
                    <option value="{$vo.shop_code}">{$vo.shop_name}</option>
                    {/volist}
                </select>
            </div>

            <div class="layui-input-inline">
                <select id="product_list" lay-filter="product_list">
                    <option value="">请选择产品</option>
                </select>
            </div>

            <div class="layui-input-inline" style="width: 100px">
                <input type="text" class="layui-input" onkeyup='this.value=this.value.replace(/\D/gi,"")' id="product_num" style="width: 100px" placeholder="请输入数量">
            </div>
            
            <div class="layui-input-inline">
                <span class="layui-btn layui-btn-primary" id="select-product">确定选择</span>
            </div>
        </div>
        <div style="width:100%; float:left; clear:both;" >
            <label class="layui-form-label"></label>
            <div class="staff-filter">
                <input type="hidden" id="product_info" name="product_info" value="">
                <span class="default-filter"></span>
                <span class="add-filter"></span>
            </div>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">适用套系</label>
        <div class="layui-input-inline" style="width: 300px;">
            {volist name='package' id='p'}
            <input type="checkbox" name="package_ids[]" title="{$p.package_name}" value="{$p.id}" lay-skin="primary">
            {/volist}
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">最低消费</label>
        <div class="layui-input-inline">
            <input type="text" name="minconsume" id="minconsume" class="layui-input"  placeholder="请输入最低消费金额" lay-verify="num">
        </div>
        <div class="layui-form-mid layui-word-aux">最低消费金额</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">发行总数</label>
        <div class="layui-input-block">
            <input type="text" name="totalnum" class="layui-input" id="totalnum" autocomplete="off" class="layui-input" lay-verify="num">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">优惠券批次号</label>
        <div class="layui-input-inline">
            <input type="text" name="couponnum" class="layui-input" lay-verify="" placeholder="请输入优惠批次编号" >
        </div>
        <div class="layui-form-mid layui-word-aux">优惠券批次编号</div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">每人最多领取</label>
        <div class="layui-input-inline">
            <input type="text" name="eachmaxtotal" id="eachmaxtotal" class="layui-input" value="1"  placeholder="请输入每人最多取数量" lay-verify="num">
        </div>
        <div class="layui-form-mid layui-word-aux">每人最多领取的数量</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">可用开始日期</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input test-item" name="starttime" id="starttime">
        </div>
        <div class="layui-form-mid layui-word-aux">优惠券使用开始日期</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" >截止使用日期</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input test-item"  name="endtime" id="endtime">
        </div>
        <div class="layui-form-mid layui-word-aux">优惠券使用截止日期</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" >有效天数</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input"  name="expiretime" value="0" lay-verify="num">
        </div>
        <div class="layui-form-mid layui-word-aux">自用户领取后几天内有效,填写数字即可,0表示无期限</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" >排序数字</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input"  name="ordernum" id="ordernum" value="0" lay-verify="num">
        </div>
        <div class="layui-form-mid layui-word-aux">数字越大后台显示越靠前</div>
    </div>
    <div class="layui-form-item" pane>
        <label class="layui-form-label">是否开启</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="1" title="开启" checked>
            <input type="radio" name="status" value="0" title="暂不开启" >
        </div>
    </div>
    <div class="layui-form-item" pane>
        <label class="layui-form-label">展示在海量优惠券</label>
        <div class="layui-input-block">
            <input type="radio" name="is_show" value="1" title="展示" checked >
            <input type="radio" name="is_show" value="0" title="不展示" >
        </div>
    </div>
    <div class="layui-form-item" pane>
        <label class="layui-form-label">是否可分享</label>
        <div class="layui-input-block">
            <input type="radio" name="can_share" value="1" title="可分享" checked >
            <input type="radio" name="can_share" value="0" title="不可分享" >
        </div>
    </div>
  <div class="layui-form-item" pane> 
     <label class="layui-form-label" >上传图片<br/><span class="imgsize">宽{$imgsize[0]}px*高{$imgsize[1]}px</span></label>
   	    <div class="layui-upload layui-form-label" style="padding-left:0px;">
		    <input type="file" name="img"  id="imginput" /><br/>
		    <img src="" id="imgbox" width="150" height="120" style="margin-top:10px;" class="display"/>
	    </div>
  </div>
      <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">优惠券介绍</label>
          <div class="layui-input-block">
              <textarea placeholder="请输入内容" class="layui-textarea" name="content"></textarea>
          </div>
      </div>
  <div class="layui-form-item" style="height:100px">
      <div class="layui-input-block">
          <span class="layui-btn" lay-submit lay-filter="*" id="btn">立即提交</span>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
  </div>
</form>
</div>
</div>
</div>
<script>


    //判断时间
$("#btn").on('click',function(){
    var starttime = $("#starttime").val();
    var endtime = $("#endtime").val();
    var strStarTime = Date.parse(new Date(starttime));
    var strEndTime = Date.parse(new Date(endtime));
    if (strEndTime < strStarTime) {
        layer.msg('结束时间不能小于开始时间',{
            icon: 2
        });
        return false;
    }

    title = $("input[name=tilie]").val();
    var convert_money = $("#convert_money").val();

    if (convert_money!=undefined) {
        var data = convert_money.split(',');
        if(data.length>3){
            layer.msg('兑换值最多三个', {
                icon: 2
            });
            return false;
        }
    }
    var totalnum = $("#totalnum").val();
    if(totalnum < 1){
        layer.msg('发行总数最少为1', {
            icon: 2
        });
        return false;
    }
    var formid = document.getElementById("addform");
    var sformData = new FormData(formid);

        $.ajax({
        type:'post',
        url:'addCoupon',
        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/coupon/index')}";
                    }
                });
            }else{
                layer.msg(s.msg, {
                    icon: 2
                });
            }
        }
    });
});

layui.use('laydate', function(){
  var laydate = layui.laydate;
  //同时绑定多个
  lay('.test-item').each(function(){
    laydate.render({
      elem: this
      ,trigger: 'click'
    });
  });
});


layui.use('form', function(){
    var form = layui.form;
    form.on('select(discounttype)', function(data){
        var discounttype = data.value;
        var replace='';
        if(discounttype==2){
            replace='<label class="layui-form-label">折扣</label> <div class="layui-input-inline"> <input type="text" name="money" class="layui-input" id="money" placeholder="请输入折扣" > </div> <div class="layui-form-mid layui-word-aux">%  （九五折则为95%）</div>';
            $('#product-div').css('display','none');
        }else if(discounttype == 1){
            replace='<label class="layui-form-label">面值</label> <div class="layui-input-inline"> <input type="text" name="money" class="layui-input" id="money" lay-verify="money" placeholder="请输入抵扣金额"> </div><div class="layui-form-mid layui-word-aux">元</div>';
            $('#product-div').css('display','none');
        }else{
            replace='<label class="layui-form-label">兑换面值</label> <div class="layui-input-inline"> <input type="text" name="money" class="layui-input" id="money" placeholder="请输入面值" > </div> <div class="layui-form-mid layui-word-aux">元</div>';
            $('#product-div').css('display','inline-block');
        }
        $("#coupon_num").html(replace);
        form.render();
    });

    //根据店面查询产品
    form.on('select(shop_list)', function(data){
        var the_shop_code = data.value;
        if(the_shop_code){
            $.ajax({
                type:'post',
                url:"{:url('Coupon/getProductList')}",
                data:{shop_code:the_shop_code},
                success:function(res){

                    var productList = res.data;
                    var productStr = '<option value="">请选择产品</option>';
                    $.each(productList,function(key,val){
                        productStr += '<option value="'+val.item_name+'">'+val.item_name+'</option>';
                    });
                    $('#product_list').html(productStr);
                    form.render();
                }
            })
        }
    });

    var p_array = [];//产品名称和数量

    $('#select-product').click(function(){
        var product_list = $('#product_list').val();
        var product_num = $('#product_num').val();
        if(!product_list){
            layer.alert('请选择产品');
            return false;
        }
        if(!product_num){
            layer.alert('请填写数量');
            return false;
        }

        //要添加显示的html
        var filterwrap = '<div class="filter-wrap"><span class="filter-text type-val" value="' + product_list + '">'+product_list+'('+product_num+'个)'+'</span><span class="cus-close">&times;</span></div>';
        var obj = {};

        if (p_array.length == 0) {
            $(".add-filter").append(filterwrap);
            obj.product = product_list;
            obj.num = product_num;
            p_array.push(obj);
        } else {
            var site = 0;
            for (var i = 0; i < p_array.length; i++) {
                if (p_array[i].product == product_list) {
                    site = 1;
                }
            }

            if(site == 0){
                $(".add-filter").append(filterwrap);
                obj.product = product_list;
                obj.num = product_num;
                p_array.push(obj);
            }
        }

        getProductStr(p_array);

    });

    //去除产品
    $(".add-filter").on('click','.cus-close',function(){
        var type_val = $(this).parent().find(".type-val").attr("value");
        for (var i = 0; i < p_array.length; i++) {
            if (p_array[i].product == type_val) {
                p_array.splice(i, 1);
            }
        }
        $(this).parent().remove();
        getProductStr(p_array);
    });

    //向隐藏域赋值
    function getProductStr(p_array){
        var p_str = '';
        $.each(p_array,function(k,v){
            p_str += v.product + '|' + v.num + ';';
        });
        $('#product_info').val(p_str);
    }




    //自定义验证规则
    form.verify({
        title: function(value){
            if(value.length < 2){
                return '标题也太短了吧';
            }
        },
        imgbox:function(value){
            if(value.length == ''){
                return '图片不能为';
            }
        },
        pass: [/(.+){6,50}$/, '密码必须6到50位'],
        num:[/[0-9]+/,'此项必须是数字'],
        money:function(value){
            var typeid = $("select[name=discounttype]").val();
            var value = parseInt(value);
            if(typeid==2 && value>100){
                return '折扣值请保持在0-100内,100表示不打折';
            }
        }
    });

//  form.on('radio', function(data){
//    console.log(data);
//  });
  //监听提交
  // form.on('submit(*)', function(data){
  //   title = $("input[name=tilie]").val();
  //   var convert_money = $("#convert_money").val();
  //   var data = convert_money.split(',');
  //   if(data.length>3){
  //     layer.msg('兑换值最多三个', {
  //         icon: 2
  //       });
  //   }
  //   var formid = document.getElementById("addform");
  //   var sformData = new FormData(formid);
  //   //sformData.append(formid);
  //   $.ajax({
  //     type:'post',
  //     url:'addCoupon',
  //     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/coupon/index')}";
  //           }
  //         });
  //       }else{
  //         layer.msg('添加失败', {
  //           icon: 2
  //         });
  //       }
  //     }});
  //   return false;
  // });
});

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

// 图片显示处理函数
function imgView(filedom){
	// 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('imgbox');
			// 图片路径设置为读取的图片
			img.src = e.target.result;
		};
		reader.readAsDataURL(file);
	}	
} 
</script>
</body>
</html>