<template>
  <div class="success">
    <mt-popup
      v-model="shareVisible"
      class="refer-share"
      position="top">
      <img :src="shareUrl">
    </mt-popup>
    <div class="banner">
      <img :src="img.weChat">
    </div>
    <div class="shop-block" v-if="groupDetail">
      <div class="shop">
        <div class="img-block">
          <img :src="groupDetail.goods_desc.img[0].url">
        </div>
        <div>
          <div class="title">
            {{groupDetail.name}}
          </div>
          <div class="content">
            {{groupDetail.goods_desc.desc}}
          </div>
          <div class="price">
            价格 ￥{{money/100}}
          </div>
        </div>
      </div>
    </div>
    <div class="success-block" v-if="groupDetail">
      <div class="text-content last" v-if=" group_info && group_info.status !== 1">
        剩余
        <span>{{h}}</span>:<span>{{m}}</span>:<span>{{s}}</span>
        结束
      </div>
      <div class="suc-head">
        <img v-if="group_info" v-for="(data,index) in user_info" :src="data.avatar" :key="index">
        <!--<div v-if="status !== 1" v-for="data in (groupDetail.group_number - user_info.length)" class="otherIcon"></div>-->
        <img :src="defaultUserIconUrl" v-if="group_info  && group_info.status !== 1 " v-for="data in (groupDetail.desc.group_number - user_info.length)"/>
        <div class="title" v-if="group_info && group_info.status !== 1">
          还差<span class="red">{{(groupDetail.desc.group_number - user_info.length)}}</span>人成团，赶快邀请好友来拼单吧
        </div>
      </div>
      <div class="text-content" v-if="group_info && group_info.status === 1">
        恭喜您已成功拼团
      </div>
    </div>
    <div class="block-white"></div>
    <div class="btn-block">
      <div class="btn" @click="shareVisible = true" v-if="group_info && group_info.status !== 1">
        继续分享
      </div>
      <div class="btn" @click="toIndex()" v-if="group_info && group_info.status === 1">
        快去上课
      </div>
    </div>
  </div>
</template>

