<template>
    <div class="success">
        <mt-popup
                v-model="shareVisible"
                class="refer-share"
                position="top">
            <img :src="shareUrl">
        </mt-popup>
        <div class="head">
            <div v-if="status === 0 && type === 1">
                <img :src="successIconUrl">开团成功
                <div class="sec">
                    快去邀请好友加入吧
                </div>
            </div>
            <div v-if=" status === 1 && type === 1">
                <img :src="successIconUrl">恭喜，已经拼单成功！
            </div>
            <div v-if="type === 0">
                <img :src="successIconUrl">恭喜，已经购买成功！
            </div>
        </div>
        <div class="shop-block">
            <div class="shop">
                <div class="img-block">
                    <img :src="groupDetail.share_info.shareIcon">
                </div>
                <div>
                    <div class="title">
                        {{groupDetail.product_title}}
                    </div>
                    <div class="content">
                        {{groupDetail.product_detail}}
                    </div>
                    <div class="price" v-if="type === 0">
                        价格 ￥{{groupDetail.single_price/100}}
                    </div>
                    <div class="price" v-if="type === 1">
                        团购价 ￥{{groupDetail.group_price/100}}
                    </div>
                </div>
            </div>
        </div>
        <div class="success-block">
            <div class="suc-head">
                <img v-if="status !== 1 " v-for="(data,index) in buyer_avatar" :src="data" :key="index">
                <!--<div v-if="status !== 1" v-for="data in (groupDetail.group_num - buyer_avatar.length)" class="otherIcon"></div>-->
                <img :src="defaultUserIconUrl" v-if="status !== 1" v-for="data in (groupDetail.group_num - buyer_avatar.length)"/>
                <div class="title" v-if="status !== 1">
                    还差<span class="red">{{(groupDetail.group_num - buyer_avatar.length)}}</span>人成团，赶快邀请好友来拼单吧
                </div>
            </div>
            <div class="text-content" v-if="type === 0">
                恭喜您已成功购买
            </div>
            <div class="text-content" v-if=" type === 1 && status === 1">
                恭喜您已成功拼团
            </div>
            <div class="text-content last" v-if=" type === 1 && status === 0">
                剩余
                <span>{{h}}</span>:<span>{{m}}</span>:<span>{{s}}</span>
                结束
            </div>
        </div>
        <div class="share" v-if=" type === 1" @click="shareVisible = true">
            <img :src="weChatIcon"/>
            <br>
            分享给好友
            <div v-if="groupDetail.head_welfare && groupDetail.head_welfare !== '' && groupDetail.head_welfare !== null">
                团长福利：{{groupDetail.head_welfare}}
            </div>
        </div>
        <div class="qr-block">
            <img :src="weChatQrUrl"/>
            <div class="text">
                请扫码关注公众号后，
                <br>
                点击“我要上课”等待课程开班
            </div>
        </div>
    </div>

</template>

<script>
    import ShareJs from '@/util/share'
    import defaultUserIconUrl from '../../assets/Shape@2x.png'
    import successIconUrl from '../../assets/successIcon.png'
    import weChatQrUrl from '../../assets/weChatCode.png'
    import weChatIcon from '../../assets/wechat.jpg'
    import shareUrl from '../../assets/Bitmap@2x.png'
    export default {
        name: "success",
        data(){
            return {
                groupDetail:'',
                defaultUserIconUrl:defaultUserIconUrl,
                shareUrl:shareUrl,
                weChatIcon:weChatIcon,
                orderNo:'',
                shareVisible:true,
                weChatQrUrl:weChatQrUrl,
                successIconUrl:successIconUrl,
                shopId:'',
                type:1,
                source:'',
                groupId:'',
                is_captain:1,
                buyer_avatar:[],
                status:'',
                deadline:'',
                h:0,
                m:0,
                s:0
            }
        },
        computed:{
            other(){
                return  Number(this.groupDetail.group_num - this.this.buyer_avatar.length)
            }
        },
        mounted(){
            this.initPage()
        },
        methods:{
            trackingPage(data,type){
                let json={
                    type:type,
                    value:'groupShow',
                    desc:data
                };
                Service.trackingAciton(json)
            },
            enableShare: function(option) {
                let _url = location.href
                Service.getwechatParam({
                    url: _url
                }).then(wechatRes => {
                    if (wechatRes.data.result === 'success') {
                        ShareJs.wxConfig(wechatRes.data.data)
                        let options = {
                            title: option.product_title,
                            desc: option.desc,
                            link: option.shareUrl,
                            success:function () {
                                let link = `shopId=${this.shopId}&groupId=${this.groupId}&source=${this.source}&type=${this.type}&out_trade_no=${this.orderNo}`
                                 window._hmt.push(['_trackEvent', '团购分享页', "分享",'成功页面分享',link]);//百度统计
                                this.trackingPage(link,'share')
                            }
                        };
                        if (option.shareIcon) {
                            options.imgUrl = option.shareIcon
                        }
                        ShareJs.setOptions(options)
                    }
                })
            },
            onShare: function() {
                let URL = `${process.env.API_URL2}/#/groupbuy?groupId=${this.groupId}&source=${this.source}`;
                if(this.status ===1 ){
                    URL = `${process.env.API_URL2}/#/groupbuy?shopId=${this.shopId}&source=${this.source}`
                }
                this.enableShare({
                    product_title: this.groupDetail.share_info.share_title,
                    desc: this.groupDetail.share_info.share_content,
                    shareIcon:this.groupDetail.share_info.shareIcon,
                    shareUrl:URL
                })
            },
            initPage(){
                if(this.$route.query.out_trade_no&&this.$route.query.out_trade_no !== '' && this.$route.query.out_trade_no !== null){
                    this.orderNo =  this.$route.query.out_trade_no;
                }else{
                    this.groupId =  this.$route.query.groupId;
                }
                this.source = this.$route.query.source
                let json={
                    out_trade_no:this.orderNo,
                    group_id:this.groupId
                };

                Service.getGroupId(json).then(res=>{
                    if(res.data.result==='success'){
                        this.type = res.data.data.buy_type;
                        if(this.type === 1){
                            this.groupId =  res.data.data.id;
                            this.buyer_avatar = res.data.data.buyer_avatar;
                        }
                        this.status = res.data.data.status;
                        this.shopId = res.data.data.product_group_id;

                        if(res.data.data.deadline){
                            this.deadline = res.data.data.deadline;
                            this.leftTimer();
                        }
                        Service.getGroupDetail(this.shopId).then(res=>{
                            if(res.data.result==='success'){
                                let data = res.data.data;
                                this.join=true;
                                data.product_img = JSON.parse(data.product_img);
                                data.share_info = JSON.parse(data.share_info);
                                this.groupDetail = data;
                                this.trackingPage(`shopId=${this.shopId}&groupId=${this.groupId}&source=${this.source}&type=${this.type}&out_trade_no=${this.orderNo}`,'page')
                                this.onShare();
                            }else{
                                Toast(res.data.message);
                            }
                        })
                    }
                })
            },

            leftTimer(){
                let leftTime = (new Date(this.deadline.replace(/\-/g, '/'))) - (new Date()); //计算剩余的毫秒数
                let hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时
                let minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
                let seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
                hours = this.checkTime(hours);
                minutes = this.checkTime(minutes);
                seconds = this.checkTime(seconds);
                this.h = hours;
                this.m = minutes;
                this.s = seconds;
                window.setTimeout(this.leftTimer,1000)
            },
            checkTime(i){ //将0-9的数字前面加上0，例1变为01
                if(i<10)
                {
                    i = "0" + i;
                }
                return i;
            }
        }
    }
