{extend name="app/shop/view/base.html"/}
{block name="resources"}
<style>
    .tips{
        font-size: 13px;
        color: #cccccc;
    }
    .hide{
        display: none;
    }
    .goods-list{
        width: calc(100% - 230px);
        display: inline-flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        margin-left: 200px;
        margin-top: 10px;
    }
    .goods-list .goods-item{
        position: relative;
        margin-top: 10px;
        margin-right: 10px;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border: 1px solid #cccccc;
        padding: 10px;
    }
    .goods-list .goods-item .image{
        width: 80px;
        height: 80px;
        margin-right: 10px;
    }
    .goods-list .goods-item .image .image-img{
        width: 100%;
        height: 100%;
    }
    .goods-list .goods-item .info{
        width: 150px;
    }
    .goods-list .goods-item .info .name{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical; /*设置对齐模式*/
        -webkit-line-clamp: 2; /*设置多行的行数*/
    }
    .goods-list .goods-item .del-button{
        position: absolute;
        top: 0;
        right: 0;
        font-size: 25px;
        color: #e30000;
        cursor: pointer;
    }
</style>
{/block}

{block name="body"}
<div class="layui-form form-wrap" lay-filter="formInfo">
    <div class="layui-form-item" id="upgrade_goods">
        <label class="layui-form-label img-upload-lable short-label">选择商品：</label>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn select-member" onclick="selectGoods()">选择商品</button>
        </div>
        <div class="goods-list" id="goodsList"></div>
    </div>
    <div class="params-content hide">
        <div class="layui-form-item">
            <label class="layui-form-label img-upload-lable short-label"><span class="required">*</span>订单数量：</label>
            <div class="layui-input-inline">
                <input type="number" name="info[order_num]" value="1" lay-verify="required|number" min="1" placeholder="请输入订单数量" autocomplete="off" class="layui-input len-long">
                <div class="tips">系统会产生指定的订单数量</div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label img-upload-lable short-label"><span class="required">*</span>商品数量：</label>
            <div class="layui-input-inline">
                <input type="number" name="info[goods_num]" value="1" lay-verify="required|number" min="1" placeholder="请输入商品数量！" autocomplete="off" class="layui-input len-long">
                <div class="tips">每份订单中商品的数量</div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label img-upload-lable short-label"><span class="required">*</span>商品价格：</label>
            <div class="layui-input-inline">
                <input type="number" name="info[unit_price]" value="0" lay-verify="required|number" placeholder="请单件商品的价格！" autocomplete="off" class="layui-input len-long">
                <div class="tips">首单单个商品卖出价格</div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label img-upload-lable short-label"><span class="required">*</span>初始均价：</label>
            <div class="layui-input-inline">
                <input type="number" name="info[start_price]" value="0" lay-verify="required|number" placeholder="请输入初始价格！" autocomplete="off" class="layui-input len-long">
                <div class="tips">用户裂变起始价格<span id="maxAverage">0</span></div>
            </div>
        </div>
    </div>
    <!--提交按钮-->
    <div class="form-row">
        <!--其他内容-->
        <input type="hidden" name="member_id" value="{$member_id}" />
        <!--操作按钮-->
        <button class="layui-btn" lay-submit lay-filter="save">提交</button>
        <button class="layui-btn layui-btn-primary" onclick="closeIframe()">关闭</button>
    </div>
</div>
{/block}
{block name="script"}
<script>
    var _thisIndex,form,repeat_flag = false,goods_info = {};
    $(function () {
        // 基本参数
        _thisIndex = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        // 表单内容
        layui.use(['form'], function() {
            form = layui.form;
            form.render();
            // 表单提交
            form.on('submit(save)', function(data){
                var field = data.field;
                // 判断信息是否完整
                if(!field['info[goods_id]'] || parseInt(field['info[goods_id]']) <= 0){
                    layer.msg('请选择商品！');
                    return false;
                }
                // if(parseFloat(field['info[unit_price]']) < parseFloat(goods_info['price'])){
                //     layer.msg('商品价格不能低于售卖价格！');
                //     return false;
                // }
                // if(parseFloat(field['info[start_price]']) >= parseFloat(goods_info['market_price'])){
                //     console.log(field['info[unit_price]'],goods_info['market_price']);
                //     layer.msg('商品价格必须低于原价(划线价)！');
                //     return false;
                // }
                // 数据提交
                let tips = '确认赠送当前用户[' + field['info[order_num]'] + ']个订单，每个订单拥有[' + field['info[goods_num]'] +']个商品';
                layer.confirm(tips, {icon: 3, title:'提示'}, function(index){
                    layer.close(index);
                    if(repeat_flag) return;
                    //repeat_flag = true;
                    $.ajax({
                        type: 'POST',
                        dataType: 'JSON',
                        url: ns.url("futures://shop/user/sendGoods"),
                        data: field,
                        async: false,
                        success: function(res){
                            repeat_flag = false;
                            if (res.code == 0) {
                                layer.alert('赠送成功', function(index){
                                    parent.layer.close(_thisIndex);
                                });
                            }else{
                                layer.msg(res.message);
                            }
                        }
                    })
                });
            });
        });
    });
    // 点击关闭弹框
    function closeIframe() {
        parent.layer.close(_thisIndex); //再执行关闭
    }
    // 选择商品
    function selectGoods(){
        var body;
        editIframe = layer.open({
            type: 2,
            title: '选择商品',
            skin: 'layer-tips-class',
            area: ['80%','90%'],
            content: ns.url("/shop/goods/selectGoods"),
            success: function (layero, index) {
                body = layui.layer.getChildFrame('body', index);//获取子窗体 body内容
            },
            end: function () {
                var info = body.contents().find("#selectGoodsInfo").val(); //获取input的内容
                if(info){
                    // 信息记录
                    goods_info = info = JSON.parse(info);
                    $("#maxAverage").html(info.market_price);
                    $("[name='info[start_price]']").val(info.price);
                    $(".params-content").removeClass('hide');
                    rendering(info);
                }
            }
        });
    }
    // 渲染商品信息
    function rendering(info){
        let html = '<div class="goods-item" id="goods_list_'+info['goods_id']+'">\n' +
            '                <input type="hidden" name="info[goods_id]" value="'+info['goods_id']+'" />\n' +
            '                <div class="image">\n' +
            '                    <img class="image-img" src="'+info['goods_image']+'" />\n' +
            '                </div>\n' +
            '                <div class="info">\n' +
            '                    <div class="name">'+info['goods_name']+'</div>\n' +
            '                    <div class="id">ID：'+info['goods_id']+'</div>\n' +
            '                </div>\n' +
            '            </div>';
        $("#goodsList").html(html)
    }
</script>
{/block}