<!--
 * @Date: 2023-11-18 13:43:19
 * @LastEditTime: 2024-01-10 14:38:52
 * @Description: content
-->
<template>
	<view class="content">
		<uni-nav-bar title="欧气券详情" color="#fff" left-icon="left" backgroundColor="transparent" :border="false"
			:statusBar="true" :fixed="true" @clickLeft="$c.back"></uni-nav-bar>

		<view v-if="pageData" class="coupon-item">
			<view class="coin">
				<image :src="pageData.level_img" lazy-load></image>
			</view>

			<view class="info">
				<view class="title">{{ pageData.level_text }}</view>

				<view class="num">需要{{ pageData.kl_num2 }}个参与者</view>
			</view>

			<view v-if="true" class="share-ing">
				<view class="share-num">
					<text>
						{{ pageData.yl_count == pageData.kl_num2 ? '已结束' : '分享中' }}
					</text>

					{{ pageData.yl_count }}/{{ pageData.kl_num2 }}
				</view>

				<view class="progress">
					<cmd-progress :percent="(pageData.yl_count / pageData.kl_num2) * 100" :show-info="false"
						stroke-color="linear-gradient(90deg, #8036EB 0%, #E830E7 100%);"
						:strokeWidth="5"></cmd-progress>
				</view>
			</view>

			<view v-else class="share-end">已结束</view>
		</view>

		<view v-if="pageData" class="hd-card">
			<view class="title">您参与的{{ pageData.level_text }}共获得</view>

			<view class="num">
				<view class="icon">
					<image :src="$img('/static/img/signJinbi.png')" lazy-load></image>
				</view>

				{{ pageData.yl_integral_count }}
			</view>

			<view class="join">
				<template v-if="pageData.yl_count < pageData.kl_num2">
					只要再邀请{{
            pageData.kl_num2 * 1 - pageData.yl_count * 1
          }}位参与者就能开券
				</template>

				<template v-else>已全部领取</template>
			</view>

			<view class="share-btn realative">
				<button class="hide" open-type="share"></button>

				分享好友
			</view>
		</view>

		<view v-if="pageData" class="leader">
			<view class="avatar">
				<image :src="pageData.share_user_headimg" lazy-load></image>
			</view>

			<view class="info">
				<view class="name hang1">
					{{ pageData.share_user_nickname }}
				</view>

				<view class="time">{{ pageData.share_time }}</view>
			</view>

			<view class="money-status">
				<view class="money">{{ pageData.own2 }}</view>

				<view class="status">已领取</view>
			</view>
		</view>

		<view v-if="pageData" class="join-list">
			<view class="list-hd">
				<view class="title">参与列表</view>

				<view class="num">
					已参与

					<text>{{ pageData.yl_count }}/{{ pageData.kl_num2 }}</text>
				</view>
			</view>

			<view class="list-item" v-for="(item, i) in pageData.yl_list" :key="i">
				<!-- <view v-if="item.lucky_king == 1" class="win">手气最佳</view> -->

				<view class="avatar">
					<image :src="item.headimg" lazy-load></image>
				</view>

				<view class="info">
					<view class="name hang1">
						{{ item.nickname }}
					</view>

					<view class="time">{{ item.addtime }}</view>
				</view>

				<view class="money-status">
					<view class="money">{{ item.l_num }}</view>

					<view class="status">已领取</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getCouponDetail } from '@/common/server/coupon.js';

	export default {
		data() {
			return {
				optData: '',
				pageData: ''
			}
		},

		onShareAppMessage(e) {
			const userInfo = uni.getStorageSync('userinfo')

			return {
				title: `快来领取${userInfo.nickname}分享的${this.pageData.num}赏币的${this.pageData.level_text}`,
				imageUrl: this.pageData.level_img,
				path: '/pages/user/index' +
					this.$c.qs({
						ou_coupon_id: this.pageData.id
					})
			}
		},

		onLoad(options) {
			this.optData = options

			this.getData()
		},

		methods: {
			async getData() {
				try {
					const res = await getCouponDetail(this.optData.id);
					if (res.status == 1) {
						this.pageData = res.data
					}
				} catch (error) {
					console.error('获取优惠券详情失败:', error);
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-bottom: 30rpx;

		.coupon-item {
			width: 710rpx;
			height: 186rpx;
			box-sizing: border-box;
			padding-left: 30rpx;
			padding-right: 40rpx;
			display: flex;
			align-items: center;
			margin: 20rpx auto 0;
			position: relative;
			background: #18112D;
			border-radius: 10rpx;

			.coin {
				width: 150rpx;
				height: 120rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info {
				flex: 1;
				padding-left: 30rpx;

				.title {
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #ffffff;
				}

				.num {
					margin-top: 10rpx;

					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #dddddd;
				}
			}

			.share-ing {
				display: flex;
				flex-flow: column nowrap;
				align-items: center;

				.share-num {
					display: flex;
					align-items: center;

					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #ffffff;

					text {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #ffffff;

						background: linear-gradient(0deg,
								#6adeff 0%,
								#7ab5ff 50%,
								#ff7feb 100%);
						background-clip: text;
					}
				}

				.progress {
					width: 150rpx;
					margin-top: 10rpx;

					::v-deep.cmd-progress-inner {
						background-color: rgba(255, 255, 255, 0.2);
					}
				}
			}

			.share-end {
				padding-right: 20rpx;

				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #dddddd;
			}
		}

		.hd-card {
			margin: 20rpx auto 0;
			width: 710rpx;
			height: 270rpx;
			display: flex;
			flex-flow: column nowrap;
			align-items: flex-start;
			justify-content: center;
			box-sizing: border-box;
			padding: 0 50rpx;
			position: relative;
			background: url($imgurl+'img/2_money_card_bg.png') no-repeat 0 0 / 100% 100%;

			.title {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #fff;
			}

			.num {
				min-width: 270rpx;
				box-sizing: border-box;
				// padding: 0 20rpx;
				height: 60rpx;
				// background: linear-gradient(
				//   90deg,
				//   rgba(208, 209, 255, 0.2) 0%,
				//   rgba(255, 255, 255, 0) 100%
				// );
				display: flex;
				align-items: center;
				margin: 20rpx 0;

				.icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}

				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;
			}

			.join {
				display: flex;
				align-items: center;

				// .icon {
				//   width: 28rpx;
				//   height: 28rpx;
				//   margin-right: 10rpx;
				// }

				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #dddddd;

				// text {
				//   color: #d0d1ff;
				// }
			}

			.share-btn {
				position: absolute;
				right: 40rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 180rpx;
				height: 70rpx;
				background: linear-gradient(90deg, #8036EB 0%, #E830E7 100%);
				border-radius: 35rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;
			}
		}

		.leader {
			margin: 20rpx auto 0;
			width: 690rpx;
			box-sizing: border-box;
			padding: 30rpx 30rpx;
			display: flex;
			align-items: center;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(159, 114, 255, 0.5);
			border: 1px solid #9331D4;

			.avatar {
				width: 80rpx;
				height: 80rpx;
				background: #9d9d9d;
				border: 1px solid #cccccc;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info {
				width: 300rpx;
				padding-left: 20rpx;

				.name {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #ffffff;
				}

				.time {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #dddddd;
				}
			}

			.money-status {
				flex: 1;
				display: flex;
				flex-flow: column nowrap;
				align-items: flex-end;

				.money {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #08F6BB;
				}

				.status {
					margin-top: 10rpx;

					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #dddddd;
				}
			}
		}

		.join-list {
			width: 690rpx;
			margin: 30rpx auto 0;
			box-sizing: border-box;
			border: 1px solid rgba(208, 209, 255, 0.2);
			background: #18112D;
			padding: 0 30rpx 10rpx;

			.list-hd {
				padding: 30rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;
			}

			.num {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;

				text {
					color: #08F6BB;
				}
			}

			.list-item {
				margin-bottom: 20rpx;
				box-sizing: border-box;
				padding: 20rpx;
				display: flex;
				align-items: center;
				background: rgba(208, 209, 255, 0.1);
				border-radius: 10rpx;
				position: relative;

				.win {
					position: absolute;
					left: 0;
					top: 0;
					z-index: 1;
					padding: 0 10rpx;
					height: 34rpx;
					background: linear-gradient(90deg,
							#6adeff 0%,
							#7ab5ff 50%,
							#ff7feb 100%);
					border-radius: 4rpx;
					display: flex;
					align-items: center;

					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #222222;
				}

				.avatar {
					width: 80rpx;
					height: 80rpx;
					background: #9d9d9d;
					border: 1px solid #cccccc;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info {
					width: 300rpx;
					padding-left: 20rpx;

					.name {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #ffffff;
					}

					.time {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #dddddd;
					}
				}

				.money-status {
					flex: 1;
					display: flex;
					flex-flow: column nowrap;
					align-items: flex-end;

					.money {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #08F6BB;
					}

					.status {
						margin-top: 10rpx;

						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #dddddd;
					}
				}
			}
		}
	}
</style>