<!--
  @description: 微信支付页面
  @Modifier: haoFx
  @routerPath:/payCenter/pay
  @date: 2020/3/5-10:43
-->
<template>
  <section class="payment">
    <!--微信支付二维码-->
    <div class="weChatPayment weChat_wrap">
      <div>正在使用即时到账交易</div>
      <div class="presentation clearfix">
        <span class="buy_tender">
          <span v-if="goodsType==='00'">购买标书</span>
          <span v-if="goodsType==='01'">投标服务费</span>
        </span>
        <span>收款方:{{ payCollectionPartyName }}</span>
        <div class="fr">
          应付金额：
          <span class="money">{{ formRules.payServicePrice }}元</span>
        </div>
      </div>
      <div class="pay_wrap">
        <div class="clue">
          <span class="title">{{ payMode | filterPayWay }}支付</span>
          <span>距离二维码过期还剩 <i>{{ keepTime }}</i> ,过期后请刷新页面获取二维码</span>
        </div>
        <div class="qrCode">
          <div style="line-height:30px;text-align: center;">
            <iframe width="300" height="300" frameborder="0" :src="QRcodeUrl" />
            <!-- <img v-if="QRcodeUrl" :src="QRcodeUrl"> -->
          </div>
          <div class="pay_prompt">
            <i class="iconfont icon-saoyisao" />
            <div style="line-height: initial;">
              <span>请使用{{ payMode | filterPayWay }}扫一扫</span>
              <span>扫描二维码支付</span>
            </div>
          </div>
        </div>
        <!--微信支付展示-->
        <div v-if="payWay ==='1'" class="richScan">
          <img src="@/assets/img/common/pay/pay.png">
        </div>
      </div>
    </div>
    <!--微信支付成功提示-->
    <el-dialog
      :visible.sync="paySuccessDialogVisible"
      :close-on-click-modal="false"
      title="支付成功"
      custom-class="paymentDialog"
      width="840px"
    >
      <div class="weChatPayment">
        <div>正在使用即时到账交易</div>
        <div class="presentation">
          <span class="buy_tender">
            <span v-if="goodsType==='00'">购买标书</span>
            <span v-if="goodsType==='01'">投标服务费</span>
          </span>
          <span>收款方:{{ payCollectionPartyName }}</span>
          <div class="fr">
            应付金额：
            <span class="money">{{ formRules.payServicePrice }}元</span>
          </div>
        </div>
        <div class="pay_wrap pay_success">
          <div class="qrCode">
            <i class="iconfont icon-zhucechenggong" />
            <h2>支付成功！</h2>
            <h4>已成功支付{{ formRules.payServicePrice }}元</h4>
          </div>
        </div>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { readImage } from '@api/common/uploadCenter'
import { getOrderStatusByOrderNo, getPayPriceByOrderNo, qcPayBid, selectPayConfigInfoById } from '@/api/bidding/payCenter'
export default {
  name: 'Pay',
  filters: {
    filterPayWay(payWayType) {
      const statusMap = {
        '0': '支付宝',
        '1': '微信',
        '2': '银联'
      }
      return statusMap[payWayType]
    }
  },
  data() {
    return {
      productId: this.$route.query.orderId, // 业务id
      outTradeNo: this.$route.query.orderNo,
      goodsType: this.$route.query.goodsType,
      orderdescribe: this.$route.query.orderDescribe,
      payConfigId: this.$route.query.payConfigId,
      payWay: this.$route.query.payWay, // 0支付宝 1微信 2银联
      payMode: this.$route.query.payMode, // 00支付宝 01微信 02银联 03广发 04中金
      accessToken: this.$route.query.accessToken,
      payCollectionPartyName: '', // 收款方名称
      formRules: {
        payServicePrice: '' // 标书费
      },
      readImageUrl: readImage, // 预览图片
      paySuccessDialogVisible: false, // 微信支付成功弹框
      hours: 0,
      minutes: 0,
      seconds: 0,
      QRcodeUrl: '', // 微信支付二维码
      keepTime: '', // 两小时倒计时时间
      timer: true, // 每秒去获取支付状态的定时器
      payStatus: '00' // 微信支付状态01支付回调成功  00支付未回调或回调失败
    }
  },
  mounted() {
    // 获取系统配置信息-收款方
    // this.$store.dispatch('SetSysConfig', 'payCollectionParty').then((data) => {
    //   this.payCollectionPartyName = data.configValue
    // })
    this.selectPayConfigInfoById() // 根据id查询支付配置信息
    this.getPayPriceByOrde()
    this.getQcPayBid()
  },
  methods: {
    // 根据id查询支付配置信息
    selectPayConfigInfoById() {
      const params = {
        payConfigId: this.payConfigId
      }
      selectPayConfigInfoById(this.accessToken, params).then((res) => {
        this.payCollectionPartyName = res.data.reciveDepartName
      })
    },
    // 获取订单价格
    getPayPriceByOrde() {
      const data = {
        outTradeNo: this.outTradeNo,
        goodsType: this.goodsType

      }
      getPayPriceByOrderNo(this.accessToken, data).then(res => {
        this.formRules.payServicePrice = res.data
      }).catch(() => {

      })
    },
    // 获取二维码
    getQcPayBid() {
      const data = {
        productId: this.productId, // 业务id
        outTradeNo: this.outTradeNo,
        orderdescribe: this.orderdescribe,
        payConfigId: this.payConfigId,
        goodsType: this.goodsType,
        payWay: this.payWay, // 0支付宝 1微信 2银联
        payMode: this.payMode // 00支付宝 01微信 02银联 03广发 04中金
      }
      qcPayBid(this.accessToken, data).then(res => {
        if (res.data) {
          // if (this.payMode === '02') {
          this.QRcodeUrl = res.data
          // } else {
          //   this.QRcodeUrl = this.readImageUrl + res.data
          // }
          this.countdown()
        }
      }).catch(() => {

      })
    },
    // 倒计时函数
    countdown() {
      let timeValue = 7200
      this.timer = setInterval(() => {
        let s = parseInt(timeValue)// 秒
        let m = 0// 分
        let h = 0// 小时
        if (s > 60) {
          m = parseInt(s / 60)
          s = parseInt(s % 60)
          if (m > 60) {
            h = parseInt(m / 60)
            m = parseInt(m % 60)
          }
        }
        this.hours = h > 9 ? h : '0' + h
        this.minutes = m > 9 ? m : '0' + m
        this.seconds = s > 9 ? s : '0' + s
        --timeValue
        this.keepTime = `${this.hours}:${this.minutes}:${this.seconds}`
        const data = {
          orderNo: this.outTradeNo,
          goodsType: this.goodsType
        }
        getOrderStatusByOrderNo(this.accessToken, data).then(response => {
          this.payStatus = response.data
          if (this.payStatus === '01') { // 01为支付成功则停止刷新状态
            clearInterval(this.timer)
            this.timer = false
            this.paySuccessDialogVisible = true
          }
        }).catch(() => {

        })
      }, 2000)
    }
  }
}
</script>

<style lang="less" scoped>

</style>

