<script setup>
// Copyright 2024 FlexCDN root@flexcdn.cn. All rights reserved. Official site: https://flexcdn.cn .

import ctxRef from "@/utils/ctx_ref.js"
import Context from "./index.js"
import "./index.css"
import TButton from "@/components/ui/TButton.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<div class="pay-box">
		<form>
			<DefinitionTable>
				<tbody>
				<tr>
					<td class="title">订单号</td>
					<td>{{ctx.order.code}}</td>
				</tr>
				<tr>
					<td>订单金额</td>
					<td>
						￥{{ctx.order.amount}}
					</td>
				</tr>
				<tr>
					<td>订单类型</td>
					<td>
						{{ctx.order.typeName}}
					</td>
				</tr>
				<tr>
					<td>支付方式</td>
					<td>{{ctx.order.method.name}}</td>
				</tr>
				<tr>
					<td>订单状态</td>
					<td>
						<span v-if="ctx.order.isExpired" class="red">已过期</span>
						<span :class="{green: ctx.order.status == 'finished'}" v-else>{{ctx.order.statusName}}</span>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>
			<!-- URL支付 -->
			<a :href="ctx.order.payURL" target="_blank" v-if="ctx.order.canPay && ctx.order.urlQRCodeKey.length == 0" @click="ctx.goPay">去支付 &raquo;</a>

			<!-- QRCode支付 -->
			<TButton v-if="ctx.order.canPay && ctx.order.urlQRCodeKey.length > 0" @click.prevent="ctx.goPay">去支付 &raquo;</TButton>

			<span class="red" v-if="ctx.order.isExpired">订单已过期，无需支付</span>
			&nbsp; &nbsp; &nbsp; &nbsp; <a :href="ctx.fromURL" v-if="ctx.fromURL.length > 0" class="grey">[上一步]</a>
		</form>

		<div class="pay-mask" v-if="ctx.isPaying">
			<div class="inner-box" :class="{qrcode: ctx.order.urlQRCodeKey.length > 0}">
				<div class="qrcode-box" v-if="ctx.order.urlQRCodeKey.length > 0">
					<div class="qrcode-title-box">
						<span v-if="ctx.order.qrcodeTitle.length > 0">{{ctx.order.qrcodeTitle}}</span>
						<span v-else>请扫描以下二维码完成支付：</span>
					</div>
					<img :src="'/qrcode?key=' + ctx.order.urlQRCodeKey"/>
				</div>
				<div>
					<TButton size="large" @click.prevent="ctx.goReturn(ctx.returnURL)">我已完成支付</TButton>
				</div>
				<div class="cancel">
					<a href="" @click.prevent="ctx.cancel" class="link">暂不支付</a>
				</div>
			</div>
		</div>
	</div>
</template>

<style lang="postcss" scoped>
</style>