<template>
  <div style="padding-top: 50px">
    <div class="pay-result">
      <div :style="{'background-image': 'url('+resultBG+')'}" class="result-bg"></div>
      <div>{{payMsg}}</div>
    </div>

    <div class="close" @click="closePage" v-show="isShow">关闭</div>
  </div>
</template>

<script>

import oKBg from '../assets/images/ok.png'
import noBg from '../assets/images/no.png'
import { queryBankOrderState } from '@/api/payResult/payResult'

export default {
  name: 'payResult',
  data() {
    return {
      resultBG: '',
      payMsg: '支付成功',
      orderId:'',
      isShow:false
    }
  },
  created(){
    // console.log(this.$route.query.ID)

    this.resultBG = oKBg

    if(window.navigator.userAgent.indexOf('Bankabc/Portal') > -1) {
      // alert('当前页面在新容器');
      this.isShow = true
    } else {
      // alert('当前页面在旧容器');

    }

    // this.orderId = localStorage.getItem("OrderNum")
    // this.queryBankOrderState()
    // alert(window.location.href)
    // alert(this.$router.query.ID)
  },
  mounted(){
    // alert(window.location.href)
  },
  methods:{
    queryBankOrderState:function () {
      let me = this
      let params = {
        payOrderId : me.orderId
      }
      queryBankOrderState(params).then(response => {
        console.log(response)
        if(response.data.payResultEnum == 'PAY_SUCCESS'){
          me.resultBG = oKBg
          me.payMsg = '支付成功'
        }else{
          me.resultBG = noBg
          me.payMsg = '支付失败'
        }

      })
    },
    closePage:function () {
      if(window.navigator.userAgent.indexOf('Bankabc/Portal') > -1) {
        // alert('当前页面在新容器');
        AlipayJSBridge.call('abcExitWebAndBackToHome');
      } else {
        // alert('当前页面在旧容器');
        // 旧支付方式

      }
    }
  }

}
</script>

<style scoped lang="scss">
  .pay-result {
    /*width: 150px;*/
    margin: 0 auto;
    text-align: center;
  }
  .result-bg {
    display: inline-block;
    width: 70px;
    height: 70px;
    background-position: center 0;
    background-size: 100% 100%;
  }
  .close{
    width: 80%;
    margin: 20px auto;
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    background: #0564cc;
    border-radius: 5px;
    cursor: pointer;
  }


</style>
