<template>
	<view v-if="isLoad">
		<view v-if="isWechatAgent">
			<view class="text-section">
				<view>点击复制网址去浏览器中打开</view>
				<view class="pl-lg pr-lg mt-sm ml-lg mr-lg f-paragraph c-desc ellipsis">{{ link }}</view>
			</view>
			<view class="button-section">
				<button class="button copy" @click="copyLink">点击复制</button>
				<!-- <button class="button off" @click="goDetail">完成支付</button> -->
			</view>
		</view>
		<view v-else>
			<view class="text-section">
				<view>{{ content }}</view>
			</view>
			<view class="alipaysubmit" v-html="alipayOrderParams.orderInfo"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'
	import siteInfo from '@/siteinfo.js';
	export default {
		components: {},
		data() {
			return {
				options: {},
				isLoad: false,
				isWechatAgent: false,
				link: '',
				content: '正在支付中'
			}
		},
		onLoad(options) {
			this.options = options
			this.initIndex()
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			commonOptions: state => state.user.commonOptions,
			userInfo: state => state.user.userInfo,
			autograph: state => state.user.autograph,
			alipayOrderParams: state => state.order.alipayOrderParams
		}),
		methods: {
			...mapActions(['getConfigInfo', 'getMineInfo']),
			...mapMutations(['updateUserItem', 'updateOrderItem']),
			async initIndex() {
				let isWechatAgent = await this.$jweixin.isWechat()
				if (isWechatAgent) {
					await this.$jweixin.initJssdk();
					this.$jweixin.wxReady(() => {
						this.$jweixin.hideOptionMenu()
					})
				}
				this.isWechatAgent = isWechatAgent

				let {
					autograph
				} = this.options
				if (autograph) {
					this.updateUserItem({
						key: 'autograph',
						val: autograph
					})
					await this.toRePay()
					return
				}
				await this.formatLink()
				this.isLoad = true
			},
			async formatLink() {
				let {
					siteroot
				} = siteInfo
				let url = siteroot.split('/index.php')[0]
				let {
					autograph
				} = this
				let {
					order_id,
					card_id = 0,
					coach_id = 0
				} = this.alipayOrderParams
				let coach_params = card_id ? `&cid=${card_id}&coach=${coach_id}` : ``
				let link = `${url}/h5/#/user/pages/alipay-result?autograph=${autograph}&id=${order_id}${coach_params}`
				this.link = link
			},
			async toRePay() {
				let {
					id,
					cid = 0,
					coach = 0
				} = this.options

				let param = cid ? {
					card_id: cid,
					coach_id: coach,
					pay_model: 3
				} : {
					id
				}

				let methodKey = cid ? 'mine' : 'order'
				let methodModel = cid ? 'payBalanceOrder' : 'rePayOrder'
				let {
					pay_list
				} = await this.$api[methodKey][methodModel](param)

				if (pay_list) {
					let alipayOrderParams = Object.assign({}, {
						orderInfo: pay_list,
						provider: 'alipay'
					}, this.options)
					this.updateOrderItem({
						key: 'alipayOrderParams',
						val: alipayOrderParams
					})
					this.isLoad = true
					this.$nextTick(() => {
						document.getElementById('alipaysubmit').submit();
					});
				}
			},
			copyLink() {
				let {
					link: url
				} = this
				this.$util.goUrl({
					url,
					openType: 'copy'
				})
			},
			goDetail() {
				let {
					page_url: url
				} = this.alipayOrderParams
				this.$util.goUrl({
					url,
					openType: `reLaunch`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}

	.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;
	}

	.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>
