<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>
      <p>
        <span @click="dialogFormVisible = true">我有邀请码</span>
      </p>
    </div>
    <el-dialog title="输入邀请码" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" :visible.sync="dialogFormVisible">
        <el-input v-model="discountCode" autocomplete="off" placeholder="请输入邀请码"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="getOrder('code')">确 定</el-button>
      </div>
    </el-dialog>
  </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,
      dialogFormVisible: false,
      discountCode: ''
    }
  },
  computed: {
    // 二维码地址
    qrcodeValue() {
      return this.order.payment_url
    }
  },
  methods: {
    close() {
      this.getOrder()
      this.dialogFormVisible = false
    },
    // 获取订单
    getOrder(type) {
      const params = { payment_method: 'WX_PAY_QR' }
      if (type === 'code') {
        if (this.discountCode === '') {
          this.$message({ message: '请输入邀请码', type: 'warning' })
          return
        }
        params.discount_code = this.discountCode
      }
      api.getPayment(params).then(response => {
        const { data, error, message } = response
        this.qrcodeError = error.toString() === '1'
        if (error.toString() === '0') {
          this.order = data
          this.$emit('update', this.order)
          // 邀请码
          this.discountCode = ''
          this.dialogFormVisible = false
        } 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 5px;
  text-align: center;
  span {
    margin-top: 10px;
    font-size: 12px;
    color: #999;
    cursor: pointer;
  }
  p {
    margin-top: 20px;
    span {
      color: #af1b40;
    }
  }
}
.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;
  }
}
::v-deep {
  .el-dialog {
    margin-top: 40vh !important;
    height: 300px !important;
  }
  .el-dialog__header {
    padding-top: 60px;
  }
}
</style>
