{extend name="base"/}
{block name="resources"}
<style>
    .body-content {min-height: 630px;}
    .combo-box{width: 1000px;text-align: center;padding-top: 50px;padding-bottom: 50px;margin: 0 auto;}
    .combo-template{display: flex;flex-wrap: wrap;margin: 50px auto 0; }
    .combo-template li{width: 227px;height: 500px;padding: 30px 0 20px;margin: 0 10px 20px;text-align: center;border: 1px solid #f2f2f2;position: relative;}
    .combo-template .item-title{margin-top: 3px;font-size: 20px;color: #000;line-height: 1;}
    .combo-template .item-price{color: #999;font-size: 14px;width: 227px;height: 45px;line-height: 45px;cursor: pointer;}
    .combo-template .item-price span{font-size: 30px;}
    .combo-template .item-content{display: flex;align-items: end;flex-direction: column;border-top: 1px solid rgb(242, 242, 242);margin: 0 10px;padding: 26px 18px 0;height: 275px;overflow: hidden;}
    .combo-template .item-content > .title{color: #777;margin-bottom: 10px;line-height: 22px;}
    .combo-template .item-content span{font-size: 12px;color: #999;line-height: 22px;}
    .combo-template .item-content .exist-addon{color: #646566;}
    .combo-template .item-content .unselected{color: #ccc;}
    .combo-template .item-content span i{font-style: normal;margin-right: 5px;}
    .combo-template .item-btn{display: inline-block;width: 95px;border: 1px solid transparent;height: 32px;line-height: 32px;margin-top: 20px;cursor: pointer;}
    .combo-template .item-detail{border-color: transparent;position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);width: 160px;height: 40px;line-height: 40px !important;font-size: 16px;}
    .item-desc{font-size: 12px;color: #646566;padding: 0 20px;margin: 15px 0;line-height: 20px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;line-clamp: 3;-webkit-box-orient: vertical;white-space: normal;word-break: break-all;height: 60px !important;}
    .iconiconangledown, .iconiconangledown-copy{font-size: 30px;color: #999999;cursor: pointer;}
    .purchase-page{display: flex;width: 615px;margin: 35px auto;color: #333;}
    .purchase-page .purchase-img{display: flex;justify-content: center;align-items: center;width: 85px;height: 85px;margin-right: 20px;}
    .purchase-page .purchase-img img{max-width: 100%;max-height: 100%;}
    .purchase-page .purchase-content{flex: 1;}
    .purchase-page .purchas-title{font-size: 18px;color: #323233;line-height: 24px;margin-bottom: 8px;}
    .purchase-page .purchas-desc{color: #969799;line-height: 20px;margin-bottom: 10px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
    .purchase-page .purchas-price span:nth-of-type(2){}
    .purchase-page .purchas-period, .purchase-page .purchas-shop{margin-top: 20px;}
    .purchase-page .purchas-period .period-title, .purchase-page .purchas-shop .shop-title{font-size: 16px;}
    .purchase-page .purchas-period .period-content{display: flex;margin-top: 10px;}
    .purchase-page .purchas-period .period-content li{width: 122px;height: 36px;line-height: 36px;text-align: center;border: 1px solid #e5e5e5;cursor: pointer;}
    .purchase-page .purchas-period .period-content li + li{margin-left: 5px;}
    .purchase-page .purchas-shop .shop-content{display: flex;flex-direction: column;margin-top: 10px;padding: 20px;border: 1px solid #e5e5e5;box-sizing: border-box;}
    .purchase-page .purchas-shop .shop-content input{padding-left: 10px;border: 1px solid #e5e5e5;height: 30px;line-height: 30px;width: 140px;}
    .purchase-page .purchas-shop .shop-content-between{display: flex;align-items: center;justify-content: space-between;height: 45px;}
    .purchase-page .purchas-shop .shop-content-between .content{display: flex;align-items: center;justify-content: space-between;width: 170px;}
    .purchase-page .purchas-shop .shop-content-between .content span{display: inline-block;width: 80px;text-align: center;}
    .purchase-page .purchas-shop .shop-content-state{margin-top: 10px;color: #9f9fa1;}
    .purchase-page .detail-operation{margin-top: 50px;display: flex;justify-content: flex-end;align-items: center;}
    .purchase-page .detail-operation .total{margin-right: 10px;}
    .purchase-page .detail-operation .total span{font-size: 18px;}
    .package-empty {text-align: center;}
    .package-empty img {width: 260px;margin-top:150px;}
    .package-empty .text {font-size: 14px;margin-top: 30px;color: #666}
</style>
{/block}
{block name="main"}
{if $shop_status neq 1}
    {notempty name="$addon_list"}
        <div class="combo-box">
            <h1>店铺套餐</h1>
            <ul class="combo-template">
                {foreach $addon_list as $addon_item}
                <li class="combo-item">
                    <div class="item-title">{$addon_item.group_name}</div>
                    <p class="item-desc">{$addon_item.desc}</p>
                    <div class="item-content">
                        <p class="title">营销应用：</p>
                        {foreach $addon_item.exist_addon_list as $addon_name}
                        <span class="exist-addon"><i class="text-color">√</i>{$addon_name}</span>
                        {/foreach}
                        {foreach $addon_item.noexist_addon_list as $addon_name}
                        <span><i class="red-color">×</i>{$addon_name}</span>
                        {/foreach}
                    </div>
                    {if count($addon_item.exist_addon_list) + count($addon_item.noexist_addon_list) > 11}
                    <span class="click-show" onclick="allShow(this)"><i class="iconfont iconiconangledown"></i></span>
                    <span class="click-hide layui-hide" onclick="allHide(this)"><i class="iconfont iconiconangledown-copy"></i></span>
                    {/if}
                    <button {if $shop_info.group_id==$addon_item.group_id}  disabled {/if} class="layui-btn layui-btn-primary text-color border-color item-buy item-detail" data-group-fee="{$addon_item.fee}" data-group-id="{$addon_item.group_id}">￥<span class="">{$addon_item.fee}</span>/{if $addon_item.unit == 'week'} 周 {elseif $addon_item.unit == 'month'} 月 {elseif $addon_item.unit == 'year'} 年 {elseif $addon_item.unit == 'permanent'}永久{/if}</button>
                </li>
                {/foreach}
            </ul>
        </div>
        <div class="purchase-plan">
            {foreach $addon_list as $addon_item}
            <div class="purchase-page layui-form layui-hide" id="detail_group_id_{$addon_item.group_id}">
                <div class="purchase-img">
                    <img src="{:img($addon_item.image)}" onerror=src="SHOP_IMG/shop.png" />
                </div>
                <div class="purchase-content">
                    <h2 class="purchas-title"><span class="purchas-price text-color">{$addon_item.fee}元/{if $addon_item.unit == 'week'} 周 {elseif $addon_item.unit == 'month'} 月 {elseif $addon_item.unit == 'year'} 年 {/if}</span></h2>
                    <p class="purchas-desc">{$addon_item.desc}</p>
                    <div class="purchas-shop">
                        <div class="shop-title">设置套餐</div>
                        <div class="shop-content">
                            <div class="shop-content-between opening-hours">
                                <span><span class="required">*</span>套餐时长</span>
                                <span class="content"><input type="number" name="num" value="1" />{if $addon_item.unit == 'week'} 周 {elseif $addon_item.unit == 'month'} 月 {elseif $addon_item.unit == 'year'} 年 {elseif $addon_item.unit == 'permanent'}永久{/if}<input type="hidden" name="unit" value="{$addon_item.unit}" /></span>
                            </div>
                        </div>
                    </div>
                    <div class="detail-operation">
                        <div class="total">
                            合计：<span class="red-color">￥{$addon_item.fee}</span>
                        </div>
                        <button class="layui-btn bg-color" lay-submit lay-filter="submit-order-{$addon_item.group_id}" >提交订单</button>
                    </div>
                </div>
            </div>
            {/foreach}
        </div>
    {else/}
    <div class="package-empty">
        <img src="SHOP_IMG/package-empty.png" alt="">
        <p class="text">暂无套餐</p>
    </div>
    {/notempty}
{else/}
    <div class="package-empty">
        <img src="SHOP_IMG/package-empty.png" alt="">
        <p class="text">当前店铺无需进行续费</p>
    </div>
{/if}
{/block}
{block name="script"}
<script>
    var groupId,groupFee;
    //鼠标移出
    $("body").on("mouseleave", ".combo-item", function () {
        $(this).removeClass("border-color");
        $(this).find("button").removeClass("bg-color");
        $(this).find("button").addClass("layui-btn-primary");
        $(this).find("button").addClass("text-color");
    });
    //鼠标移入
    $("body").on("mouseenter ", ".combo-item", function () {
        $(this).addClass("border-color");
        $(this).find("button").addClass("bg-color");
        $(this).find("button").removeClass("layui-btn-primary");
        $(this).find("button").removeClass("text-color");
    });
    // 展开全部
    function allShow(obj) {
        var len = $(obj).siblings(".item-content").find("span").length;
        var h = $(obj).siblings(".item-content").find("span").height();  // 每一个span的高度
        var hDiv = $(obj).siblings(".item-content").height();  // 外层div的高度
        var _hDiv = $(obj).parents(".combo-item").height();  // 父元素的高度
        var _h = h * (len - 11);
        $(obj).siblings(".item-content").animate({
            height: hDiv + _h + 'px',
        });
        $(obj).parents(".combo-item").animate({
            height: _hDiv + _h + 'px',
        });
        $(obj).addClass("layui-hide");
        $(obj).siblings(".click-hide").removeClass("layui-hide");
    }

    // 收起
    function allHide(obj) {
        var len = $(obj).siblings(".item-content").find("span").length;
        var h = $(obj).siblings(".item-content").find("span").height();  // 每一个span的高度
        var hDiv = $(obj).siblings(".item-content").height();  // 外层div的高度
        var _hDiv = $(obj).parents(".combo-item").height();  // 父元素的高度
        var _h = h * (len - 11);
        console.log(_hDiv);
        $(obj).siblings(".item-content").animate({
            height: hDiv - _h + 'px',
        });
        $(obj).parents(".combo-item").animate({
            height: _hDiv - _h + 'px',
        });
        $(obj).addClass("layui-hide");
        $(obj).siblings(".click-show").removeClass("layui-hide");
    }

    layui.use('form', function(){
        var form = layui.form;
        /* 立即购买 */
        $("body").on("click",".item-buy",function(){
            groupId = $(this).attr('data-group-id');
            groupFee = $(this).attr('data-group-fee');
            detailOrder();
        });
        function detailOrder(){
            $(".combo-box").addClass("layui-hide");
            $("#detail_group_id_"+ groupId).removeClass("layui-hide").siblings().addClass("layui-hide");
            form.on('submit(submit-order-'+groupId+')', function(data){
                data.field.group_id = groupId;
				var _unit =  "";
				if (data.field.unit == 'week') {
					_unit = "周";
				} else if (data.field.unit == "month") {
					_unit = "月";
				} else if (data.field.unit == "year") {
					_unit = "年";
				}else if (data.field.unit == "permanent") {
                    _unit = "永久";
                }
				if (data.field.num < 1) {
					layer.msg("套餐使用时长不能小于1"+ _unit);
					return;
				}
                $.ajax({
                    type: 'POST',
                    url: ns.url("shop/index/renewexpiretime"),
                    data: data.field,
                    dataType: 'JSON',
                    success: function(res) {
                        if (res.code >= 0) {
                            location.href = ns.url('shop/index/orderconfirm', {out_trade_no:res.data});
                        }else{
                            layui.msg(res.message);
                        }
                    }
                });
            });
        }
    });

    //监听开店时长
    $(".opening-hours input").on("input propertychange",function(){
        var shopNum = $(this).val() ? $(this).val() : 0;
        shopNum = parseInt(shopNum);
        $(this).val(shopNum);

        var fee = (shopNum * groupFee).toFixed(2);

        $("#detail_group_id_"+groupId +" .total span").text("￥"+fee);
    });
</script>
{/block}