{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;
}
.height150{
	height:150px;
}

.layui-form-label {
    width: 100px;
}




.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="?is=1" method="post" id="editform" enctype="multipart/form-data">
    <input type="hidden" value="{$coupon.id}" name="id"/>
    <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" value="{$coupon.title}">
        </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 }
                {if $v.id==$coupon.coupon_typeid}
                    <option value="{$v.id}" selected>{$v.name}</option>
                {else}
                    <option value="{$v.id}">{$v.name}</option>
                {/if}
            {/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" {$coupon.discount_type==2?'selected':''}>折扣型</option>
                <option value="3" {$coupon.discount_type==3?'selected':''}>兑换型</option>
            </select>
        </div>
    </div>
    {if condition="$coupon.discount_type eq 1"}
        <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" value="{$coupon.money}" lay-verify="money" placeholder="请输入抵扣金额">
            </div>
            <div class="layui-form-mid layui-word-aux">元</div>
        </div>
    {elseif condition="$coupon.discount_type eq 2"}
        <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" value="{$coupon.money}" placeholder="请输入折扣">
            </div>
            <div class="layui-form-mid layui-word-aux">%  （九五折则为95%）</div>
        </div>
    {else}
        <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" value="{$coupon.money}" lay-verify="money" placeholder="请输入兑换面值">
            </div>
            <div class="layui-form-mid layui-word-aux">元</div>
        </div>
    {/if}


    <div  id="product-div" {if condition="$coupon.discount_type neq 3"}style="display:none;"{/if}>
        <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" 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="{$coupon.product_info}">
                <span class="default-filter"></span>
                    <span class="add-filter">
                        {volist name='product_info' id='vo'}
<div class="filter-wrap"><span class="filter-text type-val" value="{$vo.product}">{$vo.product}({$vo.num})</span><span class="cus-close">&times;</span></div>
                        {/volist}

                    </span>
            </div>

        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">适用套系</label>
        <div class="layui-input-inline" style="width: 300px;">
            <input type="checkbox" title="全选/全不选" id="checkall" lay-filter="allChoose"/>
            {volist name='package' id='p'}
            <input type="checkbox" name="package_ids[]" title="{$p.package_name}" value="{$p.id}" lay-skin="primary" {if condition="in_array($p.id,$coupon.package_ids)"} checked {/if}>
            {/volist}
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">最低消费</label>
        <div class="layui-input-inline">
            <input type="text" name="minconsume" class="layui-input" value="{$coupon.min_consume}"  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-block">
      <input type="text" name="totalnum" class="layui-input"  autocomplete="off"  value="{$coupon.total_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="请输入优惠批次编号" value="{$coupon.coupon_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" name="eachmaxtotal" value="{$coupon.each_max_total}" class="layui-input"  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" class="layui-input test-item" name="starttime" id="starttime" value="{$coupon.start_time}">
    </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" value="{$coupon.end_time}">
    </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="{$coupon.expire_time}" 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="{$coupon.order_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="开启" {$coupon.status==1?checked:''}>
      <input type="radio" name="status" value="0" title="暂不开启" {$coupon.status!=1?checked:''} >
    </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="展示"  {$coupon.is_show==1?checked:''}>
            <input type="radio" name="is_show" value="0" title="不展示" {$coupon.is_show!=1?checked:''}>
        </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="可分享"  {$coupon.can_share==1?checked:''}>
            <input type="radio" name="can_share" value="2" title="不可分享" {$coupon.can_share!=1?checked:''}>
        </div>
    </div>
  <div class="layui-form-item">
    <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:0;">
		<input type="file" name="img"  id="imginput" /><br/>
		<img src="__PUBLIC__/uploads/{$coupon.img}" id="imgbox" width="200" height="200"/>
 
		 <div class="layui-upload-list">
		 
		 </div>
	</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" >{$coupon.content}</textarea>
    </div>
  </div>
  <div class="layui-form-item height150">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</div>
</div></div>
<script>
    layui.use(['form','jquery'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        //点击全选, 勾选
        form.on('checkbox(allChoose)', function (data) {
            var child = $("input[name='package_ids[]']");
            child.each(function (index, item) {
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });

        //初始化全选按钮，入所有选项都选中，则选中全选按钮
        var child = $("input[name='package_ids[]']");
        child.each(function (index, item) {
            is_check = true;
            if(item.checked == false){
                is_check = 0;
                return false;
            }
        });
        if(is_check){
            $('#checkall').prop('checked',true);
            form.render('checkbox')
        }
    });

layui.use('laydate', function(){
  var laydate = layui.laydate;
  //同时绑定多个
  lay('.test-item').each(function(){
    laydate.render({
      elem: this
      ,trigger: 'click'
      ,type: 'datetime'
    });
  });
  
})
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="请输入折扣" value="{$coupon.money}" > </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="请输入抵扣金额" value="{$coupon.money}" > </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 = [];//产品名称和数量

    var productInfo = "{$coupon['product_info']}";
    if(productInfo&&productInfo!==undefined){
        var productInfoArr = productInfo.split(';');
        $.each(productInfoArr,function(key,val){
            if(val){
                var the_array = val.split('|');
                var the_obj = {};
                the_obj.product = the_array[0];
                the_obj.num = the_array[1];
                p_array.push(the_obj);
            }
        })

    }

    console.log(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 '标题也太短了吧';
      }
    },
    content: function(value){
      if (value.length > 100) {
        return '描述字体过多'
      }
    }
    ,pass: [/(.+){6,50}$/, '密码必须6到50位']
    ,money:function(value){
    	var typeid = $("select[name=discounttype]").val();
    	var value = parseInt(value);
    	if(typeid==2 && value>100){
    		return '折扣值请保持在0-100内,100表示不打折';
    	}
    }
  });

  //事件监听
  form.on('select', function(data){
    console.log(this);
  });
 
  form.on('radio', function(data){
    console.log(data);
  });
  
  //监听提交
  form.on('submit(*)', function(data){
	title = $("input[name=tilie]").val();
	var formid = document.getElementById("editform");
	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,
			});
		}
	}})
    return false;
  });
});

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

// 图片显示处理函数
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>