<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">請點擊支付，前往支付寶（Alipay）支付，使用支付寶[掃一掃]掃描二維碼進行支付</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 v-if="isPay" unelevated dense label="已完成付款" :loading="checkLoading" color="primary" class="q-px-md q-mr-md" 
                        @click="checkPaySatausHandler(1)"></q-btn>
                        <!-- <q-btn v-if="isPay" unelevated dense label="退款" :loading="checkLoading" color="primary" class="q-px-md" 
                        @click="GetAliPayReturn"></q-btn> -->
                        <q-btn v-if="!isPay"  unelevated dense label="支付" :loading="checkLoading" color="primary" class="q-px-md" @click="Gotopay"></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,
            isPay: true
        }
    },
    props:{
        orderNo:{
            type:String,
            required:true
        }
    },
    components:{QrcodeVue},
    created () {
        if(this.orderNo){
            this.initPayInfo()
        }else{
            this.loading=false
        }
    },
    methods: {
        Gotopay(){
            this.OpenNewUrl(this.payUrl)
        },
        initPayInfo(){
            this.apipost("GetAliPayByOrderNo_post",{OrderNo:this.orderNo},r=>{
                if(r.data.resultCode==1){
                    this.payUrl = r.data.data.QrCode
                    this.checkPaySatausHandler()
                }
                this.loading=false
            })
        },
        checkPaySatausHandler(type){
            this.apipost("GetDetailsByOrderNo_post",{OrderNo:this.orderNo},r=>{
                if(r.data.resultCode==1){
                    if(r.data.data.OrderStatus==2||r.data.data.OrderStatus==3){
                        if(type==1){
                            this.CommonJump("/paysuccess/" + this.orderNo, {}); 
                        }
                    }else{
                        this.isPay = false
                        if(type==1){
                          this.$message.error("當前訂單未支付，請您繼續完成訂單支付")  
                        }
                    }
                }else{
                    this.isPay = false 
                    if(type==1){
                       location.reload() 
                    }
                }
            },e=>{
                this.isPay = false 
            })
        },
        // 支付宝退款
        GetAliPayReturn(){
            this.apipost("GetAliPayReturn_post",{OrderNo:this.orderNo},r=>{
                if(r.data.resultCode==1){
                    this.$message.success("退款成功")  
                }else{
                    this.$message.error("退款失败")  
                }
            },e=>{
                
            })
        },
        cancelPayHandler(){
            this.$emit("cancel")
        }
    },
}
</script>

<style>

</style>