<template>
  <div class="pay">
    <div class="pic">
      <img src="../../../assets/images/my_pay_01.png" />
    </div>
    <div class="pay-hd">
      <h1>欢迎您</h1>
      <p class="t1">
        申请紫荆-美国印第安纳大学Kelley商学院金融学硕士项目，本项目的注册费、申请费共计<span>700</span>元，请扫描二维码缴费以完成报名。
      </p>
      <p class="t1" v-if="isPass">
        因面试未通过需重新申请紫荆-美国印第安纳大学Kelley商学院金融学硕士项目，本项目的注册费、申请费共计<span>700</span>元，请扫描二维码缴费以完成报名。
      </p>
    </div>
    <div class="qrcode-error" v-if="qrcodeError">
      生成二维码失败请刷新<i class="el-icon-refresh-left" @click="refreshQrcode" title="刷新"></i>
    </div>
    <div class="qrcode" v-else>
      <qrcode-vue :value="qrcodeValue" size="100"></qrcode-vue>
      <span @click="refreshQrcode">刷新</span>
    </div>
    <div class="pay-ft">
      <p class="t2">注释：再提交700元申请费后，申请人还需上传并提交如下文件。</p>
      <p class="t2">①本科学位证书、②本科中、英文成绩单各一份、③个人证件照（2寸、免冠、白底）</p>
      <p class="t2">该申请费不退，请慎重缴费！</p>
    </div>
    <el-dialog
      title="报名费缴费成功"
      :visible.sync="dialogVisible"
      :center="true"
      :close-on-click-modal="false"
      width="348px"
    >
      <div class="dialog-pay">
        <p>请填写申请面试的材料，材料齐全后<br />招生办老师将给您致电预约面试日期与时间</p>
        <div class="icon"><img src="../../../assets/images/icon_success.png" /></div>
      </div>
      <template #footer>
        <el-button type="primary" @click="toInterview">立即预约</el-button>
      </template>
    </el-dialog>
  </div>
</template>

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

export default {
  name: 'AppPay',
  components: { QrcodeVue },
  data() {
    return {
      isPass: false,
      order: { id: '', payment_url: '' },
      qrcodeError: false,
      dialogVisible: false,
      timer: null,
      paymentRecords: [] // 所有订单
    }
  },
  computed: {
    // 二维码地址
    qrcodeValue() {
      return this.order.payment_url
    },
    // 支付成功
    paySuccess() {
      return this.order.payment_status === 'SUCCESS'
    },
    // 待支付订单
    orderList() {
      // 筛选待支付订单
      const list = this.paymentRecords.filter(item => {
        return item.bill_type === 'APPLICATION_FEE' && item.payment_status === 'WAITING_FOR_PAY'
      })
      // 待支付订单是否有当前订单
      const found = list.find(item => item.id === this.order.id)
      return found ? list : [...list, this.order]
    }
  },
  methods: {
    // 获取报名信息
    async getApplication() {
      await api.getApplication().then(response => {
        const { payment_records: paymentRecords = [] } = response.data.material
        // 获取支付订单
        this.paymentRecords = paymentRecords
        if (paymentRecords && paymentRecords.length) {
          // 获取支付成功的订单
          const orderPaySuccess = paymentRecords.find(item => {
            return item.bill_type === 'APPLICATION_FEE' && item.payment_status === 'SUCCESS'
          })
          if (orderPaySuccess) {
            this.order = orderPaySuccess
            this.dialogVisible = true
            return
          }
          // 获取最后一个订单
          const [lastPayment] = paymentRecords.reverse()
          this.order = lastPayment
        }
      })
    },
    // 获取订单
    async getOrder() {
      if (this.paySuccess) {
        return
      }
      await 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
        } else {
          this.$message.error(message)
        }
      })
    },
    // 刷新二维码
    refreshQrcode() {
      this.getOrder()
    },
    // 检查支付状态
    async checkPay(order) {
      if (this.paySuccess) {
        this.timer && clearInterval(this.timer)
        return
      }
      const userId = window.G.UserInfo.id
      await api.checkPay(order.id, { user_id: userId }).then(response => {
        if (response.data.payment_status === 'SUCCESS') {
          this.timer && clearInterval(this.timer)
          this.dialogVisible = true
        }
      })
    },
    setCheckPayTimer() {
      this.timer && clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.orderList.forEach(order => {
          this.checkPay(order)
        })
      }, 3000)
    },
    // 申请面试
    toInterview() {
      this.$router.push('/my/interview')
    }
  },
  async mounted() {
    await this.getApplication()
    await this.getOrder()
    this.setCheckPayTimer()
  },
  destroyed() {
    this.timer && clearInterval(this.timer)
  }
}
</script>

<style lang="scss" scoped>
.pay {
  max-width: 562px;
  margin: 0 auto;
}
.pic {
  text-align: center;
}
.pay-hd {
  h1 {
    padding: 10px 0;
    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;
  }
}
.t1 {
  font-size: 14px;
  color: #303030;
  line-height: 20px;
  text-align: center;
  span {
    color: #ffa448;
  }
}
.t2 {
  font-size: 12px;
  color: #999;
  line-height: 20px;
}
.dialog-pay {
  text-align: center;
  p {
    color: #262626;
    line-height: 20px;
  }
  .icon {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
