<template>
  <div class="text-center">
    <q-inner-loading :showing="loading" label="正在加載中"></q-inner-loading>
    <div v-if="$q.platform.is.desktop && orderNo && payUrl!='' && !loading" class="q-my-xl">
        <QrcodeVue level="H" size="256" :value="payUrl"></QrcodeVue>
        <div class="text-body2 q-mt-lg">請打開微信（WeChat），使用 [掃一掃]，掃描上方二維碼進行支付</div>
    </div>
    <div class="q-my-xl" v-if="!orderNo && !loading">
        創建付款連接失敗，請刷新頁面重試
    </div>
  </div>
</template>

<script>
import QrcodeVue from 'qrcode.vue'
export default {
    data() {
        return {
            loading:true,
            payUrl:'weixin://wxpay/bizpayurl?pr=CDXqaD1zz'
        }
    },
    props:{
        orderNo:{
            type:String,
            required:true
        }
    },
    components:{QrcodeVue},
    created () {
        if(this.orderNo){
            this.initPayInfo()
        }else{
            this.loading=false
        }
    },
    methods: {
        initPayInfo(){
            this.apipost("GetCodeByOrderNo_post",{OrderNo:this.orderNo},r=>{
                if(r.data.resultCode==1){
                    this.payUrl = r.data.data.code_url
                    if(this.$q.platform.is.mobile){
                        location.href=this.payUrl
                    }
                }
                this.loading=false
            })
        }
    },
}
</script>

<style>

</style>