<template>
	<div>
		<s-header :name="$t('airwallex.checkout')" :noback="true"></s-header>
		<div>
			<!-- <h2 style="text-align: center;">{{ $t('airwallex.sunzee') }}</h2> -->

			<!-- 这里展示商品名称 * 商品数量  价格 -->
			<div class="checkout">
				<br>
				<br>
				<span style="text-align: center; display: block; font-size: medium; font-weight: bold;"> {{
					$t('airwallex.shoppingVoucher') }}
				</span>
				<br>
				<br>
				<!-- 商品图片 -->
				<!-- <span style="text-align: center; display: block;">
					<van-image width="100" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
				</span> -->
				<!-- 订单号  订单状态   订单金额 商品名称  数量 -->
				<van-cell-group inset>
					<van-cell :title="$t('airwallex.productName')">{{ productsName }}</van-cell>
					<van-cell :title="$t('airwallex.productsNum')">{{ productsNum }}</van-cell>
					<van-cell :title="$t('airwallex.totalPrice')">{{ totalPrice }}</van-cell>
				</van-cell-group>

				<br>
				<br>
				<br>
				<div class="button-container">
					<!-- 取消按钮 -->
					<van-button color="#ee0a24" plain @click="cancelOrder()" round>{{ $t('airwallex.cancelOrder')
					}}</van-button>
					<!-- 支付按钮 -->
					<van-button color="linear-gradient(to right, #ff6034, #ee0a24)" @click="redirectHpp()" round>{{
						$t('airwallex.payForIt') }}</van-button>
				</div>
			</div>

			<!-- <div>
				<van-cell-group inset>
					<van-cell title="单元格" value="内容" />
					<van-cell title="单元格" value="内容" label="描述信息" />
				</van-cell-group>
			</div> -->

			<!-- <div>
				<van-contact-card type="edit" :tel="tel" :name="name" @click="onEdit" />
			</div> -->

			<!-- <div>
				<van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit" />
			</div> -->

			<!-- <van-card num="2" price="2.00" desc="描述信息" title="商品标题" /> -->

		</div>
	</div>
</template>

<script>
import { redirectToCheckout, loadAirwallex } from 'airwallex-payment-elements';
import { useRoute } from "vue-router";
// import { useI18n } from "vue-i18n";
// import { ref } from 'vue';
import sHeader from "@/components/SimpleHeader";

export default {
	name: 'Hpp',
	components: { sHeader },

	setup() {
		// const { t } = useI18n();
		// 将语言始终设置为英文
		const curLang = localStorage.getItem('curLang');
		if (curLang !== 'en') {
			// 将 urllang 设置为 "en"
			localStorage.setItem('curLang', 'en');
		}


		const urlParams = new URLSearchParams(window.location.href.split('?')[1]);
		// console.log("urlParams是>>>" + urlParams.toString());
		const productsName = urlParams.get('productName');
		// console.log("productsName的value是：：：" + productsName);
		const productsNum = urlParams.get('productsNum');
		const totalPrice = urlParams.get('totalPrice');


		const mode = 'payment';
		const route = useRoute();
		// console.log("route.query.intent_id>>>>>>>" + route.query.intent_id);
		const redirectHppForCheckout = () => {
			redirectToCheckout({
				env: 'demo',
				mode,
				currency: route.query.currency,
				intent_id: route.query.intent_id,
				client_secret: route.query.client_secret,
				//主题
				theme: {
					fonts: [
						{
							src: 'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2',
							family: 'AxLLCircular',
							weight: 400,
						},
					],
				},
				// successUrl: 'https://www.baidu.com', // 支付成功跳转页面
				// failUrl: 'https://www.baidu.com', // 支付失败跳转页面
				logoUrl: '', //支付页面展示商户LOGO
			});
		};
		const redirectHppForRecurring = () => {
			redirectToCheckout({
				env: 'demo',
				// mode,
				// currency,
				// client_secret,
				recurringOptions: {
					card: {
						next_triggered_by: 'customer',
						merchant_trigger_reason: 'scheduled',
						// currency,
					},
				},
				theme: {
					fonts: [
						{
							src: 'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2',
							family: 'AxLLCircular',
							weight: 400,
						},
					],
				},
				// successUrl: 'https://www.google.com',
				// failUrl: 'https://www.google.com',
			});
		};
		loadAirwallex({
			env: 'demo', // Can choose other production environments, 'staging | 'demo' | 'prod'
		});
		const redirectHpp = async () => {
			try {
				await loadAirwallex({
					env: 'demo',
				});
				if (mode === 'payment') {
					redirectHppForCheckout();
				} else if (mode === 'recurring') {
					redirectHppForRecurring();
				}
			} catch (error) {
				window.alert('There was an error with HPP redirection', error);
			}
		};

		const cancelOrder = async () => {
			// 返回浏览器历史记录上一页
			window.history.back();
		}

		return {
			redirectHpp,
			redirectHppForCheckout,
			redirectHppForRecurring,
			productsName,
			productsNum,
			totalPrice,
			cancelOrder,
		};
	}
};

/* const intent_id = this.$route.query.intent_id;
const client_secret = 'replace-with-your-client-secret';
const currency = 'replace-with-your-currency';
const mode = 'payment';
// console.log(this.intent_id);
const redirectHppForCheckout = () => {
  redirectToCheckout({
	env: 'demo',
	mode,
	currency,
	intent_id,
	client_secret,
	//主题
	theme: {
	  fonts: [
		{
		  src: 'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2',
		  family: 'AxLLCircular',
		  weight: 400,
		},
	  ],
	},
	successUrl: 'https://www.baidu.com', // 支付成功跳转页面
	failUrl: 'https://www.baidu.com', // 支付失败跳转页面
	logoUrl: '', //支付页面展示商户LOGO
  });
};
const redirectHppForRecurring = () => {
  redirectToCheckout({
	env: 'demo',
	mode,
	currency,
	client_secret,
	recurringOptions: {
	  card: {
		next_triggered_by: 'customer',
		merchant_trigger_reason: 'scheduled',
		currency,
	  },
	},
	theme: {
	  fonts: [
		{
		  src: 'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2',
		  family: 'AxLLCircular',
		  weight: 400,
		},
	  ],
	},
	successUrl: 'https://www.google.com',
	failUrl: 'https://www.google.com',
  });
};
loadAirwallex({
  env: 'demo', // Can choose other production environments, 'staging | 'demo' | 'prod'
});
const redirectHpp = async () => {
  try {
	await loadAirwallex({
	  env: 'demo', 
	});
	if (mode === 'payment') {
	  redirectHppForCheckout();
	} else if (mode === 'recurring') {
	  redirectHppForRecurring();
	}
  } catch (error) {
	window.alert('There was an error with HPP redirection', error);
  }
};
export default {
  name: 'Hpp',
  data() {
	return {
	  redirectHpp,
	  msg: this.$route.query.intent_id,
	  intent_id: this.$route.query.intent_id,
	  client_secret: this.$route.query.client_secret,
	  currency: this.$route.query.currency
	};
  },
}; */
</script>
<style>
.button-container {
	display: flex;
	justify-content: space-between;
}

.button-container button {
	margin: 0 30px;
	/* 根据需要调整按钮与容器边缘的距离 */
}

body {
	background-color: #f8f8f8;
	/* 设置背景颜色 */
}
</style>