{layout name="layout2" /}
<style>
    .layui-form-label {
        color: #6a6f6c;
        width: 100px;
    }
    .layui-input-block {
        margin-left: 130px;
    }
    .tips{
        color: red;
    }
    .unit-tips{
        float: left;
        display: block;
        padding: 9px 0!important;
        line-height: 20px;
        margin-right: 10px;
    }
    .goods{
        display: none;
    }

</style>
<div class="layui-form" lay-filter="layuiadmin-form-coupon" id="layuiadmin-form-coupon" style="padding: 20px 30px 0 0;">
<!--    优惠券名称-->
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="tips">*</span>优惠券名称：</label>
        <div class="layui-input-inline">
            <input type="text" name="name" lay-verify="required" lay-verType="tips" placeholder="请输入优惠券名称" autocomplete="off" class="layui-input">
        </div>
    </div>
<!--    发放时间-->
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="tips">*</span>发放时间：</label>
        <div class="layui-input-inline">
            <input type="text"   name="send_time_start" class="layui-input time" autocomplete="off">
        </div>
        <div class="unit-tips">至</div>
        <div class="layui-input-inline">
            <input type="text"  name="send_time_end" class="layui-input time" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label><span style="color: #a3a3a3;font-size: 9px">优惠券开始发放和结束发放的时间</span>
    </div>
<!--     优惠券面额-->
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="tips">*</span>优惠券面额：</label>
        <div class="layui-input-inline">
            <input type="text"  lay-verify="required"  lay-verType="tips"  name="money"  placeholder="请输入优惠券面额" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">元</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label><span style="color: #a3a3a3;font-size: 9px">面额需大于0元，支持两位小数</span>
    </div>
<!--    发放总量-->
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="tips">*</span>发放总量：</label>
        <div class="layui-input-inline">
            <input type="radio" name="send_total_type" value="1" title="不限制数量" checked>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline" style="margin-right: 0px;width:auto">
                <input type="radio" name="send_total_type" value="2" title="发放">
            </div>
            <div class="layui-input-inline" style="width: 110px">
                <input type="number" name="send_total" class="layui-input">
            </div>
            <div class="unit-tips">张</div>
        </div>
    </div>
<!--    使用门槛-->
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="tips">*</span>使用门槛：</label>
        <div class="layui-input-inline">
            <input type="radio" name="condition_type" value="1" title="无使用门槛" checked>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline" style="margin-right: 0px;width: auto">
                <input type="radio" name="condition_type" value="2" title="订单满">
            </div>
            <div class="layui-input-inline" style="width: 110px">
                <input type="number" name="condition_money" class="layui-input">
            </div>
            <div class="unit-tips">元可用</div>
        </div>
    </div>
<!--    用券时间-->
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="tips">*</span>用券时间：</label>
        <div class="layui-input-inline" style="margin-right: 0px;width: auto">
            <input type="radio" name="use_time_type" value="1" title="固定时间" checked>
        </div>
        <div class="layui-input-inline">
            <input type="text"   name="use_time_start" class="layui-input time" autocomplete="off">
        </div>
        <div class="unit-tips">至</div>
        <div class="layui-input-inline">
            <input type="text"  name="use_time_end" class="layui-input time" autocomplete="off">
        </div>
        <div class="unit-tips">可用</div>
        <div class="layui-form-item" style="padding-top: 10px">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline" style="margin-right: 0px;width: auto">
                <input type="radio" name="use_time_type" value="2" title="领券当日起">
            </div>
            <div class="layui-input-inline" style="width: 110px">
                <input type="number" name="use_time" class="layui-input">
            </div>
            <div class="unit-tips">天内可用</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline" style="margin-right: 0px;width: auto">
                <input type="radio" name="use_time_type" value="3" title="领券次日起">
            </div>
            <div class="layui-input-inline" style="width: 110px">
                <input type="number" name="tomorrow_use_time" class="layui-input">
            </div>
            <div class="unit-tips">天内可用</div>
        </div>
    </div>
<!--    领取方式-->
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="tips">*</span>领取方式：</label>
        <div class="layui-input-inline" >
            <input type="radio" name="get_type" value="1" title="直接领取" checked >
            <div style="color: #a3a3a3;font-size: 9px;">用户可在首页、每日领券直接领取</div>
        </div>
        <div class="layui-input-inline">
            <input type="radio" name="get_type" value="2" title="指定发放" >
            <div style="color: #a3a3a3;font-size: 9px;">后台指定会员赠送优惠券</div>
        </div>
    </div>
