<template>
    <div class="container pcContainer">
        <headB></headB>
        <div class="w12">
          <div class="order_c">
            <p class="p1"><span class="t">订单号：</span>{{orderNumber}}</p>
            <p class="p1"><span class="t">总金额：</span><i class="price iconfont icon-loading" v-show="amount<=0"></i><i class="price" v-show="amount>0">{{'￥'+amount.toFixed(2)}}</i></p>
          </div>
          <div class="pay_weixin">
            <div class="p_title">微信支付</div>
            <div class="p_w_box">
              <p class="p_w_p1 hide" v-show="count">距离二维码过期还剩<font color="#fe7065">{{count}}</font>秒，<br>过期后请刷新页面重新获取二维码。</p>
              <p class="p_w_p1 hide redColor" v-show="!count">二维码已过期，<a href="javaScript:void(0)" class="refresh" @click="useqrcode">刷新</a>页面重新获取二维码。</p>
              <div class="code_box">
                <!--<img :src="codeImg" v-show="codeImg" width="100%" alt="微信支付二维码">-->
                <canvas id="canvas"></canvas>
              </div>
              <p class="p_w_p2">请使用微信扫一扫<br>扫描二维码支付</p>
            </div>
            <div class="wx_tip">
              <img src="../../assets/images/pc/weixin.png" alt="">
            </div>
            <router-link :to="'/pay/'+orderNumber" class="chooseOther"><i class="iconfont icon-xingzhuangkaobei rotateX"></i>选择其他支付方式</router-link>
          </div>
        </div>
        <footB style="margin-top: 74px"></footB>

      <!--<div class="loading_bg" v-show="loading">-->
        <!--<i class="iconfont icon-loading"></i>-->
      <!--</div>-->
    </div>
</template>
<script>
    import QRCode from 'qrcode'
    export default {
        name: '',
        data () {
            return {
              loading:false,
              isVerificate:false,
              count : 60,
              codeImg : '',
              key:this.$route.params.orderNumber,
              orderNumber : this.$route.params.orderNumber,
              amount:0
            }
        },
        methods: {
          /**获取订单信息*/
          getOrderInfo(){
            this.loading=true;
            getOrderInfoByOrderNumber({orderNumber:this.orderNumber}).then(data=>{
              if(data.returnCode==200){
//                this.orderNumber=data.data.OrderNumber;
                this.amount=parseFloat(data.data.orderActualPrice);
                this.loading=false;
                this.useqrcode();
              }
            });
          },
          /**微信二维码*/
          useqrcode(){
            var _this = this;
            _this.loading=true;
            var canvas = document.getElementById('canvas');
            getWeChatPayQrCodeByOrderNumber({orderNumber:this.orderNumber}).then(data=>{
              _this.loading=false;
              if(data.returnCode==200){
                QRCode.toCanvas(canvas, data.data, function (error) {
                  if (error) console.error(error);
                  if(!_this.isVerificate){
                    _this.timer = setInterval(function () {
                      _this.getOrderPayState();
                    },3000);
                  }else {
                    this.isVerificate = true;
                    clearInterval(_this.timer);
                  }
  //                _this.codeImg = canvas.toDataURL("image/png");
                  _this.count = 60;
  //                _this.countDown();
                })
              }else {
                this.msgInfoAlert();
              }
            });
          },
          getOrderPayState(){
            getOrderPayState({orderNumber:this.orderNumber}).then(data=>{
              if(data.returnCode==200 && data.data){
                this.isVerificate = true;
                this.$router.push('/paySuccess/orderNumber='+this.orderNumber);
              }else if(data.returnCode==30005){
                this.msgInfoAlert();
              }
            })
          },

          msgInfoAlert(){
            this.$alert('<strong>很抱歉，由于您停留时间太长，资源发生变化，订单已关闭</strong>', {
              dangerouslyUseHTMLString: true,
              distinguishCancelAndClose: true,
              showClose:false,
              confirmButtonText:'返回首页',
              center:true,
              beforeClose: (action, instance, done) => {
                done();
                this.$router.push('/')
              }
            });
          },

          countDown(){
            var _this = this;
            if(_this.count > 0){
              _this.count--;
              setTimeout(_this.countDown, 1000);
            }else{
              _this.count = '';
            }
          }
        },
        mounted(){
          this.getOrderInfo();
        },
        destroyed: function () {
          clearInterval(this.timer)
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  @import "pay.styl"
  @import "../../assets/stylus/animate.min.styl"
  .chooseOther{
    position absolute
    bottom 28px
    left 28px
    font-size 16px
    color blueColor
  }
  .rotateX{
    display inline-block
    transform rotate(180deg)
  }

  .pay_weixin{
    position relative
    width 1200px
    height 560px
    padding-top 26px
    background #fff
    box-shadow 0 0px 12px rgba(231, 230, 230, 0.44)
    box-sizing border-box
    .p_title{
      padding-left 28px
      font-size 24px
      color mainTitleColor
    }
    .p_w_box{
      width 300px
      margin-top 18px
      margin-left 280px
      text-align center
      .code_box{
        width 300px
        height 300px
        margin 15px 0
        background #e5e5e5
        #canvas{
          width: 100%!important;
          height: 100%!important;
        }
      }
      .p_w_p1{
        height 40px
        line-height 20px
        font-size 12px
        color #666666
        &.redColor{
          color #fe7065
          .refresh{
            color #6eaaf9
          }
        }
      }
      .p_w_p2{
        line-height 26px
        font-size 16px
        color subheadColor
      }
    }
    .wx_tip{
      position absolute
      width 340px
      right 216px
      top 64px
      overflow hidden
      img{
        width 100%
        animation: 0.8s fadeInRight ease-in-out ;
      }
    }
  }
  .loading_bg{
    text-align center
    background rgba(255, 255, 255, 0.35)
    position fixed
    width 100%
    height 100%
    top 0
    i{
      display inline-block
      position relative
      top 40%
      transform translate(-50%,-50%)
      font-size 32px
      color #fe7065
      animation: 0.8s rotate  linear infinite;
    }
  }
</style>
