<template>
  <div class="pay">
    <div class="pay-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="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">注释：在提交800元申请费后，申请人需上传并提交如下文件。</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="toApplication">立即预约</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)
    },
    // 填写个人资料
    toApplication() {
      this.$router.push('/my/application?active=application_info')
    }
  },
  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;
  padding: 40px 0;
}
.pay-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;
  }
}
.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>
