<template>
  <div class="group-index" v-if="groupDetail">
    <swiper :options="swiperOption" class="banner" ref="mySwiper">
      <swiper-slide v-for="(data,index) in groupDetail.product_img" :key="index">
        <img :src="data"/>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class="head">
      <div class="title">
        {{groupDetail.name}}
      </div>
      <span class="detail">
                {{groupDetail.goods_desc}}
            </span>
      <div class="price">
        <span class="price-content">￥{{groupDetail.current_price/100}}元</span>
      </div>
    </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">Q&A</div>
      </div>
      <div v-if="tabType" class="detail">
        <div v-html="groupDetail.desc"></div>
      </div>
      <div v-if="!tabType" class="qa-block">
        <div class="qa-content" v-html="groupDetail.desc">
        </div>
      </div>
    </div>
    <mt-popup v-model="popupVisible">
      <div class="pop-block">
        <img v-if="popType" :src="qrCode"/>
        <img v-if="!popType" :src="groupDetail.teacher_alias"/>
        <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>
    <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>
    <footer>
      <div class="btn" @click="showTeacher()">
        <img :src="weChatIcon"/>
      </div>
      <div class="btn big" @click="groupPay(0)" :id="join ? 'reGroup':'singleBuy'">
        <span v-if="!join">￥{{groupDetail.current_price/100}}</span>
        <div v-if="!join">单独购</div>
        <span v-if="join">￥{{groupDetail.current_price/100}}</span>
        <div v-if="join">重新开团</div>
      </div>
      <div class="btn big price" @click="groupPay(1)" :id="join ? 'joinGroup':'newGroup'">
        <span>￥{{groupDetail.current_price/100}}</span>
        <div v-if="!join">{{groupDetail.group_num}}人团</div>
        <div v-if="join">立即参团</div>
      </div>
    </footer>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import comment from '../../util/common'
  import { Toast } from 'mint-ui';
  import {getwechatParam,getGoodsDetailApi} from "../../service/api";
  import Cookie from '../../util/cookie'
  import ShareJs from '../../util/share'
  import moreUrl from '../../assets/more.png'
  import weChatIcon from '../../assets/wechatIcon.png'
  import weChatQrUrl from '../../assets/weChatCode.png'
  import closeUrl from '../../assets/closemy.png'
  export default {
    name: "index",
    components: {
      swiper,
      swiperSlide
    },
    data(){
      return {
        join:false,
        popType:false,
        popFill:false,
        popupVisible:false,
        tabType:true,
        popcontentW:`您已经购买过课程，无需重复<br>购买，您可以添加微信公众号了解更多`,
        popcontentT:`为了更好地为您进行课程服务，<br>请扫码添加老师二维码`,
        qrCode:weChatQrUrl,
        weChatIcon:weChatIcon,
        closeUrl:closeUrl,
        moreUrl:moreUrl,
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          }
        },
        source:'',
        shopId:'',
        groupId:'',
        groupDetail:false
      }
    },
    mounted(){
      this.getDetail();


    },
    methods:{
      onShare: function(type) {
        let URL = `${process.env.API_URL2}/#/groupbuy?groupId=${this.groupId}&source=${this.source}`;
        if(type === 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
        })
      },
      getDetail(){
        if(window.location.href.indexOf('source')> -1){
          this.source = comment.getUrlParam().source;
        }
        if(window.location.href.indexOf('shopId')>-1){
          this.shopId = this.$route.query.shopId
          getGoodsDetailApi(this.shopId).then(res=>{
            this.groupDetail = res;
            this.trackingPage(`shopId=${this.shopId}&source=${this.source}`,'page')
          })
        }

      },
      showTeacher(){
        this.popType = false;
        this.popupVisible = true
      },
      groupPay(type){
        this.$router.push({
          name: 'buy',
          query: {shopId: this.shopId,source:this.source}
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .group-index{
    overflow: auto;
    height: 100%;
    padding-bottom: toVw(150);
    background: #f0f0f0;
    font-family: PingFangSC-Regular;
    .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;
        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;
        .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;
      }
    }
    footer{
      position: absolute;
      position: fixed;
      bottom: 0;
      width: 100%;
      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: 10/7.5vw;
      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;
          }
        }
      }
    }
    .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>
