<template>
	<view class="promotion-page">


		<!-- <view class="stats-section">
			<view class="stats-card">
				<view class="stats-decoration-left"></view>
				<view class="stats-decoration-right"></view>
				<view class="stats-content">
					<view class="stat-item" @click="openPromotePopup">
						<up-icon name="share" size='24' color='#FF6A00' bold='true'></up-icon>
						<text class="stat-label">推广码</text>
					</view>
					<view class="stat-divider"></view>
					<view class="stat-item">
						<text class="stat-value">{{ totalMembers }}</text>
						<text class="stat-label">推广</text>
					</view>
				</view>
			</view>
		</view> -->

		<view class="content-section">
			<view class="section-header">
				<text class="section-title">推广会员列表</text>
				<text class="section-count">共 {{ totalMembers }} 人</text>
			</view>

			<view v-if="membersList.length > 0" class="members-list">
				<view v-for="(item, index) in membersList" :key="index" class="member-card">
					<view class="member-card-bg"></view>
					<view class="member-content">
						<view class="member-avatar-wrapper">
							<image :src="Service.GetMateUrlByImg(item.avatar)" class="member-avatar" mode="aspectFill">
							</image>
						</view>
						<view class="member-info">
							<view class="member-name-row">
								<text class="member-name">{{ item.nick || '神秘用户' }}</text>
								<view class="join-tag">
									<text class="join-text">{{  item.conLev>0?'铁粉':'粉丝' }}</text>
								</view>
							</view>
							<view class="" style="display: flex; align-items: center; justify-content: space-between;">
								<view class="member-phone">
									<text class="phone-text">{{ item.phone || '暂无手机号' }}</text>
								</view>
								<text class="time-value">{{ Service.formatDate(item.addTime, 1) }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-else class="empty-state">
				<image :src="Service.GetpayImg('/static/userFunc/null.png')" class="empty-image"></image>
				<text class="empty-text">暂无推广人员</text>
				<text class="empty-desc">邀请好友加入，获得积分奖励</text>
			</view>
		</view>

		<view v-if="membersList.length > 0 && status !== 'nomore'" class="load-more">
			<up-loadmore :status="status"></up-loadmore>
		</view>

		<up-popup :show="showPromotePopup" mode="center" round="16" @close="closePromotePopup"
			:closeOnClickOverlay="true">
			<view class="popup-content" style="border-radius: 20rpx;">
				<view class="popup-close" @click="closePromotePopup">
					<up-icon name="close" size="18" color="#999"></up-icon>
				</view>
				<view class="" style="display: flex; align-items: center; gap: 10rpx; ">
					
					<view class="qrcode-wrapper">
						<up-qrcode cid="ex1" :size="180" :val="qrcodeUrl"></up-qrcode>
					</view>
					
				</view>
				<text class="popup-tip">扫描二维码即可加入</text>
			</view>
		</up-popup>
	</view>
</template>

<script setup lang="ts">
	import { onShow, onLoad, onReachBottom } from "@dcloudio/uni-app";
	import { ref } from "vue";
	import { Service } from '@/Service/Service';
	import { UserService } from "@/Service/api/UserService"

	let page = ref(1);
	let status = ref('nomore');
	let totalMembers = ref(0);

	let showPromotePopup = ref(false);
	let qrcodeUrl = ref('');
	let membersList = ref<any[]>([]);

	onLoad(() => {
		getData();
		geyUrl()
	});

	onShow(() => {

	});
	onReachBottom(() => {
		getMembersList();
	});



	const geyUrl = () => {
		// UserService.GetUserRemUrl().then(res => {
		// 	if (res.code == 0) {
		// 		qrcodeUrl.value = res.data.url
		// 	} else {
		// 		Service.Msg(res.msg)
		// 	}
		// })
	}

	const getData = () => {
		membersList.value = []
		page.value = 1
		status.value = 'loadmore'
		getMembersList()
	}
	const getMembersList = () => {
		if (status.value == 'loading' || status.value == 'nomore') {
			return;
		}
		status.value = 'loading';
		UserService.GetUserRemList(page.value).then(res => {
			if (res.code == 0) {
				if (page.value == 1) {
					totalMembers.value = res.data.total.value
				}

				membersList.value = [...membersList.value, ...res.data.remList]
				status.value = res.data.remList.length == 10 ? 'loadmore' : 'nomore'
				page.value++
			} else {
				Service.Msg(res.msg)
			}
		})


	};

	const openPromotePopup = () => {
		showPromotePopup.value = true;
	};

	const closePromotePopup = () => {
		showPromotePopup.value = false;
	};
</script>

<style scoped lang="scss">
	page {
		background: linear-gradient(180deg, #FFF7ED 0%, #FFF5EB 50%, #F5F5F5 100%);
	}


	.stats-section {
		padding: 20rpx 30rpx 0;
		position: relative;
		z-index: 2;
	}

	.stats-card {
		background: linear-gradient(145deg, #FFFFFF 0%, #FFF9F2 100%);
		border-radius: 24rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 8rpx 30rpx rgba(255, 106, 0, 0.12);
		position: relative;
		overflow: hidden;
	}

	.stats-decoration-left {
		position: absolute;
		top: -40rpx;
		left: -40rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, rgba(255, 106, 0, 0.08), rgba(255, 127, 0, 0.03));
	}

	.stats-decoration-right {
		position: absolute;
		bottom: -30rpx;
		right: -30rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, rgba(255, 127, 0, 0.06), rgba(255, 106, 0, 0.02));
	}

	.stats-content {
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: relative;
		z-index: 1;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10rpx;
	}

	.stat-value {
		font-size: 44rpx;
		font-weight: bold;
		color: #FF6A00;
		line-height: 1;
	}

	.stat-label {
		font-size: 24rpx;
		color: #666;
	}

	.stat-divider {
		width: 1rpx;
		height: 60rpx;
		background: rgba(255, 106, 0, 0.2);
	}

	.content-section {
		padding: 30rpx 20rpx 0;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.section-count {
		font-size: 26rpx;
		color: #999;
	}

	.members-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.member-card {
		background-color: #fff;
		border-radius: 24rpx;
		overflow: hidden;
		position: relative;
	}

	.member-card-bg {
		position: absolute;
		top: 0;
		right: 0;
		width: 200rpx;
		height: 200rpx;
		background: linear-gradient(135deg, rgba(255, 106, 0, 0.05), rgba(255, 127, 0, 0.02));
		border-radius: 50%;
		transform: translate(30%, -30%);
	}

	.member-content {
		display: flex;
		align-items: center;
		padding: 28rpx 30rpx;
		position: relative;
		z-index: 1;
	}

	.member-avatar-wrapper {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
		position: relative;
		flex-shrink: 0;
		margin-right: 24rpx;
	}

	.avatar-border {
		position: absolute;
		top: -3rpx;
		left: -3rpx;
		right: -3rpx;
		bottom: -3rpx;
		border-radius: 50%;
		border: 3rpx solid linear-gradient(135deg, #FF6A00, #FF7F00);
		background: linear-gradient(135deg, #FF6900, #FF7F00);
		z-index: -1;
		padding: 3rpx;
	}

	.member-avatar {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.member-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.member-name-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 6rpx;
	}

	.member-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #1A1A1A;
	}

	.join-tag {
		background: linear-gradient(135deg, #FF6A00, #FF7F00);
		padding: 6rpx 16rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
	}

	.join-text {
		font-size: 20rpx;
		color: #fff;
		font-weight: 500;
	}

	.member-phone {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.phone-text {
		font-size: 24rpx;
		color: #666;
	}

	.member-time {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 4rpx;
		flex-shrink: 0;
	}

	.time-label {
		font-size: 20rpx;
		color: #999;
	}

	.time-value {
		font-size: 24rpx;
		color: #FF6A00;
		font-weight: 500;
	}

	.reward-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6rpx;
		padding: 16rpx 20rpx;
		background: linear-gradient(145deg, #FFF4E6 0%, #FFF9F2 100%);
		border-radius: 12rpx;
		margin-left: 16rpx;
		flex-shrink: 0;
	}

	.reward-label {
		font-size: 20rpx;
		color: #FF9800;
	}

	.reward-value {
		font-size: 28rpx;
		font-weight: 700;
		color: #FF6A00;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 80rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
		opacity: 0.5;
	}

	.empty-text {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.empty-desc {
		font-size: 26rpx;
		color: #999;
	}

	.load-more {
		margin-top: 20rpx;
	}

	.popup-content {
		width: 560rpx;
		padding: 50rpx 40rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, #FFF9F2 100%);
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.popup-close {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 48rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		;
	}

	.popup-text {
		font-size: 30rpx;
		color: #FF6A00;
		font-weight: 500;
		text-align: center;
		line-height: 1.6;
		margin-bottom: 40rpx;
	}

	.qrcode-wrapper {
		width: 360rpx;
		height: 360rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-shadow: 0 8rpx 30rpx rgba(255, 106, 0, 0.15);
		margin-bottom: 30rpx;
	}

	.qrcode-image {
		width: 100%;
		height: 100%;
	}

	.popup-tip {
		font-size: 24rpx;
		color: #FF7F00;
	}
</style>