<template>
	<view class="invite-page">
		<!-- 自定义导航栏 -->
		<!-- 自定义导航栏 -->
		<wd-navbar :bordered="false"
			custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
			safeAreaInsetTop fixed placeholder>
			<template #left>
				<view class="li-ml-15 li-mt-10 li-flex li-items-center">
					<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"
						@click="toPages({type:'nav'})"></text>
					<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mb-8 li-mr-10"
						@click="toPages({type:'home'})"></text>
					<text class="li-text-42">邀请业主</text>
				</view>
			</template>
		</wd-navbar>
		<!-- 导航栏背景 -->
		<view class="nav-bg-layer"></view>

		<!-- 邀请卡片区域 -->
		<view class="invite-card li-w-92% li-mx-auto li-mt-40 li-bg-white li-rd-20 li-shadow-sm li-p-30">
			<view class="card-header li-flex li-justify-between li-items-center">
				<text class="li-text-36 li-text-#333">邀请福利</text>
				<text class="li-text-28 li-text-#0070F0" @click="showRules">活动规则</text>
			</view>
			<view class="card-content li-mt-30">
				<!-- 主要返佣说明 -->
				<view
				:style="{backgroundImage:`url(${card_back})`,backgroundSize:'cover',backgroundPosition:'center'}"
					class="commission-card li-bg-gradient-to-r li-from-#4481EB li-to-#0070F0 li-rd-20 li-p-30 li-mb-30">
					<view class="li-flex li-items-center li-mb-20">
						<text class="ri-shopping-bag-3-line li-text-48 li-text-#0a4696"></text>
						<text class="li-text-34 li-text-#0a4696 li-ml-15 li-font-medium">业主消费返佣</text>
					</view>
					<view class="li-flex li-items-baseline li-mb-15">
						<text class="li-text-70 li-text-#0a4696 li-font-bold">5</text>
						<text class="li-text-34 li-text-#0a4696 li-ml-10">%</text>
					</view>
					<text class="li-text-26 li-text-#0a4696 li-opacity-100">邀请的业主每笔消费，您都可获得返佣</text>
				</view>

				<!-- 收益说明 -->
				<view class="benefit-list li-bg-#f8faff li-rd-16 li-p-30">
					<view class="benefit-item li-flex li-items-center li-mb-30">
						<view class="icon-box li-bg-#E1F0FF li-rd-12 li-p-15">
							<text class="ri-user-add-line li-text-36 li-text-#0070F0"></text>
						</view>
						<view class="li-ml-20">
							<text class="li-text-30 li-text-#333">邀请入驻</text>
							<text class="li-text-26 li-text-#666 li-block li-mt-5">邀请业主注册并完成实名认证</text>
						</view>
					</view>
					<view class="benefit-item li-flex li-items-center li-mb-30">
						<view class="icon-box li-bg-#E1F0FF li-rd-12 li-p-15">
							<text class="ri-link-m li-text-36 li-text-#0070F0"></text>
						</view>
						<view class="li-ml-20">
							<text class="li-text-30 li-text-#333">永久绑定</text>
							<text class="li-text-26 li-text-#666 li-block li-mt-5">与业主建立永久绑定关系</text>
						</view>
					</view>
					<view class="benefit-item li-flex li-items-center">
						<view class="icon-box li-bg-#E1F0FF li-rd-12 li-p-15">
							<text class="ri-money-cny-box-line li-text-36 li-text-#0070F0"></text>
						</view>
						<view class="li-ml-20">
							<text class="li-text-30 li-text-#333">持续收益</text>
							<text class="li-text-26 li-text-#666 li-block li-mt-5">业主每次消费都可获得返佣</text>
						</view>
					</view>
				</view>
			</view>
			<view class="invite-button li-mt-40">
				<wd-button type="primary" block custom-class="share-btn">
					<text class="ri-share-forward-line li-mr-10"></text>立即邀请
				</wd-button>
			</view>
		</view>

		<!-- 邀请记录区域 -->
		<view class="invite-records li-w-92% li-mx-auto li-mt-40">
			<view class="records-header li-flex li-justify-between li-items-center">
				<view class="li-flex li-items-center">
					<text class="li-text-34 li-text-#333">邀请记录</text>
					<text class="li-text-26 li-text-#666 li-ml-15">(共{{inviteList.length}}人)</text>
				</view>
				<view class="li-flex li-items-center">
					<text class="ri-money-cny-box-line li-text-32 li-text-#0070F0"></text>
					<text class="li-text-26 li-text-#666 li-ml-10">累计返佣：¥1280.50</text>
				</view>
			</view>
			<scroll-view scroll-y class="records-list li-mt-20" @scrolltolower="loadMore">
				<view v-for="(item, index) in inviteList" :key="index"
					class="record-item li-bg-white li-rd-20 li-p-30 li-mb-20 li-shadow-sm">
					<view class="li-flex li-justify-between li-items-center">
						<view class="li-flex li-items-center">
							<image :src="item.avatar" class="avatar"></image>
							<view class="li-ml-20">
								<view class="li-text-32 li-text-#333">{{item.name}}</view>
								<view class="li-text-26 li-text-#999 li-mt-10">{{item.time}}</view>
							</view>
						</view>
						<view class="status-tag" :class="item.status === 1 ? 'success' : 'pending'">
							{{item.status === 1 ? '已绑定' : '待认证'}}
						</view>
					</view>
				</view>
				<view v-if="loading" class="loading li-text-center li-py-30 li-text-28 li-text-#999">
					加载中...
				</view>
				<view v-if="!hasMore && inviteList.length > 0" class="li-text-center li-py-30 li-text-28 li-text-#999">
					没有更多了
				</view>
				<view v-if="inviteList.length === 0" class="empty-state li-py-60">
					<wd-status-tip image="search" tip="暂无邀请记录" />
				</view>
			</scroll-view>
		</view>


		<!-- 规则弹窗 -->
		<wd-popup v-model="showRulePopup" position="center" @close="showRulePopup = false">
			<view class="rules-popup li-bg-white ">
				<view class="rules-header li-py-20 li-px-30 li-flex li-justify-between li-items-center li-border-b">
					<text class="li-text-34 li-font-medium">邀请规则</text>
					<text class="ri-close-line li-text-44 li-text-#999" @click="showRulePopup = false"></text>
				</view>
				<view class="rules-content li-p-30">
					<view class="rule-item li-mb-15 li-flex li-items-center">
						<text class="rule-icon li-mr-15">1</text>
						<text class="li-text-28 li-text-#333">邀请业主加入平台并完成实名认证后，您将与业主建立永久绑定关系</text>
					</view>
					<view class="rule-item li-mb-15 li-flex li-items-center">
						<text class="rule-icon li-mr-15">2</text>
						<text class="li-text-28 li-text-#333">每当业主在商城消费时，您都可获得订单金额5%的返佣</text>
					</view>
					<view class="rule-item li-flex li-items-center">
						<text class="rule-icon li-mr-15">3</text>
						<text class="li-text-28 li-text-#333">返佣将在订单完成后自动发放，可随时提现至银行卡</text>
					</view>
				</view>
			</view>
		</wd-popup>
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		onMounted,
		defineExpose
	} from 'vue'
	import {
		useToast
	} from '@/uni_modules/wot-design-uni'
	import { onLoad } from '@dcloudio/uni-app'
	import { useNavigation } from '@/hooks/useNavigation'
	declare const uni : Uni
	
	const {
		hasMultiplePages,   // 是否有多个页面在路由栈中
		isTabBarPage,       // 当前页面是否为 tabBar 页面
		checkRouteStack     // 检查当前路由栈状态的方法
	} = useNavigation()
	const Toast = useToast()
	const loading = ref(false)
	const hasMore = ref(true)
	const page = ref(1)
	const inviteList = ref([])
	const showRulePopup = ref(false)
	
	const card_back = uni.$globalData?.RESOURCE_URL + 'invite/card-back.png'

	onLoad(() => {
		checkRouteStack()
	})


	// 加载邀请记录
	const loadInviteRecords = async () => {
		if (loading.value || !hasMore.value) return

		loading.value = true
		try {
			// 模拟接口调用
			await new Promise(resolve => setTimeout(resolve, 1000))

			const mockData = Array(10).fill().map((_, index) => ({
				id: page.value * 10 + index,
				name: `业主${page.value * 10 + index}`,
				avatar: '/static/swiper/1.png',
				time: '2024-03-26 12:00:00',
				status: Math.random() > 0.5 ? 1 : 0
			}))

			inviteList.value.push(...mockData)
			hasMore.value = page.value < 3 // 模拟只有3页数据
			page.value++
		} catch (error) {
			Toast.error('加载失败')
		} finally {
			loading.value = false
		}
	}
	
	// 页面跳转
	const toPages = (item) => {
		if (item.type === 'nav') {
			uni.navigateBack()
		} else if (item.type === 'home') {
			// 这里是项目内部的跳转逻辑
			uni.switchTab({
				url: '/pages/index/index'
			})
		}
	}

	// 滚动加载更多
	const loadMore = () => {
		loadInviteRecords()
	}

	onMounted(() => {
		loadInviteRecords()
	})

	// 显示规则弹窗
	const showRules = () => {
		console.log('显示规则弹窗')
		showRulePopup.value = true
	}
	

