<template>
  <div class="group-index" ref="index" v-if="groupDetail">
    <swiper :options="swiperOption" class="banner" ref="mySwiper">
      <swiper-slide v-if="groupDetail.goods_desc" v-for="(data,index) in groupDetail.goods_desc.img" :key="index">
        <img :src="data.url"/>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <img :src="refIcon" class="ref-icon shake" @click="goToActivity()" v-if="groupDetail.is_auth_user === 1">
    <div class="head">
      <div class="title">
        {{groupDetail.name}}
      </div>
      <span class="detail">
                {{groupDetail.goods_desc.desc}}
            </span>
      <div class="price">
        <span class="price-content">￥{{groupDetail.current_price/100}}元</span>
      </div>

    </div>
    <div class="head-icon">
      <img class="icon" v-for="(data,index) in groupDetail.header_url" v-if="index<5" :src="data" :key="data">
      <img class="more" :src="moreUrl"/>
      <span class="has">已售{{groupDetail.has_group_num}}件</span>
    </div>
    <div class="welfare" v-if="groupDetail.head_welfare && groupDetail.head_welfare !== '' && groupDetail.head_welfare !== null">
      团长福利：{{groupDetail.head_welfare}}
    </div>
    <div class="main-detail">
      <div class="tab-content">
        <div :class="{'tab-btn':true,active:tabType}" @click="tabType=true">图文详情</div>
        <div :class="{'tab-btn':true,active:!tabType}" @click="tabType=false">购买须知</div>
      </div>
      <div v-if="tabType" class="detail">
        <div v-html="groupDetail.desc.detail" class="detail-content"></div>
      </div>
      <div v-if="!tabType" class="qa-block">
        <div class="qa-content qaDetail" v-html="groupDetail.desc.qa">
        </div>
      </div>
    </div>
    <div v-if="groupDetail.desc.customer_service[0]">
      <mt-popup v-model="popupVisible">
        <div class="pop-block">
          <img v-if="popType" :src="qrCode"/>
          <img v-if="!popType" :src="groupDetail.desc.customer_service[0].url"/>
          <div>
            <span v-if="popType" v-html="popcontentW"></span>
            <span v-if="!popType" v-html="popcontentT"></span>
          </div>
          <img class="close" :src="closeUrl" @click="popupVisible = false">
        </div>
      </mt-popup>
    </div>
    <mt-popup v-model="popFill" :closeOnClickModal="false">
      <div class="pop-fill">
        您好，本次拼团已经结束。您可以选择重新开团或单独购买
        <div class="btn-block">
          <div class="btn" @click="rePlay()">重新开团</div>
        </div>
      </div>
    </mt-popup>
    <mt-popup v-model="refVisible" style="background-color: transparent;margin-top: -80vw;margin-left: -40vw;transform: none">
      <div :style="{backgroundImage:`url(${refBg})`}" class="ref-content"
           v-if="groupDetail.share_desc.refImg && groupDetail.share_desc.refImg.length > 0">
        <div class="tips">
          长按保存图片
        </div>
      </div>
      <div class="img-cvs" id="capture" ref="imageWrapper" v-if="groupDetail.share_desc.refImg && groupDetail.share_desc.refImg.length > 0">
        <img :src="groupDetail.share_desc.refImg[0].url">
        <div id="qrcode" class="qrcode">
        </div>
      </div>
      <img :src="dataURL" class="cvs-img"/>
    </mt-popup>
    <div v-if="groupDetail.status === 1 && invite_code_f">
    <footer v-if="groupDetail.goods_type && groupDetail.goods_type === 2">
      <div class="btn" @click="showTeacher()" v-if="groupDetail.desc.customer_service[0]">
        <img :src="weChatIcon"/>
      </div>
      <div class="btn big price full" v-if="groupData && groupData.status !== 0">
        <div v-if="groupId">该团已满</div>
      </div>
      <div :class=" groupData && groupData.status !== 0 ? 'btn big price':'btn big'" @click="groupPay(0)" :id="groupId ? 'reGroup':'singleBuy'">
        <span v-if="!groupId">￥{{groupDetail.original_price/100}}</span>
        <div v-if="!groupId">单独购</div>
        <span v-if="groupId">￥{{groupDetail.current_price/100}}</span>
        <div v-if="groupId">重新开团</div>
      </div>
      <div class="btn big price" @click="groupPay(1)" :id="groupId ? 'joinGroup':'newGroup'" v-if="!groupData || groupData.status === 0">
        <span>￥{{groupDetail.current_price/100}}</span>
        <div v-if="!groupId">{{groupDetail.desc.group_number}}人团</div>
        <div v-if="groupId">立即参团</div>
      </div>

    </footer>
    <footer v-if="groupDetail.goods_type && groupDetail.goods_type !== 2">
      <div class="btn" @click="showTeacher()"  v-if="groupDetail.desc.customer_service[0]">
        <img :src="weChatIcon"/>
      </div>
      <div class="btn big price" @click="groupPay(1)">
        <span>￥{{groupDetail.current_price/100}}</span>
        <div>立即购买</div>
      </div>
    </footer>
    </div>
    <div v-if="groupDetail.status !== 1">
      <footer>
        <div style="color: #888">
          已售罄
        </div>
      </footer>
    </div>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import  QRCode from 'qrcodejs2'
  import { Indicator } from 'mint-ui';
  import {getwechatParam,getGoodsDetailApi,getGroupDetailApi,getStatusWechatApi,getUserDetailApi} from "../../service/api";
  import refBg from '../../assets/refBg.png'
  import moreUrl from '../../assets/moreIcon.png'
  import weChatIcon from '../../assets/wechatIcon.png'
  import weChatQrUrl from '../../assets/weChatCode.png'
  import closeUrl from '../../assets/closemy.png'
  import html2canvas from 'html2canvas'
  export default {
    name: "index",
    components: {
      swiper,
      swiperSlide,
    },
    data(){
      return {
        refBg:refBg,
        join:false,
        popType:false,
        popFill:false,
        popupVisible:false,
        refVisible:false,
        tabType:true,
        popcontentW:`您已经购买过课程，无需重复<br>购买，您可以添加微信公众号了解更多`,
        popcontentT:`为了更好地为您进行课程服务，<br>请扫码添加老师二维码`,
        qrCode:weChatQrUrl,
        weChatIcon:weChatIcon,
        closeUrl:closeUrl,
        moreUrl:moreUrl,
        refIcon:'https://cdn.singsingenglish.com/new-sing/b7f43ced8f8268655c2c5b289360df990ec8f18e.png',
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          }
        },
        QRCodeB:false,
        dataURL:null,
        user_id:null,
        invite_code_f:true,
        invite_code:'',
        shopId:'',
        groupId:null,
        groupDetail:false,
        groupData:null,
      }
    },
    mounted(){
      this.getDetail();
    },
    methods:{
      goToActivity(){
        let query = {}
        if(window.location.href.indexOf('shopId')>-1){
          query.shopId = this.$route.query.shopId;
        }
        if(window.location.href.indexOf('groupId')>-1){
          query.groupId = this.$route.query.groupId;
        }
        if(window.location.href.indexOf('invite_code')> -1) {
          query.invite_code = this.$route.query.invite_code;
        }
        this.$router.push({name:'activity',query:query})
      },
      refshow(){
        Indicator.open();
        if(document.body.scrollTop < 10){
          document.body.scrollTop = 20;
          document.documentElement.scrollTop = 20;
        }
        if(localStorage.getItem('cc_token') && localStorage.getItem('cc_token') !== ''){
          setTimeout(()=>{
            Indicator.close();
            if(!this.invite_code){
              this.invite_code = 'CC-USER'
            }
              let invite_code = this.invite_code.split('-');
              if(invite_code.length > 2 && invite_code[1] === 'TEACHER'){
                invite_code[1] = 'USER'
              }
              let code = `${invite_code[0]}-${invite_code[1]}`;
              let URL = `${process.env.BUY_URL}shopId=${this.shopId}&invite_code=${code}-${this.user_id}`;
              if(this.groupId && this.groupId !== 'null'){
                URL += `&groupId=${this.groupId}`
              }
              this.qrcode(URL);
              this.refVisible = true;
              this.$nextTick(()=>{
                if(!this.dataURL){
                  setTimeout(()=>{
                    let {
                      height,
                      width
                    } = document.getElementById('capture').getClientRects()[0]
                    document.getElementById('capture').style.width = width + 'px';
                    let o = this.getOffsetRect(this.$refs.imageWrapper);
                    let {
                      height1,
                      width1
                    } = document.getElementById('capture').getClientRects()[0];
                    html2canvas(document.getElementById('capture'),{
                      async: true,
                      timeout: 500,
                      scrollX:1,
                      scale: 3,
                      width: width1,
                      height: height1,
                      letterRendering: true,
                    }).then((canvas) => {
                      let dataURL = canvas.toDataURL("image/jpg");
                      this.dataURL = dataURL;
                    }).catch(res=>{alert(res);console.log()});
                  },500)
                }else{

                }
              })
          },500)

        }else{
          let query = {retUrl:this.$route.fullPath,is_new_user_url:'1'};
          this.$router.push({name:'author',query:query})
        }
      },
      getOffsetRect(ele){
        var box=ele.getBoundingClientRect();
        var body=document.body,
          docElem=document.documentElement;
        //获取页面的scrollTop,scrollLeft(兼容性写法)
        var scrollTop=window.pageYOffset||docElem.scrollTop||body.scrollTop,
          scrollLeft=window.pageXOffset||docElem.scrollLeft||body.scrollLeft;
        var clientTop=docElem.clientTop||body.clientTop,
          clientLeft=docElem.clientLeft||body.clientLeft;
        var top=box.top+scrollTop-clientTop,
          left=box.left+scrollLeft-clientLeft;
        return {
          //Math.round 兼容火狐浏览器bug
          top:Math.round(top),
          left:Math.round(left)
        }
      },
      qrcode(data){
        if(this.QRCodeB){
          this.QRCodeB.makeCode(data)
        }else{
          this.QRCodeB = new QRCode('qrcode', {
            width: 80,
            height: 80, // 高度
            text: data, // 二维码内容
            image: ''
          });
        }

      },
      // 分享
      enableShare: function(option) {
        let that = this;
        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
          });
          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() {
                console.log('分享成功');
              },
              cancel: function() {
                // alert("失败")
                console.log('分享失败')
              }
            });
            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() {
              },
              cancel: function() {
              }
            });
          })
        })
      },
      // 处理invite_code
      handleInviteCode(){
        if(!this.invite_code){
          this.invite_code = 'CC-USER-'+this.user_id;
        }else{
          let invite_code = this.invite_code.split('-');
          if(invite_code.length > 2 && invite_code[1] === 'TEACHER'){
            invite_code[1] = 'USER'
          }
          let code = `${invite_code[0]}-${invite_code[1]}`;
          this.invite_code = `${code}-${this.user_id}`;
        }
      },
      onShare: function(type) {

            this.handleInviteCode();
        let URL = `${process.env.BUY_URL}shopId=${this.shopId}&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].url,
          shareUrl:URL
        })
      },
      toDataURLBase64 (src, callback) {
        let xhttp = new XMLHttpRequest();
        xhttp.onload = function () {
          let fileReader = new FileReader();
          fileReader.onloadend = function () {
            callback(fileReader.result)
          };
          fileReader.readAsDataURL(xhttp.response)
        };
        xhttp.responseType = 'blob';
        xhttp.open('GET', src, true);
        xhttp.send()
      },
      // 初始化
      getDetail(){
        if(window.location.href.indexOf('invite_code')> -1){
          this.invite_code = this.$route.query.invite_code;
          let l = this.invite_code.split('-').length;
          if(l === 2 ){
            this.invite_code_f = false
          }
        }
        getUserDetailApi().then(res=>{
            this.user_id=res.user_id;
        if(window.location.href.indexOf('shopId')>-1){
          this.shopId = this.$route.query.shopId;
          getGoodsDetailApi(this.shopId).then(res=>{
            res.desc = JSON.parse(res.desc);
            res.goods_desc = JSON.parse(res.goods_desc);
            res.share_desc = JSON.parse(res.share_desc);
            //商品下架跳转绑定商品
            if(res.status === 2 && res.bind_goods_id){
              this.$router.push({name:'buyDetail',query:{shopId:res.bind_goods_id}});
              this.getDetail();
              return
            }
            this.groupDetail = res;
            for (let i = 0;i<this.groupDetail.header_url.length;i++){
              this.groupDetail.header_url[i]=this.groupDetail.header_url[i].replace('http://','https://')
            }
            this.groupDetail.desc.detail = this.groupDetail.desc.detail.replace(/http:\/\//g,'https://');
            this.groupDetail.desc.qa = this.groupDetail.desc.qa.replace(/http:\/\//g,'https://');
            if(this.groupDetail.share_desc.refImg && this.groupDetail.share_desc.refImg.length === 1){
              this.groupDetail.share_desc.refImg[0].url = this.groupDetail.share_desc.refImg[0].url.replace('http://','https://');
              let _this = this;
              this.toDataURLBase64(this.groupDetail.share_desc.refImg[0].url, function (avatarUrl) {
                _this.groupDetail.share_desc.refImg[0].url = avatarUrl;
              });
            }

            if(this.groupDetail.goods_type === 2){
              if(localStorage.getItem('cc_token')){
                getStatusWechatApi({goods_id:this.shopId}).then(res=>{
                  if(res.out_trade_no){
                    if(res.buy_type === 1){
                      this.$router.push({name:'buySuccess',query:{out_trade_no:res.out_trade_no}});
                    }else{
                      this.$router.push({name:'success',query:{out_trade_no:res.out_trade_no}});
                    }
                  }
                });
              }
              if(window.location.href.indexOf('groupId')>-1){
                this.groupId = this.$route.query.groupId;
                getGroupDetailApi(this.groupId).then(res=>{
                  this.groupData = res
                });
                this.onShare(0)
              }else{
                this.onShare(1)
              }
            }else{
              this.handleInviteCode()
            }
          })
        }
        });
      },
      showTeacher(){
        this.popType = false;
        this.popupVisible = true
      },
      groupPay(type){
        let query = {shopId: this.shopId,invite_code:this.$route.query.invite_code};
        if(this.groupId){
          query.group_order_id = this.groupId
        }
        if(type === 0 && !this.groupId){
          query.type='single';
        }else if (type === 0 && this.groupId){
          this.$router.push({
            name: 'buyDetail',
            query:{
              shopId:this.shopId,
              invite_code:this.$route.query.invite_code
            }
          });
          window.location.reload();
          return false
        } else{
          query.type=''
        }

        if(window.location.href.indexOf('gdt_vid')>-1){
          query.gdt_vid = this.$route.query.gdt_vid
        }
        if(window.location.href.indexOf('cct_user_id')>-1){
          query.cct_user_id = this.$route.query.cct_user_id
        }
        this.$router.push({
          name: 'buy',
          query:query
        })
      }
    }
  }
</script>
<style>
  img,video{
    max-width: 100%;
  }
  @-webkit-keyframes swing {
    10% {
      transform: rotate(15deg);
    }
    20% {
      transform: rotate(-10deg);
    }
    30% {
      transform: rotate(5deg);
    }
    40% {
      transform: rotate(-5deg);
    }
    50%, 100% {
      transform: rotate(0deg);
    }
  }
  .shake{
     -webkit-animation-name: swing;
     -webkit-animation-duration: 0.8s;
     -webkit-transform-origin:50% 50%;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-timing-function: linear;
   }

</style>
<style scoped lang="less">
  @import "../../util/public";
  .img-cvs{
    position: absolute;
    width: 233 * @toVw;
    top: 176 * @toVw;
    left: 29 * @toVw;
    .qrcode{
      position: absolute;
      top: 305 * @toVw;
      left: 15 * @toVw;
      width: 60 * @toVw;
    }
  }
  .cvs-img{
    position: absolute;
    width: 233 * @toVw;
    top: 176 * @toVw;
    left: 29 * @toVw;
    z-index: 10;
  }
  .ref-content{
    width: 299 * @toVw;
    height: 564 * @toVw;
    background-size: 100% 100%;
    position: relative;
    .tips{
      font-size: 12px;
      position: absolute;
      color: #666;
      right: 10 * @toVw;
      top: 250 * @toVw;
      width: 1em;
    }
  }
  .group-index{
    height: 100%;
    padding-bottom: toVw(150);
    background: #f0f0f0;
    font-family: PingFangSC-Regular;
    .ref-icon{
      position: fixed;
      height: 100/375 * 90vw ;
      top: 70vw;
      z-index: 6;
      right: 10 * 100 /375vw;
      /*border-radius: 100px;*/
    }
    .banner{
      background: white;
      img{
        width: 100%;
      }
    }
    .head{
      background: white;
      margin-bottom: 10px;
      padding: 20/7.5vw;
      .title{
        font-size: 20px;
        color: #333333;
        margin-bottom: 15/7.5vw;
      }
      .detail{
        font-size: 12px;
        line-height: 1.6em;
        color: #333333;
        display: block;
        margin-bottom: 15/7.5vw;
      }
      .price{
        .price-content{
          font-family: PingFang-SC-Bold;
          font-size: 20px;
          color: #F83534;
        }
      }
    }
    .head-icon{
      padding: 20/7.5vw;
      background: white;
      margin-bottom: 2px;
      .icon{
        display: inline-block;
        width: 60/7.5vw;
        margin: 0 10/7.5vw;
        border-radius: 1000px;
        vertical-align: middle;
      }
      .more{
        width: 50/7.5vw;
        vertical-align: middle;
      }
      .has{
        font-size: 12px;
        line-height: 60/7.5vw;
        color: #999999;
        float: right;
      }
    }
    .welfare{
      background: white;
      padding:10/7.5vw ;
      font-size: 12px;
      text-align: center;
      color: #999999;
      margin-bottom: 20px;
    }
    .main-detail{
      padding: 20/7.5vw;
      background: white;
      .tab-content{
        border-radius: 9px ;
        border: 1px solid #F63539;
        &:after{
          content: '';
          display: block;
          clear: both;
        }
        .tab-btn{
          width: 50%;
          float: left;
          height: 80/7.5vw;
          line-height: 80/7.5vw;
          text-align: center;
          color: #F63539;
          border-radius:9px ;
          &.active{
            background: #F63539;
            color: white;
          }
        }
      }
      .qa-block{
        padding: 20/7.5vw 0 toVw(150) 0;
        img,video{
          max-width: 100%;
        }
        .qa-content{
          margin: toVw(10) 0;
          .qa-q{
            font-size: 16px;
            color: #666666;
          }
          .qa-a{
            font-size: 16px;
            color: #333333;
          }
        }
      }
      .detail{
        padding: 20/7.5vw 0 150/7.5vw 0;
        .detail-content{
          img,video{
            max-width: 100%;
          }
        }

      }
    }
    footer{
      position: absolute;
      position: fixed;
      bottom: 0;
      width: 97.7vw;
      height: 120/7.5vw;
      display: -webkit-box;      // OLD - iOS 6-, Safari 3.1-6 //
      display: -moz-box;         // OLD - Firefox 19- (buggy but mostly works) //
      display: -ms-flexbox;      // TWEENER - IE 10 //
      display: -webkit-flex;     // NEW - Chrome //
      display: flex;             // NEW, Spec - Opera 12.1, Firefox 20+ //
      background: white;
      padding: 1.3vw;
      border-top: 1px solid #d8d8d8;
      justify-content:space-around;
      .btn{
        border: 1px solid #cccccc;
        border-radius: 8px;
        width:0;
        flex-grow:2;
        text-align: center;
        padding: 15/7.5vw 0;
        margin: 0 10/7.5vw;
        line-height: 1.4em;
        font-size: 16px;
        color: #666666;
        span{
          display: block;
          font-size: 20px;
          font-family: PingFang-SC-Bold;
        }
        img{
          width: 50/7.5vw;
        }
        &.big{
          padding: 5/7.5vw 0;
          flex-grow:5;
          &.price{
            background:  #F83534;
            border-color: #F83534;
            color: white;
            &.full{
              background: #dddddd;
              border-color: #dddddd;
              line-height: 50*@toVw;
            }
          }
        }
      }
    }
    .pop-block{
      padding:40/7.5vw 10/7.5vw;
      width: 600/7.5vw;
      text-align: center;
      font-size: 14px;
      color: #666666;
      position: relative;
      img{
        width: 250/7.5vw;
      }
      .close{
        width: 50/7.5vw;
        position: absolute;
        top: 20/7.5vw;
        right: 20/7.5vw;
      }
    }
    .mint-popup{
      border-radius: 10px;
    }
    .pop-fill{
      width: 500/7.5vw;
      padding:30/7.5vw 30/7.5vw;
      font-size: 16px;
      color: #333333;
      .btn-block{
        margin-top: 30/7.5vw;
        &:after{
          content:'';
          display: block;
          clear: both;
        }
        .btn{
          float: right;
          background: #F83534;
          font-size: 14px;
          padding: 5/7.5vw 10/7.5vw;
          border-radius: 8px;
          color: #FFFFFF;
        }
      }
    }

  }

</style>
