<template>
  <div class="group-buy">
    <div class="address-block">
      <div class="add-address" v-if="!addressObj" @click="showAdd">
        +请输入收件人地址
      </div>
      <div class="address-content" v-if="addressObj" @click="showAdd">
        <div class="hf">姓名：{{addressObj.receive_name}}</div>
        <div class="hf">联系电话：{{addressObj.receive_mobile}}</div>
        <div>收货人：{{addressObj.province_name}}{{addressObj.city}}{{addressObj.area}}{{addressObj.address}}</div>
      </div>
    </div>
    <div class="shop-block">
      <div class="shop">
        <div class="img-block">
        </div>
        <div>
          <div class="title">
            {{groupDetail.name}}
          </div>
          <div class="content">
            {{groupDetail.goods_desc}}
          </div>
          <div class="price" v-if="type === 0">
            价格 ￥{{groupDetail.original_price/100}}
          </div>
        </div>
      </div>
    </div>
    <footer>
      合计金额：<span>￥{{price}}</span>
      <div class="pay-btn" @click="payOrder">提交订单</div>
    </footer>
    <transition name="slide-fade">
      <div v-if="addressPop" class="address-pop">
        <addAddress @closeAdd="closeAdd"></addAddress>
      </div>
    </transition>
  </div>
</template>

<script>
  import { Toast, MessageBox } from 'mint-ui'
  import {getUserAdressApi,getGoodsDetailApi,payApi,getwechatParam} from "../../service/api";
  import addAddress from './address'
  export default {
    name: "buy",
    components:{
      addAddress
    },
    data(){
      return{
        addressPop:false,
        groupDetail:false,
        popupVisible:true,
        shopId:'',
        groupId:'',
        addressObj:false,
        price:'',
        source:'',
        type:0,
        jsApiParameters:'',
        orderNo:''
      }
    },
    mounted(){
      this.initPage()
    },
    methods:{
      trackingPage(data,type){
        let json={
          type:type,
          value:'groupAddress',
          desc:data
        };
        Service.trackingAciton(json)
      },
      jsApiCall: function () {
        getwechatParam({api_list:'chooseWXPay'}).then(res=>{
          console.log(res)
          wx.config({
            debug: res.debug,
            appId: res.appId,
            timestamp: parseInt(res.timestamp),
            nonceStr: res.nonceStr,
            signature: res.signature,
            jsApiList: res.jsApiList
          });
          let that = this;
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest',
            this.jsApiParameters,
            function (res) {
              if (res.err_msg === 'get_brand_wcpay_request:ok') {
                //  支付成功后处理
                Toast('支付成功');
                setTimeout(function () {
                  that.$router.push({name:'groupSuccess',query:{out_trade_no:that.orderNo,source:that.source}});
                },1000)
              }
              if (res.err_msg === 'get_brand_wcpay_request:fail') {
                Toast(res.err_msg)
              }
              if (res.err_msg === 'get_brand_wcpay_request:cancel') {
                Toast('取消购买')
              }
            })
        });
      },
      payOrder(){
        if(this.groupDetail.allow_distribute === 1 && !this.addressObj){
          Toast('请填写地址');
          return false
        }
        let json={
          goods_id:Number(this.shopId)
        };
        payApi(json).then(res=>{
            let that = this;
            this.orderNo = res.out_trade_no
            this.jsApiParameters = res;
            wx.miniProgram.getEnv(function(res) {
              if(res.miniprogram){
                let payParam = encodeURIComponent(JSON.stringify(json))
                window._hmt.push(['_trackEvent', 'document','miniPay','触发小程序购买']);
                wx.miniProgram.navigateTo({url: `pages/wxPay/main?payParam=${payParam}`})
              }else if (typeof WeixinJSBridge === 'undefined') {
                if (document.addEventListener) {
                  document.addEventListener('WeixinJSBridgeReady', that.jsApiCall, false)
                } else if (document.attachEvent) {
                  document.attachEvent('WeixinJSBridgeReady', that.jsApiCall);
                  document.attachEvent('onWeixinJSBridgeReady', that.jsApiCall)
                }
              } else {
                that.jsApiCall()
              }
            })
        })
      },
      closeAdd(data){
        this.addressPop = false;
        this.initPage()
      },
      showAdd(){
        this.addressPop = true
      },
      initPage(){

        getUserAdressApi().then(res=>{
          this.addressObj = res
        });
        this.shopId = this.$route.query.shopId;
        getGoodsDetailApi(this.shopId).then(data=>{
          this.groupDetail = data;
          this.source = this.$route.query.source;
          if(this.type === 0){
            this.price=data.single_price/100
          }else{
            this.price = data.group_price/100
          }
        });
        this.jsApiCall()
      }
    }
  }
</script>

<style scoped lang="less">
  .slide-fade-enter-active {
    transition: all .5s ease;
  }
  .slide-fade-leave-active {
    transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
  }
  .group-buy{
    .address-block{
      background: #f0f0f0;
      padding: 10/7.5vw 0;
      .add-address{
        background: white;
        height: 90/7.5vw;
        line-height: 90/7.5vw;
        margin: 20/7.5vw 20/7.5vw;
        text-align: center;
        border-radius: 100px;
        font-size: 16px;
        color: #666666;
      }
      .address-content{
        padding: 20/7.5vw;
        background: white;
        line-height: 1.6em;
      }
    }
    .shop-block{
      .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;
        }
      }
    }
    footer{
      position: fixed;
      bottom: 0;
      width: 100%;
      border-top: 1px solid #d8d8d8;
      padding-left: 20/7.5vw;
      height: 100/7.5vw;
      line-height: 100/7.5vw;
      span{
        font-size: 20px;
        color: #F83534;
      }
      .pay-btn{
        width: 300/7.5vw;
        text-align: center;
        float: right;
        height: 100/7.5vw;
        background: #F83534;
        color: white;
      }
    }
    .address-pop{
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      position: fixed;
      background: white;
    }
  }


</style>