<script>
  import {shopSuccess} from "../../util/imgUrl";
  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 {getwechatParam,getOrderDetailApi,getGoodsDetailApi} from "../../service/api";
  import shareUrl from '../../assets/Bitmap@2x.png'
  export default {
    name: "success",
    data(){
      return {
        img:shopSuccess,
        groupDetail:'',
        defaultUserIconUrl:defaultUserIconUrl,
        shareUrl:shareUrl,
        weChatIcon:weChatIcon,
        orderNo:'',
        shareVisible:true,
        weChatQrUrl:weChatQrUrl,
        successIconUrl:successIconUrl,
        shopId:'',
        group_info:null,
        money:0,
        invite_code:'',
        groupId:'',
        is_captain:1,
        user_info:[],
        deadline:'',
        h:0,
        m:0,
        s:0
      }
    },
    computed:{
      other(){
        return  Number(this.groupDetail.desc.group_number - this.this.user_info.length)
      }
    },
    mounted(){
      this.initPage()
    },
    methods:{
      toIndex(){
        this.$router.push({name:'index'});
        window._hmt.push(['_trackEvent', '去上课', "成功页去上课",`id${this.shopId}`]);//百度统计
      },
      enableShare: function(option) {
        getwechatParam({
          api_list:   'onMenuShareAppMessage,onMenuShareTimeline',
          url:window.location.href.split('#')[0]
        }).then(wechatRes => {
          wx.config({
            debug: false,
            appId: wechatRes.appId,
            timestamp: parseInt(wechatRes.timestamp),
            nonceStr: wechatRes.nonceStr,
            signature: wechatRes.signature,
            jsApiList: wechatRes.jsApiList
          });
          let that = this;
          wx.ready(function() {
            wx.onMenuShareTimeline({
              title: option.product_title, // 分享标题
              desc: option.desc,// 分享描述
              link: option.shareUrl, // 分享链接
              imgUrl: option.shareIcon || 'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标
              success: function() {
                let link = `shopId=${that.shopId}&groupId=${that.groupId}&invite_code=${that.invite_code}&type=${that.type}&out_trade_no=${that.orderNo}`;
                window._hmt.push(['_trackEvent', '分享', "团购成功页分享",`id${that.shopId}`,that.invite_code]);//百度统计
                this.trackingPage(link,'share')
              },
              cancel: function() {
                // alert("失败")
              }
            });
            wx.onMenuShareAppMessage({
              title: option.product_title, // 分享标题
              desc: option.desc,// 分享描述
              link: option.shareUrl, // 分享链接
              imgUrl: option.shareIcon || 'https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png', // 分享图标
              success: function() {
                let link = `shopId=${this.shopId}&groupId=${this.groupId}&invite_code=${this.invite_code}&type=${this.type}&out_trade_no=${this.orderNo}`
                window._hmt.push(['_trackEvent', '分享', "团购成功页分享",`id${that.shopId}`,that.invite_code]);//百度统计
                this.trackingPage(link,'share')
              },
              cancel: function() {
              }
            });
          })
        })
      },
      onShare: function() {
        let URL = `${process.env.BUY_URL}shopId=${this.shopId}&groupId=${this.groupId}&invite_code=${this.invite_code?this.invite_code : ''}`;
        this.enableShare({
          product_title: this.groupDetail.share_desc.title,
          desc: this.groupDetail.share_desc.content,
          shareIcon:this.groupDetail.share_desc.img[0] || '',
          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.invite_code = this.$route.query.invite_code;
        getOrderDetailApi(this.orderNo).then(res=>{
          this.groupId =  res.order_group_id;
          this.user_info = res.user_info;
          this.group_info = res.group_info;
          if(this.group_info.status === 1){
            this.shareVisible = false
          }
          this.shopId = res.goods_id;
          this.money = res.money;
          if(res.group_info.deadline){
            this.deadline = res.group_info.deadline;
            this.leftTimer();
          }
          getGoodsDetailApi(this.shopId).then(data=>{
            data.desc = JSON.parse(data.desc);
            data.goods_desc = JSON.parse(data.goods_desc);
            data.share_desc = JSON.parse(data.share_desc);
            this.groupDetail = data;
            this.onShare();
          })
        })
      },

      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 > 0 ? hours : '00';
        this.m = minutes > 0 ? minutes : '00';
        this.s = seconds > 0 ? seconds : '00';
        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">
  @import "../../util/public";
  .block-white{
    height: 60 *@toVw;
  }
  .banner {
    padding: 10 * @toVw;
    background: white;
    text-align: center;
    margin-bottom: 10 * @toVw;
    img {
      width: 100%;
      display: block;
    }
  }
  .btn-block{
    position: fixed;
    bottom: 10*@toVw;
    width: 100%;
    text-align: center;
    .btn{
      margin: 0 20 * @toVw;
      background: #FF7171;
      height: 38 * @toVw;
      line-height: 38 * @toVw;
      border-radius: 1000px;
      font-size:16px;
      font-family:PingFangSC-Regular;
      font-weight:400;
      color:rgba(255,255,255,1);
    }
  }
  .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{

    background: white;
    .shop{
      padding: 20/7.5vw;
      border-bottom: 1px solid #d8d8d8;
      position: relative;
      &:after{
        content:'';
        display: block;
        clear: both;
      }
      .img-block{
        float: left;
        margin-right: 20/7.5vw;
        img{
          width: 250/7.5vw;
        }
        min-height: 120px;
      }

      .title{
        font-size: 18px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        color: #333333;
        margin-bottom: 5/7.5vw;
      }
      .content{
        font-size: 12px;
        line-height: 1.4em;
        color: #CCCCCC;
        height: 4.2em;
        overflow: hidden;

      }
      .price{
        font-size: 18px;
        color: #FF001F;
        position: absolute;
        right: 20/7.5vw;
        bottom: 20/7.5vw;
      }
    }
  }
  .success-block{
    padding: 0 20*@toVw;
    margin-bottom: 15*@toVw;
    position: relative;
    background: #f0f0f0;
    .suc-head{
      padding: 20*@toVw 0;
      text-align: center;
      border-bottom: 1px solid #d0d0d0;
      .title{
        font-size: 16px;
        color: #333333;
        .red{
          color: #FF001F;
        }
      }
      img{
        width: 40*@toVw;
        border-radius: 1000px;
        margin: 5*@toVw;
      }
      .otherIcon{
        width: 40*@toVw;
        height: 40*@toVw;
        display: inline-block;
        border-radius: 1000px;
        margin: 5*@toVw;
        background: #d0d0d0;
      }
    }
    .text-content{
      position: absolute;
      bottom: -8px;
      height: 19*@toVw;
      line-height: 19*@toVw;
      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: 15*@toVw;
    text-align: center;
    background: #f0f0f0;
    img{
      width: 150*@toVw     ;
    }
    .text{
      font-size: 14px;
      line-height: 1.6em;
      color: #666666;
      text-align: center;
    }
  }
  .share{
    text-align: center;
    padding: 10*@toVw;
    font-size: 12px;
    color: #333333;
    line-height: 1.6em;
    img{
      width: 40*@toVw;
    }
    div{
      margin-top: 10*@toVw;
    }
  }
  .refer-share {
    width: 100%;
  }
  .refer-share img {
    position: absolute;
    width: 80%;
    right: 0;
  }

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