<template>
  <div class="pay">
    <!-- 微信 -->
    <div class="qr-pay" v-if="payment === '2'">
      <qrcode-vue :value="qrcodeValue" size="200"></qrcode-vue>
      <p class="tips">微信扫一扫支付</p>
    </div>
    <!-- 支付宝 -->
    <div class="qr-pay" v-else-if="payment === '1'">
      <qrcode-vue :value="qrcodeValue" size="200"></qrcode-vue>
      <p class="tips">支付宝扫一扫支付</p>
    </div>
    <!-- 银行转账 -->
    <div class="bank-pay" v-else>
      <p>银行账户名称：清控紫荆（北京）教育科技股份有限公司</p>
      <p>银行帐号：694485289</p>
      <p>开户行：中国民生银行股份有限公司北京魏公村支行</p>
      <div class="is-center">
        <el-button type="primary" @click="$emit('success')">我已支付成功，已告知教务老师</el-button>
      </div>
    </div>
  </div>
</template>

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

export default {
  props: {
    payment: { type: String }, // 支付方式
    product: { type: Object, required: true }, // 商品信息
    num: { type: [Number, String], default: 1 } // 购买数量
  },
  components: { QrcodeVue },
  data() {
    return {
      order: {}, // 创建订单返回的数据
      rawOrder: {}, // 获取订单返回的数据
      timer: null
    }
  },
  computed: {
    qrcodeValue() {
      return this.order.payment_url
    },
    pid() {
      return this.$route.params.id
    },
    notifyUrl() {
      return `${webConf.apiBaseURL}/api/lms/v2/lobby/update-status-api/${this.pid}`
    }
  },
  methods: {
    // 创建订单
    createOrder() {
      // 支付类型(1:微信扫码支付,2:微信小程序支付,3:微信JSAPI支付,4:微信h5支付,11:支付宝扫码支付,12:支付宝手机网站支付,13:支付宝网站支付)
      const payment = { 1: '11', 2: '1' }
      const params = {
        buy_count: this.num + '',
        payment_method: payment[this.payment],
        shop_id: this.product.shop_id,
        spu_id: this.product.spu_id,
        sku_id: this.product.sku_id,
        notify_url: this.notifyUrl
      }
      return api.createOrder(params).then(response => {
        if (response.code === 0) {
          this.order = response
        } else {
          this.$message.error(response.msg)
        }
        return response
      })
    },
    getOrder() {
      const params = {
        shop_id: this.product.shop_id,
        spu_id: this.product.spu_id,
        order_id: this.order.order_id
      }
      return api.getOrderList(params).then(response => {
        const [order = {}] = response.data
        this.rawOrder = order
        return order
      })
    },
    setTimer() {
      this.timer = setInterval(() => {
        this.getOrder().then(response => {
          // 支付成功
          if (response.order_status === '4') {
            this.$emit('success')
            this.clearTimer()
          }
        })
      }, 5000)
    },
    clearTimer() {
      this.timer && clearInterval(this.timer)
    }
  },
  mounted() {
    if (this.payment === '3') return
    this.createOrder().then(this.setTimer)
  },
  destroyed() {
    this.clearTimer()
  }
}
</script>

<style lang="scss" scoped>
.qr-pay {
  text-align: center;
}
.tips {
  color: #999;
}
.bank-pay {
  line-height: 30px;
  p {
    margin: 0;
  }
  .el-button {
    margin-top: 20px;
  }
}
.is-center {
  text-align: center;
}
</style>
