<template>
	<view>
		<!-- #ifdef H5 -->
		<view v-if="!this.$wechat.isWeixin()">
			<view class="text-section">
				<view>{{ content }}</view>
			</view>
			<view v-html="formContent"></view>
		</view>
		<!-- #endif -->
		<view v-if="this.$wechat.isWeixin()">
			<view class="text-section">
				<view>点击复制网址去浏览器中打开</view>
				<view class="link">{{ link }}</view>
			</view>
			<view class="button-section">
				<!-- #ifdef H5 -->
				<button class="button copy" :data-clipboard-text="link">点击复制</button>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<button class="button copy" @click="copyLink">点击复制</button>
				<!-- #endif -->
				<button class="button off" @click="goDetail">完成支付</button>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<view v-show="hintShow" class="hint" @click="hintShow = false">
			<view>点击右上角<text class="iconfont icon-gengduo"></text></view>
			<view>选择 在浏览器 打开，去支付宝支付</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	// #ifdef H5
	import ClipboardJS from '@/plugin/clipboard/clipboard.js';
	import {mapGetters} from 'vuex';
	import {toLogin} from '@/libs/login.js';
	import { orderPay } from '@/api/order.js';
	import { alipayFull} from '@/api/user.js';
	export default {
		data() {
			return {
				// #ifdef H5
				isWeixin: this.$wechat.isWeixin(),
				hintShow: true,
				// #endif
				orderId: '',
				link: '',
				pay_key: '',
				content: '正在支付中',
				formContent: ''
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad(option) {
			if (!this.isLogin && this.$wechat.isWeixin()) {
				toLogin();
			}
			this.orderId = option.id;
			let rechar_id = option.id;
			let type = option.type;
			let price = option.price;
			if (!this.$wechat.isWeixin()) {
				if(type === 'order'){
					this.link = location.protocol + '//' + window.location.host + '/pages/users/alipay_invoke/index?orderNo='+this.orderId + '&type=order';
					if (!this.orderId) {
						this.content = '支付订单不存在，页面将在2秒后自动关闭！';
						uni.showToast({
							title: '支付订单不存在,页面将在2秒后自动关闭',
							icon: 'none'
						});
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							});
						}, 2000);
					}
					uni.showLoading({
						title: '正在支付中'
					});
					orderPay({
						orderNo: this.orderId,
						payChannel: 'alipay',
						payType: 'alipay'
					}).then(res=>{
						uni.hideLoading(); 
						that.$nextTick(() => {
							document.forms['punchout_form'].submit();
						})
					}).catch(err=>{
						uni.hideLoading();
							uni.showToast({
								title: err,
								icon: 'none'
							});
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								});
							}, 2000);
					})
				}else{ 
					this.link = location.protocol + '//' + window.location.host + `/pages/users/alipay_invoke/index?price=${price}&rechar_id=${rechar_id}&type=users`;
					alipayFull({
						from: 'alipay',
						price: price,
						payType: 'alipay',
						rechar_id: rechar_id
					}).then(res => {
						//h5支付
						uni.hideLoading();
						that.$nextTick(() => {
							document.forms['punchout_form'].submit();
						})
					}).catch(res=>{
						uni.hideLoading();
						return that.$util.Tips({
							title: res
						});
					})
					
				}
			
			}
		},
		onReady() {
			this.$nextTick(() => {
				// #ifdef H5
				const clipboard = new ClipboardJS(".copy");
				clipboard.on("success", () => {
					uni.showToast({
						title: '复制成功'
					});
				});
				// #endif
			});
		},
		methods: {
			// #ifdef MP
			copyLink() {
				uni.setClipboardData({
					data: this.link,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					},
					fail() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
			// #endif
			goDetail() {
				if(this.orderId){
					uni.navigateTo({
						url: `/pages/order_details/index?order_id=${this.orderId}`
					});
				}else{
					uni.navigateTo({
						url: `/pages/users/user_money/index`
					});
				}
				
			}
		}
	};
	//#endif
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>

<style lang="scss" scoped>
	.alipaysubmit {
		display: none;
	}

	.text-section {
		padding-top: 148rpx;
		margin-top: 185rpx;
		background: url('data:image/png;base64,[encoded data, 18232 characters]') center top/280rpx 98rpx no-repeat;
		font-weight: bold;
		font-size: 32rpx;
		text-align: center;
		color: #111111;

		.link {
			margin-top: 16rpx;
			margin-right: 98rpx;
			margin-left: 98rpx;
			white-space: pre-wrap;
			overflow-wrap: break-word;
			font-weight: normal;
			color: #666666;
		}
	}

	.button-section {
		margin-top: 95rpx;
		margin-right: 98rpx;
		margin-left: 98rpx;

		.button {
			height: 80rpx;
			border-radius: 40rpx;
			font-size: 30rpx;
			line-height: 80rpx;

			~.button {
				margin-top: 32rpx;
			}

			&.copy {
				background-color: #333333;
				color: #ffffff;
			}

			&.off {
				border: 2rpx solid #999999;
				color: #666666;
			}
		}
	}

	.hint {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		padding-top: 156rpx;
		padding-left: 144rpx;
		background: url("data:image/png;base64,[encoded data, 18156 characters]") calc(100% - 32rpx) 12rpx/229rpx 178rpx no-repeat;
		font-weight: 500;
		font-size: 30rpx;
		line-height: 68rpx;
		color: #c1c1c1;
		background-color: rgba(0, 0, 0, 0.8);

		.iconfont {
			margin-left: 10rpx;
			font-weight: bold;
			font-size: 30rpx;
		}
	}
</style>
