<template>
	<view class='container'>
		<view class="sv-y">
			<scroll-view scroll-y>
				<view class="flex-column">
					<view class="flex-column flex-center-center h-400">
						<image class="wh-145 mb-50" src="/static/icon_zfcg.png"></image>
						<text style="color: white;font-size: 42rpx;">支付成功!</text>
					</view>
					<view class="flex-column mlr-24 mt-25 br-10 pad-20 fs-32"
						style="color: #878787;background-color: #171717;">
						<text style="color: white;margin-bottom: 30rpx;">订单信息</text>
						<view class="flex fs-24 flex-between mtb-15" style="color: #878787;">
							<text style="color: white;">订单类型</text>
							<text>{{data.type==1?'定卡':'拼卡'}}</text>
						</view>
						<view class="flex fs-24 flex-between mtb-15" style="color: #878787;">
							<text style="color: white;">支付时间</text>
							<text>{{data.payTime}}</text>
						</view>

						<view class="flex fs-24 flex-between mtb-15" @click="birthdaySow=true" style="color: #878787;">
							<text style="color: white;">支付方式</text>
							<text>微信支付</text>
						</view>
						<view class="flex fs-24 flex-between mtb-15" style="color: #878787;">
							<text style="color: white;">订单编号</text>
							<text>{{data.id}}</text>
						</view>
						<view class="flex fs-24 flex-between mtb-15" style="color: #878787;">
							<text style="color: white;flex: 1;">支付金额</text>
							<text>￥{{data.payAmount}}</text>
						</view>
					</view>
					<view class="flex-column mlr-24 mt-25 br-10 pad-20 fs-32"
						style="color:white;background-color: #171717;">
						<text style="font-size: 42rpx;">信息确认</text>
						<text class="mt-50">时间：{{$wskj.getTime(data.startTime)}}</text>
						<text class="mt-20">活动：{{data.partyName}}</text>
						<text class="mt-20">地址：{{data.address}}</text>
					</view>


					<view class="flex-column mlr-24 mt-25 br-10 pad-20 fs-32"
						style="color: #878787;background-color: #171717;">
						<text style="color: white;">预订须知</text>
						<text class="fs-24 mt-25">1.支付成功之后将获得入场电子券
							2.参与购票后电子券直接生效，有效期从预约时间到次日早上8点
							3.未成年人禁止购票，购票后无法进入，门店概不负责
							4.多次下单不支付系统将判定您恶意下单，当日无法再下单
							5.如果您执行的是定卡操作，请注意您支付的为定卡押金
							6.最终解释权由本司所有</text>
					</view>


				</view>

			</scroll-view>
			<wskj-model-close :show="show" :showClose="false" @close="onShowYqh(false)">
				<view class="flex-column">
					<view class="h-1200 mlr-24 mb-100" style="position: relative;color: white;">
						<image class="full" :src="yqhImg"></image>
						<view class="flex-column" style="position: absolute;bottom: 50rpx;left: 0;right: 0;">
							<view v-if="data.type==2" class="flex-column fs-36 mlr-50">
								<text class="fw-600">欢迎加入{{data.partyName}}</text>
								<text class="fs-72 fw-600 mt-26 mb-20">
									{{data.startTime.slice(5,10).replace('-','/')}}</text>
								<text>{{$wskj.getWeek(data.startTime)}}{{data.startTime.slice(10,16)}}</text>
								<!-- <text class="fs-60 fw-600 mt-20">J8卡座</text> -->
							</view>
							<view v-if="data.type==1" class="flex-column fs-36 mlr-50" style="margin-bottom: -100rpx;">
								<text class="fw-600">邀请您加入{{data.partyName}}</text>
								<text class="fs-72 fw-600 mt-26">{{data.startTime.slice(5,10).replace('-','/')}}</text>
								<text
									class="mt-20">{{$wskj.getWeek(data.startTime)}}{{data.startTime.slice(10,16)}}</text>
								<text class="mt-20">{{data.partyName}}</text>
								<text class="mt-20">{{data.address}}</text>
								<!-- <text class="mt-20">邀请人</text>
								<text class="mt-20">huhuhaha</text> -->
							</view>
							<view class="flex" style="justify-content: flex-end;">
								<view class="flex-column w-200 fs-24 flex-center mlr-24">
									<image class="wh-200" :src="codeImg" :show-menu-by-longpress="true">
									</image>
									<text>{{data.type==1?'长按添加客服微信':'长按添加领队微信'}}</text>
								</view>
							</view>
							<view class="flex-center-center fs-32 mlr-24 mt-50">
								<button class="fullscreen-btn" style="background-color: #FE42C2;"
									open-type="share">邀请好友一起玩</button>
							</view>

						</view>
					</view>
				</view>

			</wskj-model-close>
		</view>
		<view class="h-100 mtb-30 mlr-24">
			<view @click="onShareShow" class="fullscreen-btn" style="background-color: #FE42C2;">
				<text>邀请好友一起玩</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				orderId: '',
				data: {},
				yqhImg: '',
				codeImg: '',
			};
		},
		onLoad(e) {
			this.orderId = e.orderId;
			this.getData();
		},
		onShareAppMessage() {
			return {
				title: this.data.type == 1 ? `欢迎加入${this.data.memberName}的派对` : ` 邀请您加入${this.data.partyName}派对`,
				imageUrl: this.data.fxImage,
				path: this.data.type == 1 ? `/pagesMain/pages/ddxq?orderId=${this.data.id}&share=1` :
					`/pagesMain/pages/ldxx?partyId=${this.data.partyId}&leaderId=${this.data.leaderId}&type=0&share=1`
			};
		},
		methods: {
			getUserInfo(id) {
				const params = {
					url: '/system/member/getMemberInfo',
					method: "GET",
					data: {
						id: id
					}
				}
				this.$request(params).then(res => {
					this.codeImg = res.data.weixinImage
				})
			},
			onShowYqh(b) {
				this.show = b
			},
			onShareShow() {
				if (!this.yqhImg) {
					this.$u.toast('管理者未设置背景图片')
					return
				}
				this.show = true
			},
			getData() {
				const params = {
					url: '/system/party/getOrderById/' + this.orderId,
					method: "GET",
					data: {}
				}
				this.$request(params).then(res => {
					this.data = res.data
					if (res.data.type == 1) {
						this.getImg(4)
						this.getImg(2)
					} else {
						this.getImg(5)
						this.getUserInfo(res.data.leaderId);
					}
				})
			},
			getImg(id) {
				//1 分享 2 客服二维码 3 头号玩家背景 4 定卡邀请函背景 5 拼卡邀请函背景
				const params = {
					url: '/system/member/gbImg?bgId=' + id,
					data: {}
				}
				this.$request(params).then(res => {
					if (id == 2) {
						this.codeImg = res.data.bgImg
					} else {
						this.yqhImg = res.data.bgImg
					}
				})
			},
		},
	};
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		background: #0F0F0F;
		display: flex;
		flex-direction: column;
	}


	.btn-box {
		width: 90%;
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		margin-left: -45%;
	}
</style>