<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">
                        <div style="text-align: center;">
                          <iframe id="aliIframe" :src="payUrl" scrolling="no" style="width: 200px;height: 200px;" frameborder="0"></iframe>
                        </div>
                        <!-- <QrcodeVue level="H" size="200" :value="payUrl" class="light-shadow"></QrcodeVue> -->
                        <img src="../../assets/img/pay/ali_tip.png" 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>
                        <!--  v-if="isPay" -->
                        <q-btn 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> -->
                        <!-- {{min&&sec?min+'分'+sec+'秒':min==0&&sec?sec+'秒':'支付'}} -->
                        <q-btn unelevated dense :label="KeepTimeTitle" :loading="TimeLoading"
                        :disable="KeepTimeTitle!='刷新二维码'"
                        color="primary" class="q-px-md" @click="KeepTimeTitle=='刷新二维码'?initPayInfo(1):''"></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'
import { date } from 'quasar'
export default {
    data() {
        return {
            TimeLoading:false,
            KeepTimeTitle: '',
            loading:true,
            showDialog:true,
            payUrl:'',
            checkLoading:false,
            isPay: true,
            formattedString: null,
            day:'',
            hr:'',
            min:'',
            sec:''
        }
    },
    props:{
        orderNo:{
            type:String,
            required:true
        }
    },
    components:{QrcodeVue},
    created () {
        if(this.orderNo){
            this.initPayInfo()
        }else{
            this.loading=false
        }
    },
    mounted() {

    },
    methods: {
      //倒计时
      countdown () {
        const end = Date.parse(new Date(this.formattedString))
        const now = Date.parse(new Date())
        const msec = end - now
        if(msec<0) return;
        let day = parseInt(msec / 1000 / 60 / 60 / 24)
        let hr = parseInt(msec / 1000 / 60 / 60 % 24)
        let min = parseInt(msec / 1000 / 60 % 60)
        let sec = parseInt(msec / 1000 % 60)
        this.day = day
        this.hr = hr > 9 ? hr : '0' + hr
        this.min = min > 9 ? min : '0' + min
        this.sec = sec > 9 ? sec : '0' + sec
        this.KeepTimeTitle = '60秒'
        const that = this
        if(min>=0 && sec>=0){
          //倒计时结束关闭订单
          if(min==0){
            this.KeepTimeTitle = this.sec+'秒'
          }
          if(min==0 && sec==0){
            this.KeepTimeTitle = '刷新二维码'
            return
          }
          setTimeout(function () {
            that.countdown()
          }, 1000)
        }
      },
        Gotopay(){
          this.OpenNewUrl(this.payUrl)
        },
        initPayInfo(type){
          if(type){
            this.TimeLoading = true
          }
            this.apipost("GetAliPayByOrderNo_post",{OrderNo:this.orderNo},r=>{
                if(r.data.resultCode==1){
                  let timeStamp = Date.now()
                    timeStamp = timeStamp+(1*1000*60)
                    this.formattedString = date.formatDate(timeStamp, 'YYYY-MM-DD HH:mm:ss')
                    this.countdown()
                    this.payUrl = r.data.data.QrCode
                    this.checkPaySatausHandler()

                    this.loading = false
                    setTimeout(()=>{
                      this.TimeLoading = false
                    },500)
                }else{
                  this.cancelPayHandler()
                  this.$message.error(r.data.message)
                }
            })
        },
        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.message=="退款成功"){
                    this.$message.success("退款成功")
                }else{
                    this.$message.error("退款失败")
                }
            },e=>{

            })
        },
        cancelPayHandler(){
            this.$emit("cancel")
        }
    },
}
</script>

<style>

</style>
