{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="" method="post" id="editform" enctype="multipart/form-data">
                    <input type="hidden" id="id" name="id" value="{$couponbag.id}">
                    <div class="layui-form-item">
                        <label class="layui-form-label">卡包名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" id="title" value="{$couponbag.name}" 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}" {if condition="$vv.checked eq 1"}checked{/if}>-->
                            <!--{/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" {if condition="in_array($vv.id,$coupon_id)"}checked{/if}>
                            </div>

                            {if condition="in_array($vv.id,$coupon_id)"}
                                <div style="width: 10%;" class="num">
                                    <input type="number" class="layui-input" name="num[{$vv.id}]" value="{$num[$vv.id]}" style="width: 90px;">
                                </div>

                                <div class="unit" >
                                    <p style="margin-top: 3px;">张</p>
                                </div>
                            {else}
                                <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>
                            {/if}


                        </div>
                    </div>
                    {/volist}



                    <div class="layui-form-item">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-block">
                            <input type="text" name="sort" value="{$couponbag.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 '标题也太短了吧';
            }
        },

    });

    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 = $('#editform').serialize();


    var title  = $("#title").val();
    var sort  = $("#sort").val();
	var id     = $("#id").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/edit")}',
        //data:{'title':title,'couponid':coupon,'sort':sort,'id':id},
        data:formData,
        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;
  });
});
 
</script>
</body>
</html>