<template>
    <div class="content-page order-preview" style="min-height:60vh;">
    
        <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>
    
        <q-card flat class="q-pa-lg q-mb-lg" :class="{ 'q-mx-md': $q.platform.is.mobile }" v-if="!loading && orderInfo">
    
            <div style="width:350px;margin:0 auto;">
    
                <div class="row items-center">
    
                    <q-icon name="iconfont iconsuccess" color="positive" size="40px"></q-icon>
    
                    <span class="q-ml-lg text-subtitle1">支付成功</span>
    
                </div>
    
                <div class="q-mt-lg">
    
                    <div class="row">
    
                        <div style="width:80px;" class="text-subtitle2">商品訂單：</div>
    
                        <div class="q-ml-md text-grey-6">{{ orderNo }}</div>
    
                    </div>
    
                    <div class="row q-mt-md">
    
                        <div style="width:80px;padding-top:5px;" class="text-subtitle2">支付金額：</div>
    
                        <div class="q-ml-md col">
    
                            <div class="row items-center">
    
                                <span class="text-positive text-subtitle1 col">CNY 8960.00</span>
    
                                <div class="text-grey-6 q-mr-sm cursor-pointer" @click="$event=>isExplends=!isExplends">訂單詳情</div>
    
                                <q-icon :name="isExplends?'keyboard_arrow_up':'keyboard_arrow_down'" @click="$event=>isExplends=!isExplends" size="14px" color="grey-6" class="cursor-pointer" />
    
                            </div>
    
                            <div v-if="isExplends">
    
                                <div class="q-mt-md text-grey-6">商品名称： {{ orderInfo.GoodsName }}</div>
    
                                <div class="q-mt-md text-grey-6">出行摘要： {{ orderInfo.OrderMake }}</div>
    
                                <div class="q-mt-md text-grey-6">应付金额： CNY {{(moneyFormat(orderInfo.TotalPrice,2))}}</div>
    
                                <div class="q-mt-md text-grey-6">购买时间： {{ orderInfo.CreateTime }}</div>
    
                            </div>
    
                        </div>
    
    
    
                    </div>
    
                </div>

                <div class="q-mt-lg">
                    <q-btn unelevated dense color="primary" label="回到首頁" @click="CommonJump('/',{})" class="q-px-md"></q-btn>
                </div>
    
            </div>
    
        </q-card>
    
        <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 { date } from "quasar";
export default {
    data() {
        return {
            step: 3,
            orderNo: "",
            loading: true,
            orderInfo: null,
            isExplends: false
        };
    },
    created() {
        this.checkParamsHandler()
    },
    methods: {
        showPayFormHandler(payStr) {
            this.showPay = payStr;
        },
        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.orderInfo.CreateTime = date.formatDate(this.orderInfo.CreateTime.replaceAll('T',' '),'YYYY年MM月DD日 HH時mm分')
                    this.loading = false
                    if(this.orderInfo.OrderStatus!=2 ||this.orderInfo.OrderStatus!=3){
                        this.CommonJump("/pay/" + this.orderNo, {});
                    }
                } else {
                    this.goHomeHandler()
                }
            })
        },
        goHomeHandler() {
            this.loading = false
            setTimeout(() => {
                location.href = location.origin;
              }, 3000);
        }
    },
}
</script>

<style>
.order-pay-page .q-stepper__content {
    display: none !important;
}
</style>