<template>
	<div class="page-box">
		<div class="container">
			小票
			queryStr：{{queryStr}}
			result：{{result}}
			<!-- order：{{order}} -->
			<div style="padding: .4267rem 0;">xxxx有限公司</div>
			<div class="list-style">
				<div class="title">订单状态</div>
				<div class="detail"></div>
			</div>
			<div class="list-style">
				<div class="title">订单尾号</div>
				<div class="detail"></div>
			</div>
			<div class="line-style"></div>
			<div class="list-style">
				<div class="title">支付总额</div>
				<div class="detail"></div>
			</div>
			<div class="list-style" style="justify-content: center;">
				<div class="button-style" @click="goBack">
					返回首页
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import axios from 'axios';
	import 'https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js';
	const order = ref({});
	const result = ref({a:123});
	const url = ref('https://payapp.weixin.qq.com');
	const queryStr = ref('');
	// 组件挂载后执行
	onMounted(() => {
		getQueryVal();
		// if (!result.value.out_trade_no) {
		// 	parent.alert('没有订单号，请联系管理员！');
		// } else {
		// 	queryOrderInfo();
		// }
		showCustomPage();
	});

	// 获取地址栏字段
	const getQueryVal = () => {
		queryStr.value = window.location.search.substring(1); // 地址栏字符串
		const strArr = queryStr.split('&');
		if (strArr.length) {
			strArr.forEach((val) => {
				const subStrArr = val.split('=');
				result.value[subStrArr[0]] = subStrArr[1];
			});
		}
	};

	// 用于展示商家小票
	const showCustomPage = () => {
		console.log("showCustomPage")
		const customData = JSON.stringify({
			action: 'onIframeReady',
			displayStyle: 'SHOW_CUSTOM_PAGE',
			// height: 900
		});
		parent.postMessage(customData, url.value);
	};

	// 请求订单信息（需要保存订单信息的后台系统提供）
	const queryOrderInfo = () => {
		axios({
				baseURL: 'https://www.xxxx.com/xxxxx',
				method: 'get',
				url: 'xxx', // 这里需要替换为实际的URL
				params: {
					out_trade_no: result.value.out_trade_no
				}
			})
			.then((res) => {
				if (res.data.success) {
					order.value = res.data.result;
				} else {
					parent.alert('出错了，请联系管理员！');
				}
			})
			.catch((err) => {
				parent.alert('出错了，请联系管理员！');
			});
	};

	// 返回首页
	const goBack = () => {
	  const mchData = { action: 'jumpOut', jumpOutUrl: `${location.origin}/#/pages/pay/resultYuan` };
	  const postData = JSON.stringify(mchData);
	  parent.postMessage(postData, url.value);
	};
</script>

<style scoped>
	/* 您的样式 */
	.page-box {
		box-sizing: border-box;
		/* background-color: #f2f6ff; */
		background-color: #fff;
		padding: .36rem;
		padding-top: 1.32rem;
	}

	.container {
		display: flex;
		font-size: 1rem;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: center;
	}

	.img-wrapper {
		height: 1.7067rem;
		width: 1.7067rem;
	}

	.img-inner {
		width: 100%;
		height: 100%;
		object-fit: fill;
		border-radius: 50%;
		border: 1px solid #d1d1d1;
	}

	.list-style {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 2rem;
		width: 100%;
	}

	.title {
		color: #666;
	}

	.detail {
		color: #333;
	}

	.line-style {
		height: 1px;
		width: 100%;
		margin: 5px;
		background-color: #d1d1d1;
	}

	.button-style {
		margin-top: .2667rem;
		width: 10rem;
		height: 28px;
		border: 1px solid #189fff;
		border-radius: 5px;
		background-color: #fff;
		color: #189fff;
		text-align: center;
		line-height: 28px;
	}

	.button-style:hover {
		background-color: #189fff;
		color: #fff;
	}
</style>