<template>
  <div class="qrpay">
    <div class="qrpay-hd">
      <div class="pic">
        <img src="../../../../assets/images/my_pay_02.png" height="160" />
      </div>
      <h1>请使用微信扫描下方二维码</h1>
    </div>
    <div class="qrcode-error" v-if="qrcodeError">
      生成二维码失败请刷新<i class="el-icon-refresh-left" @click="getOrder" title="刷新"></i>
    </div>
    <div class="qrcode" v-else>
      <qrcode-vue :value="qrcodeValue" size="100"></qrcode-vue>
      <span @click="getOrder">刷新</span>
    </div>
  </div>
</template>

<script>
import QrcodeVue from 'qrcode.vue'
import * as api from '@/api/my'

export default {
  components: { QrcodeVue },
  data() {
    return {
      order: { id: '', payment_url: '' },
      qrcodeError: false
    }
  },
  computed: {
    // 二维码地址
    qrcodeValue() {
      return this.order.payment_url
    }
  },
  methods: {
    // 获取订单
    getOrder() {
      api.getOrder({ payment_method: 'WX_PAY_QR' }).then(response => {
        const { data, error, message } = response
        this.qrcodeError = error.toString() === '1'
        if (error.toString() === '0') {
          this.order = data
          this.$emit('update', this.order)
        } else {
          this.$message.error(message)
        }
      })
    }
  },
  beforeMount() {
    this.getOrder()
  }
}
</script>

<style lang="scss" scoped>
.qrpay-hd {
  .pic {
    text-align: center;
  }
  h1 {
    margin-top: 40px;
    font-size: 24px;
    font-weight: 500;
    color: #222;
    line-height: 1;
    text-align: center;
  }
}
.qrcode {
  padding: 20px 0;
  text-align: center;
  span {
    margin-top: 10px;
    font-size: 12px;
    color: #999;
    cursor: pointer;
  }
}
.qrcode-error {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 20px auto;
  color: var(--main-color);
  border-style: dashed;
  border-width: 1px;
  border-color: var(--main-color);
  box-sizing: border-box;
  text-align: center;
  i {
    margin-top: 10px;
    cursor: pointer;
  }
}
</style>
