<template>
  <div class="templatePayURL" style="margin-right: 10px;">
    <div style="color:red;font-size:16px;font-weight:bold;">请不要刷新页面，否则无法支付成功，订单自动取消！支付成功将自动刷新页面!</div>
    <div>
      <template v-if="!isShowPic">
        <div style="margin: 15px 0;">
          <div>
            总金额：<span style="color:red;">{{item.TotalPrice}}</span>
          </div>
          <p style="margin: 25px 0;">
            <el-radio v-model="payWay" label="1">微信</el-radio>
            <el-radio v-model="payWay" label="3">支付宝</el-radio>
          </p>
          <p>
            <input type="button" @click="getPayPic(item)" style="width:100%;margin-left:0;" class="normalBtn"
              value="生成收款码" />
          </p>
        </div>
      </template>
      <template v-if="isShowPic">
        <div style="margin: 15px 0;">
          <img :src="payPic"
            style="float: left; margin-right: 15px; width: 150px; height: 150px; border: 1px solid #ccc;" />
          <p style="padding-right: 10px; font-size: 12px; line-height: 20px; margin-bottom: 10px;">
            <span style="color: #E95252;">{{payWay=="1"?'微信':'支付宝'}}</span>二维码有效时间为5分钟，为了不影响客户支付，请及时转发，以免失效
          </p>
          <p class="fz12 color333">倒计时</p>
          <p style="color: #E95252; font-weight: bold; font-size: 12px; margin: 8px 0;">{{descMin}}分{{descSecond}}秒</p>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
  export default {
    props: ["item"],
    data() {
      return {
        payWay: '1',
        payType: 211,
        lastTime: '',
        isShowPic: false,
        payPic: '',
        isDesc: false,
        descMin: 0,
        descSecond: 0,
        descHour: 0,
        nowDate: new Date(),
        timer: null,
        timer2: null,
        chaTime: 0,
      };
    },
    mounted() {

    },
    methods: {
      initData() {
        this.payWay = "1";
        this.lastTime = '';
        this.isShowPic = false;
        this.payPic = "";
        this.descMin = 0;
        this.descSecond = 0;
        this.descHour = 0;
        this.timer = null;
        this.timer2 = null;
        this.chaTime = 0;
      },
      getPayPic(obj) {
        let msg = {}
        msg.OrderSource = 16
        msg.body = "支付赞羊商品订单:" + obj.orderId;
        msg.attach = this.payType + '|' + obj.contactName + '|' + obj.orderId + '|' + obj.customerId + '|' + obj
          .outBranchId
        msg.total_fee = obj.TotalPrice
        msg.payway = this.payWay
        this.apipost('OnlinePay_post_GetCodeUrl', msg, res => {
          if (res.data.resultCode == 1) {
            this.payPic = res.data.data.CodeURL;
            this.lastTime = new Date(res.data.data.ExpireDate)
            this.nowDate = new Date(res.data.data.NowDate)
            this.chaTime = this.lastTime - this.nowDate
            this.timer = setInterval(() => {
              this.descTime(this.chaTime)
            }, 1000);
            this.isShowPic = true;
            //重复调用支付状态
            this.timer2 = setInterval(() => {
              this.getPayStatus()
            }, 2000);
          } else {
            this.Error(res.data.message)
          }
        }, err => {})
      },

      //获取付款状态
      getPayStatus() {
        let msg = {
          OrderId: this.item.orderId
        }
        var myPay = this.payWay;
        if (myPay == 3) {
          myPay = 2
        }
        this.apipost('OnlinePay_post_CheckOrderPay', msg, res => {
          if (res.data.resultCode == 1) {
            var data = res.data.data;

            // var fee=(Number(this.item.TotalPrice)*0.002).toFixed(2);
            // let mallMsg = {
            //   OrderId: this.item.orderId,
            //   MerchantsNo: data.Pay_Order,
            //   User_Id: this.item.User_Id,
            //   Out_Trade_No: data.Trade_Order,
            //   Transaction_Id: data.Third_Order,
            //   PayWay: myPay,
            //   Money: this.item.TotalPrice,
            //   Remarks: "支付赞羊商品订单:" + this.item.orderId,
            //   Fee:fee,
            //   FinanceId:data.FinanceId
            // }
            clearInterval(this.timer2);
            clearInterval(this.timer);
            this.Success("支付成功!");
            this.$emit('closeDia')
            this.$emit('getGoodList');

            // this.mallapipost("/api/AppletOrder/UpdateERPGoodsOrderInfo", mallMsg, res => {
            //   if (res.data.resultCode == 1) {
            //     this.Success("支付成功!");
            //     this.$emit('closeDia')
            //     this.$emit('getGoodList');
            //     clearInterval(this.timer2);
            //     clearInterval(this.timer);
            //   } else {
            //     this.Error(res.data.message);
            //   }
            // })
          }
        }, err => {})
      },
      descTime() {
        let hr = parseInt(this.chaTime / 1000 / 60 / 60 % 24)
        let min = parseInt(this.chaTime / 1000 / 60 % 60)
        let sec = parseInt(this.chaTime / 1000 % 60)
        // 个位数前补零
        hr = hr > 9 ? hr : '0' + hr
        min = min > 9 ? min : '0' + min
        sec = sec > 9 ? sec : '0' + sec
        // 控制台打印
        if (this.chaTime > 0) {
          if (hr > 0) {
            this.descHour = hr;
          }
          if (Number(min + this.descHour * 60) > 9) {
            this.descMin = Number(min + this.descHour * 60);
          } else {
            this.descMin = "0" + Number(min + this.descHour * 60);
          }

          this.descSecond = sec;
        } else {
          this.isShowPic = false
          this.descMin = 0
          this.descSecond = 0
          this.descHour = 0
          clearInterval(this.timer)
        }
        this.chaTime -= 1000
        // 一秒后递归
      },
      //取消清除
      clearCount() {
        clearInterval(this.timer)
      }
    },
  };

</script>
<style>
  .templatePayURL .el-input--suffix .el-input__inner {
    padding: 0 10px 0 8px !important;
    font-size: 12px;
  }

  .templatePayURL .el-input__suffix {
    right: 0 !important;
  }

</style>