<template>
	<view class="full-height full-width" style="display: flex;flex-direction: column; ">
		<!-- 自定义头部 -->
		<myhead :worksid="0" :title="myheadtext" :color="'#000'" :titleShow="true" :backShow="true"
			:background="'#fff'"></myhead>

		<view style="width: 100%; height:calc(100% - 100upx);margin: auto; 
		 align-items: center;
         position: absolute;  
        top:0; 
		left:0; bottom:0; right:0;display: flex;flex-direction: column;background: #fff;margin-top: 100upx; ">

			<image src="../../static/img/icon_pay_cancelled.png" mode="widthFix"
				style=" width: 200upx;margin-top: 180upx;"></image>
			<view style="
font-size: 40upx;
font-family: Roboto;
font-weight: 300;
color: #333333;
line-height: 50px;margin-top: 60upx; ">You have canceled the payment. </view>


			<view style="width: 524upx;
height: 260upx;
background: #FFFFFF;
box-shadow: 0px 0px 16px 0px rgba(4, 0, 0, 0.08);
border-radius: 30upx;margin-top: 100upx;
padding-top: 60upx;
padding-left: 80upx;
 display: flex;
 flex-direction: column;">


				<view style="
			   font-size: 36upx;
			   color: #666666;
			   font-family: Roboto;
			   font-weight: 400;">
					Order Detail
				</view>

				<view style="               
			      font-size: 28upx;
			      color: #777;">
					Order ID :&nbsp {{orderId}}
				</view>
				<view style="
						font-size: 28upx;
						color: #777;">
					Order Time : &nbsp {{orderTime}}
				</view>
				<view style="
						font-size: 28upx;
						color: #777;">
					payment platform : &nbsp {{orderPlatform}}
				</view>
			</view>

			<button style="
			margin-top: 120upx;
			background: #854AC2;
			border-radius: 55upx;
			width: 350upx;
			height: 100upx;
			font-size: 36upx;
			font-family: Roboto;
			font-weight: 400;
			text-align: center;
			color: #FFFFFF
			" @click="toLine()">
				home page</button>
		</view>

	</view>
</template>

<script>
	import uParse from '@/components/uParse/src/wxParse.vue'
	import homeservice from '@/service/homeservice.js'
	import myhead from '../mine/head/head.vue';
	export default {
		components: {
			uParse,
			myhead,
		},
		computed: {

		},
		data() {
			return {
				goods: {},
				queryPage: {
					token: '',
				},
				myheadtext: '',
				orderId: "",
				orderTime: "",
				orderPlatform: "",
			};
		},

		methods: {

			//跳转排队列表
			toLine() {
				try {
						const globalData = uni.getStorageSync('globalData');
						if (globalData) {
							//console.log("返回=" + globalData.machine_id)
							//this.globalData = value
							uni.reLaunch({
								url: '../index/detailsphone?machine_id=' + globalData.machine_id
							})
							//console.log("his.userId="+this.userId)
						} else {
							const machine_id = uni.getStorageSync('machine_id');
							if (machine_id) {
								uni.reLaunch({
									url: '../index/detailsphone?machine_id=' + machine_id
								})
							} else {
								uni.navigateBack();
							}
						}
					} catch (e) {
						
						const machine_id = uni.getStorageSync('machine_id');
						if (machine_id) {
							uni.reLaunch({
								url: '../index/detailsphone?machine_id=' + machine_id
							})
						} else {
							uni.navigateBack();
						}
						//uni.navigateBack();
					};
			},

			//支付取消
			loadData() {
				uni.showLoading({
					title: this.$i18n.messages[this.$i18n.locale]['正在加载中'],
					mask: true
				})
				this.$http.post("api/Paypal/cancel", this.queryPage).then(result => {
					this.goods = result
					let data = this.goods.data;
					if (data != null) {
						this.orderId = data.order_id;
						this.orderTime = data.order_time;
						this.orderPlatform = data.order_platform;
					}
					//this.$i18n.messages[this.$i18n.locale]['没有更多数据了'],
					this.myheadtext = this.$i18n.messages[this.$i18n.locale]['支付取消']
					uni.hideLoading();
				}).catch(err => {
					uni.showToast({
						title: this.$i18n.messages[this.$i18n.locale]['支付取消'],
						icon: 'none'
					})
					uni.hideLoading();
				});

			}
		},
		onPullDownRefresh() {
			this.loadData();
		},
		onLoad(options) {
			this.queryPage.token = options.token;
			this.myheadtext = this.$i18n.messages[this.$i18n.locale]['支付取消']
			/* this.orderId = options.order_id;
			this.orderTime = options.order_time;
			this.orderPlatform = options.order_platform; */
			this.loadData();
		},
		onShow() {

		}
	};
</script>

<style lang="scss">
	page {
		background: #999999 !important;

	}
</style>