{extend name="app/shop/view/base.html"/}
{block name="resources"}
<style type="text/css">
    .tree-line{padding:10px 0;background:#ededed;margin-bottom:2px;line-height: 1.8;}
    .tree-line .layui-form{padding-left: 10px !important;}
    .tree-line .layui-form-checkbox{margin:0 10px !important;vertical-align:middle;}
    .form {margin-top: 0;}
    .item-block-hover-a {cursor: pointer;}
    .input-box {position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
    .layui-form-item .layui-form-checkbox[lay-skin=primary] {margin-top: 0;}
    .item-content-desc{display:inline-block;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}
    .item-block-parent .item-con {
        flex: 1;
        overflow: hidden;
        height: 55px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
</style>
{/block}
{block name="main"}
<div class="layui-form form">
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>套餐名称：</label>
        <div class="layui-input-block">
            <input type="text" name="group_name" lay-verify="required" autocomplete="off" class="layui-input len-long">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label img-upload-lable">封面：</label>
        <div class="layui-input-block img-upload">
            <div class="upload-img-block icon">
                <div class="upload-img-box">
                    <div class="upload-default" id="group_image">
                        <div class="upload">
                            <img src="__STATIC__/img/upload_img.png" />
                            <p>点击上传</p>
                        </div>
                    </div>
                    <div class="operation"  >
                        <div >
                            <i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
                            <i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
                        </div>
                        <div class="replace_img js-replace">点击替换</div>
                    </div>
                    <input type="hidden" name="group_image"/>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>门店数量：</label>
        <div class="layui-input-block">
            <input type="text" name="store_number" lay-verify="required" autocomplete="off" value="0" class="layui-input len-long">
        </div>
        <div class="word-aux">
            <p>限制门店数量,0代表无限制</p>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>商品数量：</label>
        <div class="layui-input-block">
            <input type="text" name="goods_number" lay-verify="required" autocomplete="off" value="0" class="layui-input len-long">
        </div>
        <div class="word-aux">
            <p>限制商品数量,0代表无限制</p>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>团长数量：</label>
        <div class="layui-input-block">
            <input type="text" name="leader_number" lay-verify="required" autocomplete="off" value="0" class="layui-input len-long">
        </div>
        <div class="word-aux">
            <p>限制社区团购团长数量,0无限制</p>
        </div>
    </div>

    <div class="layui-form-item distribution-index fee" >
        <label class="layui-form-label"><span class="required">*</span>设置价格：</label>
        <div class="layui-input-block">
            <div class="layui-input-inline">
                <input type="number" name="fee" class="layui-input" value=""  required  lay-verify="price"/>
            </div>
            <div class="layui-form-mid layui-word-aux">元/</div>
            <div class="layui-input-inline">
                <select name="unit" lay-filter="unit">
                    <option value="year">年</option>
                    <option value="month">月</option>
                    <option value="week">周</option>
                    <option value="day">天</option>
                    {if $agent_type!='Sitefee'}
                    <option value="permanent">永久</option>
                    {/if}
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item fee_commission">
        <label class="layui-form-label"><span class="required">*</span>分佣比例：</label>
        <div class="layui-input-block">
            <div class="layui-input-inline">
                <input type="text" name="fee_commission" lay-verify="required" value="0" autocomplete="off" class="layui-input len-short">
            </div>%
        </div>
        <div class="word-aux">
            <p>订单成交额进行分佣比例，按照百分百 如百分之一 填写：1 可保留两位小数</p>
        </div>
    </div>

    <div class="layui-form-item distribution-index">
        <label class="layui-form-label">是否上架：</label>
        <div class="layui-input-block">
            <div class="layui-input-inline">
                <input type="radio" name="status" value="1" lay-filter="level" title="上架"/>
                <input type="radio" name="status" value="0" lay-filter="level" title="下架" checked/>
            </div>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">描述：</label>
        <div class="layui-input-block">
            <textarea name="desc" class="layui-textarea len-long"></textarea>
        </div>
    </div>

    <div class="layui-form-item layui-form-text" id="promotion_list">
        <div id="promotion">
            <span class="layui-form-label">店铺营销：</span>
            <div class="layui-input-block">
                <div class="site_list item-block-parent item-five">
                    {foreach $promotions as $promotion}
                    {if  condition="$promotion['show_type'] eq 'shop'"}
                    <a class="item-block item-block-hover-a">
                        <div class="item-block-wrap">
                            <div class="item-pic">
                                <img src="{:img($promotion['icon'])}" />
                            </div>
                            <div class="item-con">
                                <div class="item-content-title">{$promotion['title']}</div>
                                <p class="item-content-desc">{$promotion['description']}</p>
                            </div>
                        </div>
                        <div class="input-box">
                            <input type="checkbox" value="{$promotion['name']}"  class="input-checkbox" lay-filter="is_checked" lay-skin="primary">
                        </div>
                    </a>
                    {/if}
                    {/foreach}
                </div>
            </div>
        </div>
        <div id="member">
            <span class="layui-form-label">会员互动：</span>
            <div class="layui-input-block">
                <div class="site_list item-block-parent item-five" >
                    {foreach $promotions as $promotion}
                    {if  condition="$promotion['show_type'] eq 'member'"}
                    <a class="item-block item-block-hover-a">
                        <div class="item-block-wrap">
                            <div class="item-pic">
                                <img src="{:img($promotion['icon'])}" />
                            </div>
                            <div class="item-con">
                                <div class="item-content-title">{$promotion['title']}</div>
                                <p class="item-content-desc">{$promotion['description']}</p>
                            </div>
                        </div>
                        <div class="input-box">
                            <input type="checkbox" value="{$promotion['name']}" class="input-checkbox" lay-filter="is_checked" lay-skin="primary">
                        </div>
                    </a>
                    {/if}
                    {/foreach}
                </div>
            </div>
        </div>
        <div id="tool">
            <span class="layui-form-label">应用模块：</span>
            <div class="layui-input-block">
                <div class="site_list item-block-parent item-five" >
                    {foreach $promotions as $promotion}
                    {if  condition="$promotion['show_type'] eq 'tool'"}
                    <a class="item-block item-block-hover-a">
                        <div class="item-block-wrap">
                            <div class="item-pic">
                                <img src="{:img($promotion['icon'])}" />
                            </div>
                            <div class="item-con">
                                <div class="item-content-title">{$promotion['title']}</div>
                                <p class="item-content-desc">{$promotion['description']}</p>
                            </div>
                        </div>
                        <div class="input-box">
                            <input type="checkbox" value="{$promotion['name']}"  class="input-checkbox" lay-filter="is_checked" lay-skin="primary">
                        </div>
                    </a>
                    {/if}
                    {/foreach}
                </div>
            </div>
        </div>
    </div>
    <div class="form-row">
        <button class="layui-btn  bg-color " lay-submit lay-filter="save">保存</button>
        <button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/html" id="storeImageTpl">
    {{# if(d.list.length){ }}
    {{# for(var i=0;i<d.list.length;i++){ }}
    <div class="item upload_img_square_item" data-index="{{i}}">
        <div class="img-wrap">
            <img src="{{ns.img(d.list[i],'small')}}" layer-src>
        </div>
        <div class="operation">
            <i title="图片预览" class="iconfont iconreview js-preview"></i>
            <i title="删除图片" class="layui-icon layui-icon-delete js-delete" data-index="{{i}}"></i>
            <div class="replace_img" data-index="{{i}}">点击替换</div>
        </div>
    </div>
    {{# } }}
    {{# if(d.list.length < d.max){ }}
    <div class="item js-add-image upload_img_square">+</div>
    {{# } }}
    {{# }else{ }}
    <div class="item js-add-image upload_img_square">+</div>
    {{# } }}
</script>
<script src="__STATIC__/ext/drag-arrange.js"></script>
<script>
    var storeImage = [];
    const STORE_IMAGE_MAX = 1;
    // var promotion_items = $("#promotion a").length,
    //     extend_items = $("#admin a").length,
    //     interaction_items = $("#member a").length,
    //     tool_item = $("#tool").length;
    // if (promotion_items == 0) {
    //     $("#promotion").hide();
    // }
    // if (extend_items == 0) {
    //     $("#admin").hide();
    // }
    // if (interaction_items == 0) {
    //     $("#member").hide();
    // }
    // if (tool_item == 0) {
    //     $("#tool").hide();
    // }
    var upload = new Upload({
        elem: '#group_image',
        post:"shop"
    });
    layui.use(['form','laytpl'], function() {
        var form = layui.form,
            laytpl = layui.laytpl,
            total_price=0,
            repeat_flag = false; //防重复
        form.render();
        // $(".item-block").each(function() {
        //     var checkCon = $(this).find(".input-checkbox");
        //     $(this).click(function() {
        //         if ($(checkCon).is(':checked')) {
        //             $(this).find(".layui-form-checkbox").removeClass("layui-form-checked");
        //             $(checkCon).prop("checked", false);
        //             total_price -=parseFloat($(checkCon).attr('data-price'),2)
        //             $("#yprice").html(total_price)
        //         } else {
        //             $(this).find(".layui-form-checkbox").addClass("layui-form-checked");
        //             $(checkCon).prop("checked", true);
        //             total_price +=parseFloat($(checkCon).attr('data-price'),2)
        //             $("#yprice").html(total_price)
        //         }
        //     })
        // })
        form.on("checkbox(is_checked)", function(data) {
            // if(data.elem.checked){
            //     total_price +=parseFloat(data.elem.getAttribute('data-price'),2)
            // }else {
            //     total_price -=parseFloat(data.elem.getAttribute('data-price'),2)
            // }
            // $("#yprice").html(total_price)
            $(data.elem).parents(".item-block").click();
        })

        form.on('radio(fee_type)', function (data) {
            var elem = data.elem; // 获得 radio 原始 DOM 对象
            var value = elem.value; // 获得 radio 值
            if(value=='fixed_fee'){
                $(".fee_commission").hide()
                $(".fee").show()
            }else {
                $(".fee_commission").show()
                $(".fee").hide()
            }
        });

        // 添加门店图片
        $("body").on("click", ".js-add-image", function () {
            openAlbum(function (data) {
                for (var i = 0; i < data.length; i++) {
                    if (storeImage.length < STORE_IMAGE_MAX) storeImage.push(data[i].pic_path);
                }
                refreshStoreImage();
            }, 5, 1);
        });

        //渲染门店图片
        function refreshStoreImage() {
            var store_image_template = $("#storeImageTpl").html();
            var data = {
                list: storeImage,
                max: STORE_IMAGE_MAX
            };
            laytpl(store_image_template).render(data, function (html) {
                $(".js-store-image").html(html);
                //加载图片放大
                loadImgMagnify();
                if (storeImage.length) {
                    //预览
                    $(".js-store-image .js-preview").click(function () {
                        $(this).parent().prev().find("img").click();
                    });
                    //图片删除
                    $(".js-store-image .js-delete").click(function () {
                        var index = $(this).attr("data-index");
                        storeImage.splice(index, 1);
                        refreshStoreImage();
                    });

                    // 拖拽
                    $('.js-store-image .upload_img_square_item').arrangeable({
                        //拖拽结束后执行回调
                        callback: function (e) {
                            var indexBefore = $(e).attr("data-index");//拖拽前的原始位置
                            var indexAfter = $(e).index();//拖拽后的位置
                            var temp = storeImage[indexBefore];
                            storeImage[indexBefore] = storeImage[indexAfter];
                            storeImage[indexAfter] = temp;
                            refreshStoreImage();
                        }
                    });
                }

                //最多传十张图
                if (storeImage.length < STORE_IMAGE_MAX) {
                    $(".js-add-image").show();
                } else {
                    $(".js-add-image").hide();
                }
            });
        }

        refreshStoreImage();

        form.on('submit(save)', function(data) {
            var obj = $("#promotion_list input:checked");
            var addon_array = [];
            for (var i = 0; i < obj.length; i++) {
                addon_array.push(obj.eq(i).val());
            }
            data.field.addon_array = addon_array.toString();
            data.field.ad_image = storeImage.toString();
            if(repeat_flag) return;
            repeat_flag = true;
            $.ajax({
                url: ns.url("saas://shop/group/addgroup"),
                data:data.field,
                dataType: 'JSON',
                type: 'POST',
                success: function(res) {
                    repeat_flag = false;
                    if (res.code == 0) {
                        layer.confirm('添加成功', {
                            title:'操作提示',
                            btn: ['返回列表', '继续添加'],
                            yes: function(){
                                location.href = ns.url("saas://shop/group/lists")
                            },
                            btn2: function() {
                                location.href = ns.url("saas://shop/group/addgroup")
                            }
                        });
                    }else{
                        layer.msg(res.message);
                    }
                }
            });
        });
    });
    //跳转到店铺列表
    function back() {
        location.href = ns.url("saas://shop/group/lists")
    }
</script>
{/block}