<template>
	<div class="payment">
		<div class="header" @click="onBack">
			<span class="icon"><svg-icon name="back" size="30" /></span>
			<span class="text">Payment Details</span>
		</div>
		<div class="paylist" v-if="status !== 2">
			<div class="item">
				<img src="@/assets/images/pay/stripe.png" alt="" />
				<span>Credit / Debit Card</span>
			</div>
		</div>
		<div class="agreement" v-if="status !== 2">
			<el-checkbox v-model="agreement">
				<div class="text">
					I agree to the <span>Terms & Conditions</span> and <span>Privacy Policy</span>.
					All digital item sales are final and non-refundable.
				</div></el-checkbox
			>
		</div>
		<div class="title" v-if="status !== 2">
			<span class="icon"><svg-icon name="card" size="20" /></span>
			<span class="text">Pay with Paypal</span>
		</div>
		<template v-if="status === 0">
			<div class="tip">
				You'll be redirected to a Paypal popup to log in and confirm. No card details are
				shared with Stylish Parade — PayPal handles all payment security.
			</div>
			<div class="buttons">
				<button custom="black" @click="onPayWith">
					<span class="text">Pay with</span>
					<span class="icon pay"><svg-icon name="pay-stripe" /></span>
				</button>
			</div>
			<div class="buttons">
				<span class="text" @click="onBack">Cancel</span>
			</div>
		</template>
		<template v-if="status === 1">
			<div class="tip">
				Please keep the window open until the payment is completed. If you are to open the
				payment window, please check your browser settings to see if pop-ups are being
				blocked. Points may be delayed after successful payment. Please wait 1-3 minutes and
				click the credits refresh button.
			</div>
			<div class="buttons">
				<button custom="black" @click="getOrderStatus">I Have Completed payment</button>
			</div>
			<div class="buttons">
				<span class="text" @click="onBack">Back</span>
			</div>
		</template>
		<template v-if="status === 2">
			<div class="success">
				<img src="@/assets/images/pay/success.png" alt="" />
				<div class="title">Purchase Successful!</div>
				<div class="tip">
					Your digital items are now available and have been saved in Personal Center → My
					Wardrobe.
				</div>
			</div>
			<div class="buttons">
				<button custom="black">download all Assets</button>
				<button custom="black-box">
					<span class="icon"><svg-icon name="order-file" size="18" /></span>
					<span class="text">Export Invoice</span>
				</button>
			</div>
			<div class="buttons">
				<span class="text" @click="onBack">Continue Shopping</span>
			</div>
		</template>
	</div>
</template>

<script setup lang="ts">
	import { computed, onMounted, ref } from 'vue'
	import { CreateOrder } from '@/api/shoppingCart'
	import { useRouter } from 'vue-router'
	import { ElMessage } from 'element-plus'
	const router = useRouter()
	const onBack = () => router.back()
	const props = defineProps({
		ids: {
			type: Array,
			default: () => []
		}
	})
	const agreement = ref(false)
	const status = ref(0) // 0 初始 1 待支付 2 支付成功
	const onPayWith = () => {
		if (!agreement.value) {
			return ElMessage.warning('Please agree to the Terms & Conditions and Privacy Policy.')
		}
		const ids = [...props.ids]
		if (ids.length === 0) return
		// CreateOrder(ids, true).then((res) => {
		// 	console.log(res)
		// })
		status.value = 1
	}
	const getOrderStatus = () => {
		status.value = 2
	}
</script>

<style lang="less" scoped>
	.payment {
		display: flex;
		flex-direction: column;
		> .header {
			display: flex;
			align-items: center;
			gap: 2rem;
			cursor: pointer;
			user-select: none;
			> .text {
				font-family: KaiseiOpti-Bold;
				font-size: 4rem;
			}
		}
		> .paylist {
			margin: 4rem 0 0 4rem;
			padding: 2.7rem 0;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 0.1rem solid #c4c4c4;
			> .item {
				display: flex;
				flex-direction: column;
				align-items: center;
				> img {
					width: auto;
					height: 3rem;
					margin-bottom: 1.6rem;
				}
				> span {
					font-family: KaiseiOpti-Regular;
					font-size: 1.2rem;
					color: #585858;
				}
			}
		}
		> .agreement {
			margin-top: 2.4rem;
			margin-left: 2rem;
			margin-bottom: 10rem;
			display: flex;
			> .el-checkbox {
				--el-checkbox-font-size: 1.4rem;
				--el-checkbox-input-width: 1.4rem;
				--el-checkbox-input-height: 1.4rem;
				--el-checkbox-checked-bg-color: #000;
				--el-checkbox-checked-input-border-color: #000;
				--el-checkbox-input-border: 0.1rem solid #c4c4c4;
				--el-checkbox-bg-color: #fff;
				--el-checkbox-border-radius: 0;
			}

			.text {
				color: #666;
				word-break: break-word;
				white-space: pre-wrap;
				> * {
					font-family: KaiseiOpti-Bold;
					text-decoration: underline;
					color: #232323;
				}
			}
		}
		> .title {
			display: flex;
			align-items: center;
			gap: 1rem;
		}
		> .tip {
			margin: 60px auto;
			max-width: 59rem;
			background: #f6f6f6;
			border-left: 0.2rem solid #979797;
			padding: 1.5rem 2rem;
			font-size: 1.4rem;
			line-height: 2.5rem;
			color: #585858;
		}
		> .buttons {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 1.8rem;
			gap: 1.2rem;
			> button {
				min-width: 28rem;
				height: 5rem;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 0.8rem;
				text-transform: uppercase;
				> .icon.pay {
					width: 7rem;
					--svg-icon-width: auto;
					--svg-icon-height: 2rem;
				}
			}
			> span {
				user-select: none;
				cursor: pointer;
				font-size: 1.4rem;
				color: #979797;
			}
		}
		> .success {
			margin: 12rem auto;
			max-width: 39rem;
			display: flex;
			align-items: center;
			flex-direction: column;
			> img {
				width: 19.8rem;
				height: auto;
				margin-bottom: 2.4rem;
			}
			> .title {
				font-size: 2rem;
				margin-bottom: 0.8rem;
			}
			> .tip {
				font-family: KaiseiOpti-Regular;
				font-size: 1.4rem;
				color: #666;
				text-align: center;
			}
		}
	}
</style>
