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

.layui-input-block {

    margin-left: 129px;
    min-height: 35px;

}
</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="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" id="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-block">
                        <!--{volist name="couponlist" id="vv"}-->
                        <!--<input type="checkbox" name="couponid" title="{$vv.title}" value="{$vv.id}">-->
                        <!--{/volist}-->
                    </div>
                </div>

                {volist name="couponlist" id="vv"}
                <div class="layui-form-item">
                    <label class="layui-form-label">
                    </label>
                    <div class="layui-input-block coupon-div" style="display:flex;flex-direction: row;">
                        <div style="width: 20%;">
                            <input type="checkbox" name="couponid[]" title="{$vv.title}" value="{$vv.id}" lay-filter="coupon_id">
                        </div>

                        <div style="width: 10%;display: none;" class="num">
                            <input type="number" class="layui-input" name="num[{$vv.id}]" value="1" style="width: 90px;">
                        </div>

                        <div class="unit" style="display: none;">
                            <p style="margin-top: 3px;">张</p>
                        </div>
                    </div>
                </div>
                {/volist}

                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input type="text" name="sort" class="layui-input" id="sort" lay-verify="required|title" required placeholder="" value="100" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" style="height:100px">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="*" id="btn">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>



layui.use('form', function(){
    var form = layui.form;

  //自定义验证规则
    form.verify({
        title: function(value){
            if(value.length < 2){
                return '标题也太短了吧';
            }
        },
        couponid: function(value){

        }
    });


    form.on('checkbox(coupon_id)', function(data){
        var parent_div = $(this).parents('.coupon-div');
        console.log(parent_div);
        //勾选
        if(data.elem.checked){
            parent_div.find('.num').css('display','inline-block');
            parent_div.find('.unit').css('display','inline-block');
        }else{
            //取消勾选
            parent_div.find('.num').css('display','none');
            parent_div.find('.unit').css('display','none');

        }

    });


    //监听提交
  form.on('submit(*)', function(data){

      var formData = $('#addform').serialize();
      //console.log(formData);return false;
      var title = $("#title").val();
      var sort  = $("#sort").val();

      var coupon = new Array();
      $("input:checkbox[name='couponid[]']:checked").each(function(i){
         coupon[i] = $(this).val();
      });
      if(coupon.length<=0){
          layer.alert("请选择卡券");
          return false;
      }
      //coupon = JSON.stringify(coupon);
    $.ajax({
        type:'post',
        url:'{:url("couponbag/add")}',
        data:formData,
        //data:{'title':title,'couponid':coupon,'sort':sort},
        success:function(s){
            if(s.code==200){
                layer.open({
                    content: '恭喜您添加成功！',
                    btn: ['确认'],
                    yes: function(index, layero) {
                        window.location.href="{:url('vip/couponbag/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>