<template>
  <div class="content-page order-preview order-pay-page" style="min-height:80vh;">
    <q-stepper
      v-model="step"
      ref="stepper"
      color="primary"
      inactive-color="grey-5 "
      done-color="primary"
      class="bg-transparent"
      flat
      animated
    >
      <q-step
        :name="1"
        title="確認訂單"
        icon="settings"
        :done="step > 1"
      ></q-step>

      <q-step
        :name="2"
        title="付款"
        icon="iconfont iconPayment-1"
        :done="step > 2"
      ></q-step>

      <q-step
        :name="3"
        title="訂購完成"
        icon="iconfont iconicon_finish_R"
        :done="step == 3"
      ></q-step>
    </q-stepper>
    <q-inner-loading :showing="loading" label="正在加載中"></q-inner-loading>
    
    <div v-if="!loading && orderInfo" :class="{ 'q-mx-md': $q.platform.is.mobile }">
      <q-banner
      class="bg-orange-2 text-orange"
      rounded
      dense
      
      >我們將會在您下單後為您鎖定空位。若您未能在半小時內完成支付，我們將自動取消訂單並且釋放位置。</q-banner
    >
    <div class="q-my-xl text-center" v-if="orderInfo.OrderStatus==1">
      <span class="text-body1">待支付金額：</span>
      <span class="text-h3 q-ml-sm text-dark text-weight-bold">{{(moneyFormat(orderInfo.TotalPrice,2))}}</span>
    </div>
    <div class="q-my-xl text-center" v-else>
      <span class="text-h3 q-ml-sm text-dark text-weight-bold">
        {{ orderInfo.OrderStatus==2||orderInfo.OrderStatus==3?'已支付成功':'訂單已取消' }}
      </span>
    </div>

    <q-card flat class="q-pa-md" v-if="orderInfo.OrderStatus==1">
      <div class="row q-mb-md items-center">
        <div class="col text-h6 text-weight-bolder">支付方式</div>
      </div>
      <div class="row q-gutter-md">
        <div
          class="rounded-borders q-pa-sm bg-grey-2 cursor-pointer"
          :class="{
            'pay-active': showPay == 'wechat',
            'pay-un-active': showPay != 'wechat',
          }"
          @click="showPayFormHandler('wechat')"
        >
          <q-img
            src="../../assets/img/pay/wepay.png"
            spinner-color="white"
            style="width: 100px;"
          />
        </div>
        <div class="rounded-borders q-pa-sm bg-grey-2 cursor-pointer" @click="showPayFormHandler('alipay')">
          <q-img  src="../../assets/img/pay/alipay.png" spinner-color="white" style="width: 80px;" />
        </div>
      </div>
      <div class="q-mt-md" v-if="showPay != ''">
        <wechatpay @cancel="cancelPayHandler" v-if="showPay == 'wechat'" :order-no="orderNo"></wechatpay>
        <alichatpay @cancel="cancelPayHandler" v-if="showPay == 'alipay'" :order-no="orderNo"></alichatpay>
      </div>
    </q-card>

    <q-card flat class="q-pa-md  q-my-xl">
      <div class="row q-mb-md items-center">
        <div class="col text-h6 text-weight-bolder">訂單資訊</div>
        <div class="text-grey-5"># {{ orderNo }}</div>
      </div>
      <div class="row">
        <q-img
          :src="orderInfo.GoodsPic"
          class="rounded-borders q-mr-md"
          spinner-color="grey-2"
          style="width: 150px"
        />
        <div class="col">
          <div class="text-body1 ellipsis">{{ orderInfo.GoodsName }}</div>
          <div class="q-mt-sm text-grey-6">{{ orderInfo.OrderMake }}</div>
          <div class="q-mt-sm text-dark">
            聯絡訊息：{{orderInfo.Name}}/{{ orderInfo.SurName }} {{ orderInfo.ContactNumber }} {{ orderInfo.Mailbox }}
          </div>
        </div>
      </div>
    </q-card>

    
  </div>
    <div v-if="(!orderNo || orderNo == '') && !loading" class="text-center q-my-xl">
      <none-data
        iconType="order"
        title="沒有找到您的訂單信息哦"
        subtitle="趕緊去挑選心儀的旅遊產品吧,三秒後自動跳轉到首頁"
      ></none-data>
    </div>
  </div>
</template>

<script>
import wechatpay from "../../components/pay/wepay";
import alichatpay from "../../components/pay/alipay";
import NoneData from "src/components/common/noneData.vue";
export default {
  data() {
    return {
      step: 2,
      showPay: "",
      orderNo: "",
      loading:true,
      orderInfo:null
    };
  },
  components: { wechatpay,alichatpay,NoneData },
  created() {
    this.checkParamsHandler()
  },
  mounted() {
    
  },
  methods: {
    showPayFormHandler(payStr) {
      this.showPay = payStr;
      // 打开支付宝二维码支付界面
      // if(this.showPay&&this.showPay=='alipay'){
      //   this.getAliPay()
      // }
    },
    getAliPay(){
        this.apipost("GetAliPayByOrderNo_post",{OrderNo:this.orderNo},r=>{
            if(r.data.resultCode==1){
              let url = r.data.data.QrCode
              if(url){
                this.OpenNewUrl(url)
              }
            }else{
                location.reload()
            }
        },e=>{
            
        })
    },
    checkParamsHandler() {
      if (this.$route.params && this.$route.params.id) {
        this.getOrderInfoHandler(this.$route.params.id)
      }else{
        this.goHomeHandler()
      }
    },
    getOrderInfoHandler(OrderNo){
      this.apipost("GetDetailsByOrderNo_post",{OrderNo},r=>{
        if(r.data.resultCode==1){
          this.orderNo=OrderNo
          this.orderInfo=r.data.data
          this.loading=false
          
        }else{
          this.goHomeHandler()
        }
      })
    },
    goHomeHandler(){
      this.loading=false
      setTimeout(() => {
          location.href = location.origin;
        }, 3000);
    },
    cancelPayHandler(){
      this.showPay=''
      location.reload()
    }
  },
};
</script>

<style>
.order-pay-page .q-stepper__content {
  display: none !important;
}
.pay-active {
  border: 2px solid var(--q-color-primary);
}
.pay-un-active {
  border: 2px solid #f5f5f5;
}
</style>