</script>

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

	.invite-page {
		min-height: 100vh;
		padding-bottom: 40rpx;
		
		// 导航背景层
		.nav-bg-layer {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: calc(var(--status-bar-height) + 88rpx);
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
			z-index: -1;
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
		}

		.invite-card {
			.card-content {
				.commission-card {
					border-radius: 20rpx;
					padding: 30rpx;
					margin-bottom: 30rpx;

					.ri-shopping-bag-3-line {
						font-size: 48rpx;
						margin-right: 15rpx;
					}

					.li-text-34 {
						font-size: 34rpx;
						font-weight: bold;
					}

					.li-text-26 {
						font-size: 26rpx;
						opacity: 0.8;
					}
				}

				.benefit-list {
					padding: 30rpx;
					border-radius: 16rpx;
					background: #f8faff;

					.benefit-item {
						.icon-box {
							width: 48rpx;
							height: 48rpx;
							border-radius: 12rpx;
							background: #E1F0FF;
							margin-right: 20rpx;
							padding: 15rpx;

							.ri-user-add-line,
							.ri-link-m,
							.ri-money-cny-box-line {
								font-size: 36rpx;
								color: #0070F0;
							}
						}

						.li-text-30 {
							font-size: 30rpx;
							color: #333;
						}

						.li-text-26 {
							font-size: 26rpx;
							color: #666;
							display: block;
							margin-top: 5rpx;
						}
					}
				}
			}

			.share-btn {
				background: linear-gradient(135deg, #42a5ff 0%, #0070F0 100%) !important;
				border: none !important;
				height: 90rpx !important;
				font-size: 32rpx !important;
			}
		}

		.invite-records {
			.records-list {
				height: calc(100vh - 600rpx);

				.record-item {
					.avatar {
						width: 90rpx;
						height: 90rpx;
						border-radius: 20rpx;
					}

					.status-tag {
						padding: 4rpx 20rpx;
						border-radius: 30rpx;
						font-size: 24rpx;

						&.success {
							color: #07c160;
							background-color: rgba(7, 193, 96, 0.1);
						}

						&.pending {
							color: #f0ad4e;
							background-color: rgba(240, 173, 78, 0.1);
						}
					}
				}
			}
		}
	}

	.rules-popup {
		width: 580rpx;
		overflow: hidden;
		
		.rules-header {
			border-color: rgba(0, 0, 0, 0.05);
			position: relative;
			
			&::after {
				content: '';
				position: absolute;
				left: 30rpx;
				right: 30rpx;
				bottom: 0;
				height: 1px;
				background: rgba(0, 0, 0, 0.05);
				transform: scaleY(0.5);
			}
			
			.ri-close-line {
				padding: 10rpx;
			}
		}
		
		.rules-content {
			padding:40rpx 30rpx 50rpx;
			
			.rule-item {
				display: flex;
				align-items: flex-start;
				margin-bottom: 20rpx;
				
				.rule-icon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					background: #0070F0;
					color: white;
					font-size: 24rpx;
					margin-right: 16rpx;
					flex-shrink: 0;
				}
				
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
</style>