</script>

<style scoped lang="less">
    .success{
        background: #f0f0f0;
        height: 100%;
    }
    .head{
        background: #F83534;
        padding: 10/7.5vw;
        text-align: center;
        color: white;
        font-size: 16px;
        line-height: 1.4em;
        img{
            width: 18px;
            vertical-align: middle;
            margin-right: 5px;
        }
        .sec{
            font-size: 12px;
        }
    }
    .shop-block{
        .shop{
            padding: toVw(20);
            background: white;
            position: relative;
            &:after{
                content:'';
                display: block;
                clear: both;
            }
            .img-block{
                float: left;
                margin-right: toVw(20);
                img{
                    width: toVw(250);
                }
                min-height: 120px;
            }

            .title{
                font-size: 18px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                color: #333333;
                margin-bottom: toVw(5);
            }
            .content{
                font-size: 12px;
                line-height: 1.4em;
                color: #CCCCCC;
                height: 4.2em;
                overflow: hidden;
            }
            .price{
                font-size: 18px;
                color: #FF001F;
                position: absolute;
                right: toVw(20);
                bottom: toVw(20);
            }
        }
    }
    .success-block{
        padding: 0 toVw(40);
        margin-bottom: toVw(30);
        position: relative;
        background: #f0f0f0;
        .suc-head{
            padding: toVw(40) 0;
            text-align: center;
            border-bottom: 1px solid #d0d0d0;
            .title{
                font-size: 16px;
                color: #333333;
                .red{
                    color: #FF001F;
                }
            }
            img{
                width: toVw(80);
                border-radius: 1000px;
                margin: toVw(10);
            }
            .otherIcon{
                width: toVw(80);
                height: toVw(80);
                display: inline-block;
                border-radius: 1000px;
                margin: toVw(10);
                background: #d0d0d0;
            }
        }
        .text-content{
            position: absolute;
            bottom: -8px;
            height: toVw(38);
            line-height: toVw(38);
            background: #f0f0f0;
            width: 16em;
            left: 50%;
            margin-left: -8em;
            text-align: center;
            font-size: 16px;
            color: #333333;
            &.last{
                font-size: 12px;
                span{
                    display: inline-block;
                    background: #F83534;
                    width:1.6em;
                    height: 1.6em;
                    line-height: 1.6em;
                    border-radius: 3px;
                    color: white;
                    margin: 0 5px;
                    font-size: 12px;
                }
            }

        }
    }
    .qr-block{
        padding: toVw(30);
        text-align: center;
        background: #f0f0f0;
        img{
            width: toVw(300);
        }
        .text{
            font-size: 14px;
            line-height: 1.6em;
            color: #666666;
            text-align: center;
        }
    }
    .share{
        text-align: center;
        padding: toVw(20);
        font-size: 12px;
        color: #333333;
        line-height: 1.6em;
        img{
            width: toVw(80);
        }
        div{
            margin-top: toVw(20);
        }
    }
    .refer-share {
        width: 100%;
    }
    .refer-share img {
        position: absolute;
        width: 80%;
        right: 0;
    }

</style>
<style>
    .v-modal{
        opacity: 0.7;
    }
</style>