<!--    领取次数-->
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="tips">*</span>领取次数：</label>
        <div class="layui-input-inline">
            <input type="radio" name="get_num_type" value="1" title="不限制领取次数" checked>
        </div>
        <div class="layui-form-item" style="padding-top: 10px">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline" style="margin-right: 0px;width: auto">
                <input type="radio" name="get_num_type" value="2" title="限制领取">
            </div>
            <div class="layui-input-inline" style="width: 110px">
                <input type="number" name="get_num" class="layui-input">
            </div>
            <div class="unit-tips">次</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline" style="margin-right: 0px;width: auto">
                <input type="radio" name="get_num_type" value="3" title="每天限制领取">
            </div>
            <div class="layui-input-inline" style="width: 110px">
                <input type="number"name="day_get_num" class="layui-input">
            </div>
            <div class="unit-tips">次</div>
        </div>
    </div>
<!--    适用商品-->
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="tips">*</span>适用商品：</label>
        <div class="layui-input-block">
            <input type="radio" name="use_goods_type" lay-filter="select-goods" value="1" title="全部商品可用" checked >
            <input type="radio" name="use_goods_type" lay-filter="select-goods" value="2" title="指定商品可用" >
            <input type="radio" name="use_goods_type" lay-filter="select-goods" value="3" title="指定商品不可用" >
        </div>
    </div>

    <div class="layui-form-item goods">
        <label class="layui-form-label"></label>
        <div class="layui-input-block ">
            <table id="goods_list" class="layui-table" lay-size="sm">
                <colgroup>
                    <col width="60px">
                </colgroup>
                <thead>
                <tr style="background-color: #f3f5f9">
                    <th style="width: 120px;text-align: center">商品信息</th>
                    <th style="width: 80px;text-align: center">价格</th>
                    <th style="width: 120px;text-align: center">库存</th>
                    <th style="width: 20px;text-align: center">操作</th>
                </tr>
                </thead>
                <tbody  class="goods_info">
                </tbody>
            </table>
        </div>
    </div>


    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="add-coupon-submit" id="add-coupon-submit" value="确认">
    </div>
</div>
<script>
    var goods_ids = [];
    layui.config({
        version:"{$front_version}",
        base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table','form','laydate'], function(){
        var $ = layui.$
            ,form = layui.form
            ,laydate = layui.laydate
            ,table = layui.table,
            use_goods_type = 1;


        lay('.time').each(function() {
            laydate.render({
                elem : this,
                type:'datetime',
                trigger : 'click',
                format: 'yyyy-MM-dd HH:mm:ss'
            });
        });
        form.on('radio(select-goods)', function (data) {
            var value = data.value;
            if(use_goods_type != value){
                $('.goods_info').html("");
                goods_ids = [];
            }
            $('.goods').hide();

            if(value != 1){
                layer.open({
                    type: 2
                    ,title: '选择商品'
                    ,content: '{:url("common/selectGoods")}'
                    ,area: ['90%', '90%']
                    ,btn: ['确认', '取消']
                    ,yes: function(index, layero){
                        var data = window["layui-layer-iframe" + index].callbackdata();
                        data.forEach(function(item,index,arr) {
                           if(goods_ids.indexOf(item.id) == -1) {
                               goods_ids.push(item.id);
                               var goods_html = ' <tr>\n' +
                                   '                    <td style="text-align: center">'+item.name+'</td>\n' +
                                   '                    <td style="text-align: center">'+item.price+'</td>\n' +
                                   '                    <td style="text-align: center">'+item.stock+'</td>\n' +
                                   '                    <td style="text-align: center"> <a class="layui-btn layui-btn-danger layui-btn-sm" data-id="'+item.id+'">删除</a>\n' +
                                   '                </tr>';
                               $('.goods_info').append(goods_html);
                           }

                        })
                        use_goods_type = value;
                        $('.goods').show();

                    }

                })
            }

        })

        //删除商品
        $(document).on('click','.layui-btn-danger',function () {
            var id = parseInt($(this).attr('data-id'));
            goods_ids.splice(goods_ids.indexOf(id),1);
            $(this).parent().parent().remove();

        })
    });
    var callbackdata = function () {
        return goods_ids;
    }
</script>