<template>
    <!-- Main Start -->
    <main class="main-wrap order-success-page mb-xxl">
        <!-- Banner Section Start -->
        <section class="banner-section">
            <template v-if="code === '200'">
                <div class="content-wrap">
                    <h1 class="font-lg title-color">感謝您的購買</h1>
                    <p class="font-sm content-color">您的訂單已成功下達，您的訂單編號為#{{ order_sn }}</p>
                </div>
            </template>
            <template v-else>
                <div class="content-wrap">
                    <h1 class="font-lg title-color">金流付款失敗</h1>
                    <p class="font-sm content-color">您的訂單編號為#{{ order_sn }},請重新下單</p>
                </div>
            </template>
            <div v-if="paycode == 'eccvs'">
                <div class="divTable greenTable">
                    <div class="divTableBody">
                        <div class="divTableRow">
                            <div class="divTableCell">金流方式</div>
                            <div class="divTableCell">超商付款</div>
                        </div>
                        <div class="divTableRow">
                            <div class="divTableCell">超商代碼</div>
                            <div class="divTableCell">{{ $route.query.PaymentNo }}</div>
                        </div>
                        <div class="divTableRow">
                            <div class="divTableCell">繳費期限</div>
                            <div class="divTableCell">{{ $route.query.ExpireDate }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else-if="paycode == 'ecatm'">
                <div class="divTable greenTable">
                    <div class="divTableBody">
                        <div class="divTableRow">
                            <div class="divTableCell">金流方式</div>
                            <div class="divTableCell">ATM轉帳</div>
                        </div>
                        <div class="divTableRow">
                            <div class="divTableCell">銀行代碼</div>
                            <div class="divTableCell">{{ $route.query.BankCode }}</div>
                        </div>
                        <div class="divTableRow">
                            <div class="divTableCell">銀行帳號</div>
                            <div class="divTableCell">{{ $route.query.vAccount }}</div>
                        </div>
                        <div class="divTableRow">
                            <div class="divTableCell">繳費期限</div>
                            <div class="divTableCell">{{ $route.query.ExpireDate }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else></div>
        </section>
        <!-- Banner Section End -->
    </main>
    <!-- Main End -->
</template>

<script setup>
import { onMounted } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const code = route.query.code;
const order_sn = route.query.order_sn;
const paycode = route.query.paycode;

onMounted(async () => {});
</script>

<style lang="less" scoped>
div.greenTable {
    font-family: Georgia, serif;
    background-color: #d4eed1;
    width: 100%;
    text-align: center;
}
.divTable.greenTable .divTableCell,
.divTable.greenTable .divTableHead {
    border: 1px solid #24943a;
    padding: 3px 2px;
}
.divTable.greenTable .divTableBody .divTableCell {
    font-size: 13px;
}
.greenTable .tableFootStyle {
    font-size: 13px;
}
.greenTable .tableFootStyle .links {
    text-align: right;
}
.greenTable .tableFootStyle .links a {
    display: inline-block;
    background: #ffffff;
    color: #24943a;
    padding: 2px 8px;
    border-radius: 5px;
}
.greenTable.outerTableFooter {
    border-top: none;
}
.greenTable.outerTableFooter .tableFootStyle {
    padding: 3px 5px;
}
/* DivTable.com */
.divTable {
    display: table;
}
.divTableRow {
    display: table-row;
    .divTableCell:nth-child(1) {
        display: table-cell;
        width: 150px;
        font-weight: 600;
    }
    .divTableCell:nth-child(2) {
        display: table-cell;
    }
}
.divTableHeading {
    display: table-header-group;
}
.divTableBody {
    display: table-row-group;
}
</style>
