{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;}
    .ns-form {margin-top: 0;}
    .ns-item-block-hover-a {cursor: pointer;}
    .ns-input-box {position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
    .layui-form-item .layui-form-checkbox[lay-skin=primary] {margin-top: 0;}
    .ns-item-content-desc{display:inline-block;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}
    .ns-item-block-parent .ns-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 ns-form">
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>套餐名称：</label>
        <div class="layui-input-block">
            <input name="group_name" type="text" lay-verify="required" class="layui-input ns-len-long" value="{$group_info.group_name}" autocomplete="off">
        </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 {if !empty($info.image)}hover{/if}">
                    <div class="ns-upload-default" id="group_image">
                        {if empty($group_info.image)}
                        <div class="upload">
                            <img src="__STATIC__/img/upload_img.png" />
                            <p>点击上传</p>
                        </div>
                        {else/}
                        <div id="preview_group_image" class="preview_img">
                            <img layer-src src="{:img($group_info.image)}" class="img_prev"/>
                        </div>
                        {/if}
                    </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" value="{$group_info.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="{$group_info.store_number}" class="layui-input ns-len-long">
        </div>
        <div class="ns-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="{$group_info.leader_number}" class="layui-input ns-len-long">
        </div>
        <div class="ns-word-aux">
            <p>限制社区团购团长数量,0无限制</p>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">收费模式：</label>
        <div class="layui-input-block">
            <div class="layui-input-inline">
                <input type="radio" name="fee_type" value="fixed_fee" title="固定费率" {if $group_info.fee_type=='fixed_fee'}checked{/if}>
                <input type="radio" name="fee_type" value="split_fee"  title="成交分佣" {if $group_info.fee_type=='split_fee'}checked{/if}>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <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" value="{$group_info.fee_commission}"  lay-verify="required" value="0" autocomplete="off" class="layui-input ns-len-short">
            </div>%
        </div>
        <div class="ns-word-aux">
            <p>如果选择分佣模式按照订单成交额进行分佣比例，按照百分百 如百分之一 填写：1 可保留两位小数</p>
        </div>
    </div>

    <div class="layui-form-item distribution-index">
        <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="{$group_info.fee}" 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="week" {if $group_info.unit == 'week'} selected {/if}>周</option>
                    <option value="month" {if $group_info.unit == 'month'} selected {/if}>月</option>
                    <option value="year" {if $group_info.unit == 'year'} selected {/if}>年</option>
                </select>
            </div>
        </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="上架" {if $group_info.status == 1} checked {/if} />
                <input type="radio" name="status" value="0" lay-filter="level" title="下架" {if $group_info.status == 0} checked {/if}/>
            </div>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">云市场关联ID：</label>
        <div class="layui-input-block">
            <textarea name="cloud_ids" class="layui-textarea ns-len-long">{$group_info.cloud_ids}</textarea>
        </div>
        <div class="ns-word-aux">
            <p>填写云市场关联产品ID,多个产品使用英文半角','分割开</p>
        </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 ns-len-long">{$group_info.desc}</textarea>
        </div>
    </div>

    <div class="layui-form-item layui-form-text" id="promotion_list">
        <div id="promotion">
            <label class="layui-form-label">店铺营销：</label>
            <div class="layui-input-block">
                <div class="site_list ns-item-block-parent ns-item-five">
                    {foreach $promotions as $promotion}
                    {if  condition="$promotion['show_type'] eq 'shop'"}
                    <a class="ns-item-block ns-item-block-hover-a">
                        <div class="ns-item-block-wrap">
                            <div class="ns-item-pic">
                                <img src="{:img($promotion['icon'])}" />
                            </div>
                            <div class="ns-item-con">
                                <div class="ns-item-content-title">{$promotion['title']}</div>
                                <div class="ns-item-content-title"><span style="color: rgba(250,97,36,0.85)">代理价:{$promotion['saas_price'][$level_agent]}元/每年</span></div>
                                <p class="ns-item-content-desc">{$promotion['description']}</p>
                            </div>
                        </div>
                        <div class="ns-input-box">
                            <input type="checkbox"  data-price="{$promotion['saas_price'][$level_agent]}"  {if condition="$promotion['is_checked']"} checked {/if} value="{$promotion['name']}" class="ns-input-checkbox" lay-filter="is_checked" lay-skin="primary">
                        </div>
                    </a>
                    {/if}
                    {/foreach}
                </div>
            </div>
        </div>

        <div id = "admin">
            <label class="layui-form-label">平台推广：</label>
            <div class="layui-input-block">
                <div class="site_list ns-item-block-parent ns-item-five">
                    {foreach $promotions as $promotion}
                    {if  condition="$promotion['show_type'] eq 'admin'"}
                    <a class="ns-item-block ns-item-block-hover-a">
                        <div class="ns-item-block-wrap">
                            <div class="ns-item-pic">
                                <img src="{:img($promotion['icon'])}" />
                            </div>
                            <div class="ns-item-con">
                                <div class="ns-item-content-title">{$promotion['title']}</div>
                                <div class="ns-item-content-title"><span style="color: rgba(250,97,36,0.85)">代理价:{$promotion['saas_price'][$level_agent]}元/每年</span></div>
                                <p class="ns-item-content-desc">{$promotion['description']}</p>
                            </div>
                        </div>

                        <div class="ns-input-box">
                            <input type="checkbox"  data-price="{$promotion['saas_price'][$level_agent]}"  {if condition="$promotion['is_checked']"} checked {/if} value="{$promotion['name']}" class="ns-input-checkbox" lay-filter="is_checked" lay-skin="primary">
                        </div>
                    </a>
                    {/if}
                    {/foreach}
                </div>
            </div>
        </div>

        <div id="member">
            <label class="layui-form-label">会员互动：</label>
            <div class="layui-input-block">
                <div class="site_list ns-item-block-parent ns-item-five">
                    {foreach $promotions as $promotion}
                    {if  condition="$promotion['show_type'] eq 'member'"}
                    <a class="ns-item-block ns-item-block-hover-a">
                        <div class="ns-item-block-wrap">
                            <div class="ns-item-pic">
                                <img src="{:img($promotion['icon'])}" />
                            </div>
                            <div class="ns-item-con">
                                <div class="ns-item-content-title">{$promotion['title']}</div>
                                <div class="ns-item-content-title"><span style="color: rgba(250,97,36,0.85)">代理价:{$promotion['saas_price'][$level_agent]}元/每年</span></div>
                                <p class="ns-item-content-desc">{$promotion['description']}</p>
                            </div>
                        </div>

                        <div class="ns-input-box">
                            <input type="checkbox"  data-price="{$promotion['saas_price'][$level_agent]}" {if condition="$promotion['is_checked']"} checked {/if} value="{$promotion['name']}" class="ns-input-checkbox" lay-filter="is_checked" lay-skin="primary">
                        </div>
                    </a>
                    {/if}
                    {/foreach}
                </div>
            </div>
        </div>
        <div id="tool">
            <label class="layui-form-label">应用工具：</label>
            <div class="layui-input-block">
                <div class="site_list ns-item-block-parent ns-item-five">
                    {foreach $promotions as $promotion}
                    {if  condition="$promotion['show_type'] eq 'tool'"}
                    <a class="ns-item-block ns-item-block-hover-a">
                        <div class="ns-item-block-wrap">
                            <div class="ns-item-pic">
                                <img src="{:img($promotion['icon'])}" />
                            </div>
                            <div class="ns-item-con">
                                <div class="ns-item-content-title">{$promotion['title']}</div>
                                <div class="ns-item-content-title"><span style="color: rgba(250,97,36,0.85)">代理价:{$promotion['saas_price'][$level_agent]}元/每年</span></div>
                                <p class="ns-item-content-desc">{$promotion['description']}</p>
                            </div>
                        </div>
                        <div class="ns-input-box">
                            <input type="checkbox"  data-price="{$promotion['saas_price'][$level_agent]}"  {if condition="$promotion['is_checked']"} checked {/if} value="{$promotion['name']}" class="ns-input-checkbox" lay-filter="is_checked" lay-skin="primary">
                        </div>
                    </a>
                    {/if}
                    {/foreach}
                </div>
            </div>
        </div>
    </div>
    <div class="ns-form-row">
        <button class="layui-btn  ns-bg-color " lay-submit lay-filter="save">保存</button>
        <button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
    </div>
    <input name="group_id" type="text"  class="layui-input layui-hide" value="{$group_info.group_id}">
</div>
{/block}
{block name="script"}
<script>
    var promotion_items = $("#promotion a").length,
        extend_items = $("#admin a").length,
        tool_item = $('#tool a').length,
        interaction_items = $("#member a").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();
    }
    layui.use('form', function() {
        var form = layui.form,
            total_price=0,
            repeat_flag = false;//防重复标识
            form.render();
        $(".ns-item-block").each(function() {
            var checkCon = $(this).find(".ns-input-checkbox");
            if($(checkCon).is(':checked')){
                total_price +=parseFloat($(checkCon).attr('data-price'),2)
            }
            $(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(".ns-item-block").click();
        })
        form.on('submit(save)', function (data) {
            if (repeat_flag) return;
            repeat_flag = true;
            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();
            $.ajax({
                url: ns.url("saasagent/shop/setting/editmeal"),
                data: data.field,
                type: "POST",
                dataType: "JSON",
                success: function (res) {
                    repeat_flag = false;
                    if (res.code == 0) {
                        layer.confirm('编辑成功', {
                            title:'操作提示',
                            btn: ['返回列表', '继续操作'],
                            yes: function(){
                                location.href = ns.url("saasagent/shop/setting/meallist")
                            },
                            btn2: function() {
                                location.reload();
                            }
                        })
                    }else{
                        layer.msg(res.message);
                    }
                }
            });
        });
        //表单验证
        form.verify({
            flo: function (value) {
                console.log(total_price)
                console.log(value)
                if (parseFloat(value,2) < total_price) {
                    return '年费不能小于平台定价！';
                }
                var arrMen = value.split(".");
                var val = 0;
                if (arrMen.length == 2) {
                    val = arrMen[1];
                }
                if (val.length > 2) {
                    return '年费最多可保留两位小数！'
                }
            }
        });
        $("#yprice").html(total_price)
    });
    function datePick(date_num,event_obj){
        $(".date-picker-btn").removeClass("selected");
        $(event_obj).addClass('selected');
        $("input[name=expire_time]").val(date_num);
    }
    //跳转到店铺列表
    function back() {
        location.href = ns.url("saasagent/shop/setting/meallist")
    }
</script>
{/block}