<template>
  <div>
    <q-dialog v-model="$q.platform.is.desktop" persistent>
        <q-card flat class="q-pa-lg" style="width:600px !important;max-width:600px !important">
            <div class="text-h6 text-weight-bold q-mb-lg">微信支付</div>
            <div class="text-center">
                <q-inner-loading :showing="loading" label="正在加載中"></q-inner-loading>
                <div v-if="$q.platform.is.desktop && orderNo && payUrl!='' && !loading">
                    <div class="row justify-center">
                        <QrcodeVue level="H" size="200" :value="payUrl" class="light-shadow"></QrcodeVue>
                        <img src="../../assets/img/pay/wx_tip.jpg" class="q-ml-md" style="height:200px;">
                        
                    </div>
                    <div class="text-body2 q-mt-lg text-grey-6">請打開微信（WeChat），使用 [掃一掃]掃描上方二維碼進行支付</div>
                    <div class="q-mt-lg text-right">
                        <q-btn outline dense label="取消支付" color="primary" class="q-px-md q-mr-md" @click="cancelPayHandler"></q-btn>
                        <q-btn unelevated dense label="已完成付款" :loading="checkLoading" color="primary" class="q-px-md" @click="checkPaySatausHandler"></q-btn>
                    </div>
                </div>
                <div class="q-ma-xl" v-if="!orderNo && !loading">
                    創建付款連接失敗，請刷新頁面重試
                </div>
              </div>
              
        </q-card>
        
      </q-dialog>
  </div>
  
</template>

<script>
import QrcodeVue from 'qrcode.vue'
export default {
    data() {
        return {
            loading:true,
            showDialog:true,
            payUrl:'weixin://wxpay/bizpayurl?pr=CDXqaD1zz',
            checkLoading:false
        }
    },
    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
                    }
                }else{
                    this.cancelPayHandler()
                    this.$message.error(r.data.message)
                }
                this.loading=false
            })
        },
        checkPaySatausHandler(){
            this.checkLoading=true
            this.apipost("GetDetailsByOrderNo_post",{OrderNo:this.orderNo},r=>{
                if(r.data.resultCode==1){
                    if(r.data.data.OrderStatus==2||r.data.data.OrderStatus==3){
                        this.CommonJump("/paysuccess/" + this.orderNo, {});
                    }else{
                        this.$message.error("當前訂單未支付，請您繼續完成訂單支付")
                    }
                }else{
                    location.reload()
                }
                this.checkLoading=false
            },e=>{
                this.checkLoading=false
            })
        },
        cancelPayHandler(){
            this.$emit("cancel")
        }
    },
}
</script>

<style>

</style>