<template>
	<view class='container'>
		<view class="sv-y">
			<scroll-view scroll-y>
				<view class="flex-column">
					<view class="flex-column mlr-24 mt-25 br-10 pad-20"
						style="color: #878787;background-color: #171717;">
						<view class="flex">
							<image class="wh-175 br-20" :src="data.image.split(',')[0]"></image>
							<view class="flex-column fs-28 plr-20 flex-between" style="flex: 1;">
								<view class="flex">
									<text class="fs-32 flex-1" style="color: white;">{{data.partyName}}</text>
									<text @click="onYl" class="fs-24 plr-24 ptb-10 br-30 h-30"
										style="color: #FE42C2;border: 1px solid #FE42C2;">查看位置</text>
								</view>
								<view class="flex">
									<view class="flex-column" style="flex: 1;">
										<view class="flex-column fs-24" style="color: #868686;">
											<text>{{data.poster}}</text>
										</view>
										<view class="flex mt-10" style="color:#FFC100;justify-content: flex-end;">
											<text class="fs-46">￥{{data.payAmount}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex-column mlr-24 mt-25 br-10 pad-20 fs-28"
						style="color:white;background-color: #171717;">
						<text style="font-size: 32rpx;">订单信息</text>
						<view class="flex flex-between mtb-15 mt-25" style="color: #878787;">
							<text class="flex-1">时间</text>
							<text style="color: white;">{{$wskj.getTime(data.startTime)}}</text>
						</view>
						<view class="flex flex-between mtb-15" style="color: #878787;">
							<text class="flex-1">活动</text>
							<text style="color: white;">{{data.partyName}}</text>
						</view>
						<view class="flex flex-between mtb-15" style="color: #878787;">
							<text class="flex-1">地址</text>
							<text style="color: white;">{{data.address}}</text>
						</view>
						<view class="flex flex-between mtb-15" style="color: #878787;">
							<text class="flex-1">订单金额</text>
							<text style="color: white;">￥{{data.payAmount}}</text>
						</view>
						<view class="h-2" style="background-color: #2D2D2D;"></view>
						<view class="flex flex-between mtb-40 align-center" style="color: white;">
							<text class="flex-1 fs-32">订单实付：</text>
							<text class="fs-46" style="color: #FFC100;">￥{{data.payAmount}}</text>
						</view>
						<view class="h-2 " style="background-color: #2D2D2D;"></view>
						<view @click="$wskj.onCopy(data.id)" class="flex  flex-between mtb-15 mt-25"
							style="color: #878787;">
							<text class="flex-1">订单编号</text>
							<text style="color: white;">{{data.id}}</text>
							<text class="br-16 plr-10 ml-10" style="color: black;background-color: white;">复制</text>
						</view>
						<view class="flex  flex-between mtb-15" style="color: #878787;">
							<text class="flex-1">订单类型</text>
							<text style="color: white;">{{data.type==1?'定卡':'拼卡'}}</text>
						</view>
						<view class="flex  flex-between mtb-15" style="color: #878787;">
							<text class="flex-1">支付时间</text>
							<text style="color: white;">{{data.payTime}}</text>
						</view>

						<view class="flex  flex-between mtb-15" @click="birthdaySow=true" style="color: #878787;">
							<text class="flex-1">支付方式</text>
							<text style="color: white;">微信支付</text>
						</view>

						<view class="flex  flex-between mtb-15" style="color: #878787;">
							<text class="flex-1">支付金额</text>
							<text style="color: white;">￥{{data.payAmount}}</text>
						</view>
					</view>
				</view>

			</scroll-view>
			<wskj-model-close :show="show" :showClose="false" @close="onShowYqh(false)">
				<view class="flex-column">
					<view class="h-1200 mlr-24" 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 class="flex-column fs-36 mlr-50" v-if="data.type==2">
								<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>{{data.startTime.slice(10,16)}}</text>
								<text class="fs-60 fw-600 mt-20">{{}}</text>
							</view>
							<view class="flex-column fs-36 mlr-50" v-if="data.type==1">
								<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">{{data.startTime.slice(10,16)}}</text>
								<text class="mt-20">{{data.partyName}}</text>
								<text class="mt-20">{{data.address}}</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 br-20" :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,
				yqhImg: '',
				codeImg: '',
				orderId: '',
				data: {}

			};
		},

		onLoad(e) {
			this.orderId = e.orderId;
			const token = uni.getStorageSync('token')
			if (!token) {
				//沒有登录  先登录
				if (!e.share == false) {
					this.$wskj.to('/pages/login/wechatlogin?share=1')
				}
			}
		},
		onShow() {
			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: {
			onShowYqh(b) {
				this.show = b
			},
			getUserInfo(id) {
				const params = {
					url: '/system/member/getMemberInfo',
					method: "GET",
					data: {
						id: id
					}
				}
				this.$request(params).then(res => {
					this.codeImg = res.data.weixinImage
				})
			},
			onYl() {
				if (!this.data.localSeat) {
					this.$u.toast('管理者未设置图片')
					return
				}
				uni.previewImage({
					urls: [this.$config.cdnUrl + this.data.localSeat],
					current: 0
				});
			},
			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;
		background-color: ;
		display: flex;
		flex-direction: column;
	}

	.good-hot {
		margin: 25rpx;
		height: 160rpx;
	}

	/* 注意点，测试下来，设置水平滑动也要给一个固定高度 */
	.scroll-view_H {
		margin-top: 30rpx;
		width: 100%;
		white-space: nowrap;
		height: 100rpx;
		flex-direction: row;
	}

	.scroll-view_H view {
		display: inline-block;
		width: 120rpx;
		height: 100rpx;
		border-radius: 10rpx;
	}

	/* 去掉最后一个元素的 margin-right: 16rpx 设置为0 */
	/* .scroll-view_H view:last-child {
		margin-right: 0;
	} */

	.scroll-view_H .fl-item-sel {
		display: flex;
		height: 100%;
		width: 100rpx;
		flex-direction: column;
		background: #FE42C2;
		border-radius: 20rpx;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
	}

	.scroll-view_H .fl-item {
		display: flex;
		height: 100%;
		width: 100rpx;
		flex-direction: column;
		border-radius: 20rpx;
		justify-content: center;
		align-items: center;
		color: #878787;
	}

	.sv-y {
		flex: 1;
		/* 自动占满剩余的空间 */
		overflow-y: auto;
		/* 允许纵向滚动 */
	}

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