<!-- +---------------------------------------------------------------------- -->
<!-- | CRMEB [ CRMEB赋能开发者，助力企业发展 ] -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Copyright (c) 2016～2022 https://www.crmeb.com All rights reserved. -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权 -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Author: CRMEB Team <admin@crmeb.com> -->
<!-- +---------------------------------------------------------------------- -->
{extend name="public/container"}
{block name="head_top"}
<script type="text/javascript" src="{__PLUG_PATH}jquery.downCount.js"></script>
<script type="text/javascript" src="{__WAP_PATH}crmeb/js/car-model.js"></script>
{/block}
{block name="title"}{$store_combination.title}{/block}
{block name="content"}
<body style="background-color:#f5f5f5;">
    <!-- 拼客 -->
    <section class="pk-box" id="store_detail">
        <div class="comfirm-wrapper">
            <ul class="product_list">
                <li>
                    <div class="goods-img pk-list-img"><img src="{$store_combination.image}"></div>
                    <div class="goods-info pk-list-info">
                        <div class="goods-detail">
                            <p class="name">{$store_combination.title}</p>
                            <p class="pk-list-all"><em>{$pinkT.people}</em>人团·已团<em>{$store_combination.sales}</em>件</p>
                            <p class="carnum pk-list-carnum">
                                <span class="price">￥<em>{$pinkT.price}</em><span class="discount">拼团劲省<i><?php echo floatval($store_combination['product_price']-$pinkT['price']);?></i>元</span></span>
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 拼客人数 -->
        <div class="pk-number">
            <div class="pk-number-box">
                <ul>
                    <li>
                        <img src="{$pinkT.avatar}"/>
                        <div class="name">团长</div>
                    </li>
                    {volist name="pinkAll" id="vo"}
                        <li><img src="{$vo.avatar}"/></li>
                    {/volist}
                    <?php for ($i=1;$i<=$count;$i++){?>
                        <li class="unknown"></li>
                    <?php }?>
                </ul>
            </div>
            <div class="pk-number-con">
                <div class="pt-info">
                    {if condition="$userBool"}
                        <div class="pt-state pt-success">
                            <div class="pt-state-info">拼团成功</div>
                            <span>商家正在努力发货，请耐心等待</span>
                        </div>
                    {else/}
                    <div class="pt-state pt-error">
                        <div class="pt-state-info">拼团失败</div>
                        <span>退款中</span>
                    </div>
                    {/if}
                </div>
            </div>
        </div>
        <div class="model-bg"></div>
        <div class="template-pro-list">
            <div class="pro-title like-title"><i class="like-line"></i><span>你可能还喜欢</span><i class="like-line right"></i></div>
            <div class="item-box">
                <ul class="flex">
                    {volist name="store_combination_host" id="vo"}
                        <li>
                            <a href="{:Url('Store/combination_detail',array('id'=>$vo['id']))}">
                                <div class="picture"><img src="{$vo.image}" /></div>
                                <div class="pro-content">
                                    <div class="pro-name">{$vo.title}</div>
                                    <div class="pro-infos">
                                        <span class="price">￥{$vo.price}</span>
                                        <span class="count fr">已拼{$vo.sales}单</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                    {/volist}
                </ul>
            </div>
        </div>
        <quick-menu></quick-menu>
    </section>
    <script>
        $(document).ready(function() {
            $('.shares-btn').on('click', function(){
                $('.shares-model').css('display', 'block');
                $('.shares-model').on('click' , function(){
                    $(this).css('display', 'none');
                });
            });
            $('.shares-model').on('touchmove',function(e){
                e.preventDefault();
            })
            $('.count-time').downCount({
                date: $('.count-time').attr('data-time'),
                offset: +8
            });
        });
    </script>
    <script type="text/javascript">
        window.$product = <?php unset($storeInfo['description']); echo json_encode($storeInfo);?>;
        window.$pinkT = <?php echo json_encode($pinkT);?>;
        (function ($) {
            requirejs(['vue', 'axios', 'helper', 'store', 'quick'], function (Vue, axios, $h, storeApi){
                new Vue({
                    el: "#store_detail",
                    data: {
                        product: $product,
                        pinkT: $pinkT,
                        productValue: {},
                        productCardInfo: {},
                        status: {like: false, collect: false},
                        cartNum: 1
                    },
                    methods: {
                        goBuy: function () {
                            that = this;
                            storeApi.goBuy({
                                cartNum: that.cartNum,
                                uniqueId: 0,
                                productId: this.product.product_id,
                                combinationId: this.product.id
                            }, function (cartId) {
                                location.href = $h.U({
                                    c: 'store',
                                    a: 'combination_order',
                                    q: 'cartId='+cartId+'&pinkId='+that.pinkT.id
                                });
                            });
                        },
                        setProductCardInfo: function (info) {
                            info || (info = {});
                            this.$set(this, 'productCardInfo', {
                                image: info.image !== undefined ? info.image : this.product.image,
                                price: info.price !== undefined ? info.price : this.product.price,
                                stock: info.stock !== undefined ? info.stock : this.product.stock
                            });
                        },
                        pushMsg: function (msg, fn) {
                            $h.pushMsg(msg, fn)
                        },
                        init: function () {
                            $('.count-time').downCount({
                                date: $('.count-time').attr('data-time'),
                                offset: +8
                            });
                        },
                        getCartNum: function () {
                            var that = this;
                            storeApi.getCartNum(function (cartNum) {
                                that.cartNum = cartNum;
                            });
                        }
                    },
                    mounted: function () {
                        var wxApi = mapleWx($jssdk(), function () {
                            this.onMenuShareAll({
                                title: $product.store_name,
                                desc: $product.store_name,
                                imgUrl: location.origin + $product.image,
                                link: location.href
                            });
                        });
                        this.getCartNum();
                        this.init();
                        this.setProductCardInfo();
                    }
                });
            });
        })($);
    </script>
</body>
{/block}
