<template>
  <div class="pay">
    <h5-pay @update="handleUpdateOrder" v-if="isWechat"></h5-pay>
    <qrcode-pay @update="handleUpdateOrder" v-else></qrcode-pay>
    <div class="pay-ft">
      <p class="t2">
        注释：在提交700元申请费后，申请人需上传并提交如下文件。<br />
        ①填写报名表、②完成推荐信2封、③本科学历学位证书、④中英文成绩单、⑤个人证件照<br />
        该申请费不退，请慎重缴费！
      </p>
    </div>
    <el-dialog
      title="报名费缴费成功"
      :visible.sync="dialogVisible"
      :center="true"
      :show-close="false"
      :close-on-click-modal="false"
      width="348px"
    >
      <div class="dialog-pay">
        <p>请按照要求填写报名所需材料，完成“提交报名申请”及“申请面试”</p>
        <div class="icon"><img src="https://webapp-pub.ezijing.com/project/application/images/icon_success.png" /></div>
      </div>
      <template #footer>
        <el-button type="primary" @click="toApplication">立即预约</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import * as api from '@/api/my'
import qrcodePay from './components/qrcodePay'
import h5Pay from './components/h5Pay'
export default {
  name: 'AppPay',
  components: { qrcodePay, h5Pay },
  data() {
    const UA = window.navigator.userAgent
    const isMobile = /android|iphone|ipad|ipod/i.test(UA)
    return {
      isWechat: isMobile && /micromessenger/i.test(UA),
      order: { id: '', payment_url: '' },
      dialogVisible: false,
      timer: null,
      paymentRecords: [] // 所有订单
    }
  },
  computed: {
    user() {
      return this.$store.state.user
    },
    // 二维码地址
    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
        }
      })
    },
    // 检查支付状态
    checkPay(order) {
      const userId = this.user.id
      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(() => {
        if (this.paySuccess) {
          this.timer && clearInterval(this.timer)
          return
        }
        this.orderList.forEach(order => this.checkPay(order))
      }, 3000)
    },
    // 填写个人资料
    toApplication() {
      this.$router.push('/my/account')
    },
    handleUpdateOrder(order) {
      this.order = order
    }
  },
  async mounted() {
    await this.getApplication()
    this.setCheckPayTimer()
  },
  destroyed() {
    this.timer && clearInterval(this.timer)
  }
}
</script>

<style lang="scss" scoped>
.pay {
  max-width: 562px;
  margin: 0 auto;
  padding: 40px 0;
}
.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>
