<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">{{codeInfo?.config?.shop_brokerage_mode==1?'业主消费返佣':'业主关系'}}</text>
					</view>
					<view v-if="codeInfo?.config?.shop_brokerage_mode == 1" class="li-flex li-items-baseline li-mb-15">
						<text
							class="li-text-70 li-text-#0a4696 li-font-bold">{{codeInfo?.config?.employee_shop_brokerage_rate}}</text>
						<text class="li-text-34 li-text-#0a4696 li-ml-10">%</text>
					</view>
					<view v-else class="li-flex li-items-baseline li-mb-15">
						<text class="li-text-50 li-text-#0a4696 li-font-bold">业主专属顾问</text>
					</view>
					<text
						class="li-text-26 li-text-#0a4696 li-opacity-100">{{codeInfo?.config?.shop_brokerage_mode==1?'邀请的业主每笔消费，您都可获得返佣':'建立长期服务关系，共创双赢'}}</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 v-if="codeInfo?.config?.shop_brokerage_mode!=1"
						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 v-if="codeInfo?.config?.shop_brokerage_mode==1" 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" @click="openSharePoster">
					<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">(共{{inviteListData?.length}}人)</text>
				</view>
				<view v-if="codeInfo?.config?.shop_brokerage_mode==1" 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">累计返佣：¥{{codeInfo?.sumMoney}}</text>
				</view>
			</view>
			<scroll-view scroll-y class="records-list li-mt-20" @scrolltolower="loadMore">
				<view v-for="(item, index) in inviteListData" :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?item.avatar:'/static/logo.png'" class="avatar"></image>
							<view class="li-ml-20">
								<view class="li-text-32 li-text-#333">{{item.user_name}}</view>
								<view class="li-text-26 li-text-#999 li-mt-10">{{item.create_time}}</view>
							</view>
						</view>
						<view class="status-tag success">
							已建立关系
						</view>
					</view>
				</view>

				<view v-if="inviteListData?.length>0">
					<wd-loadmore loading-text="努力加载中" finished-text="没有更多了" :state="state" />
				</view>

				<view v-if="inviteListData?.length === 0" class="empty-state">
					<wd-status-tip :image="uni.$globalData?.RESOURCE_URL+'tip/search.png'"  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">作为专属顾问，您将获得更多与业主合作的机会</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>
		<zero-loading type="wobble" v-if="loading"></zero-loading>

		<SharePoster v-model:show="showPoster" :posterInfo="posterInfo" @updateShare="handleUpdateShare"></SharePoster>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		defineExpose
	} from 'vue'
	import {
		inviteList,
		inviteCode
	} from '@/api/invite'
	import {
		useToast
	} from '@/uni_modules/wot-design-uni'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useNavigation
	} from '@/hooks/useNavigation'
	import SharePoster from '@/components/SharePoster.vue'

	const {
		hasMultiplePages, // 是否有多个页面在路由栈中
		isTabBarPage, // 当前页面是否为 tabBar 页面
		checkRouteStack // 检查当前路由栈状态的方法
	} = useNavigation()
	const Toast = useToast()
	const loading = ref(false)
	const inviteListData = ref([])
	const showRulePopup = ref(false)
	const showPoster = ref(false)
	const posterInfo = ref({})
	const state = ref('loading')
	const codeInfo = ref({})
	const page = ref(1)
	const limit = ref(10)
	const userInfo = ref(uni.getStorageSync('userInfo'))
	const count = ref(0)


	const card_back = uni.$globalData?.RESOURCE_URL + 'invite/card-back.png'

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

	const getInviteCode = async () => {
		var res = await inviteCode()
		if (res.code == 200) {
			codeInfo.value = res.data
		}
		posterInfo.value = {
			title: userInfo.value.owner.name,
			name: userInfo.value.realname,
			qrcode: codeInfo.value.code,
			backImage: uni.$globalData?.RESOURCE_URL + 'invite/poster_back.png'
		}
	}


	// 加载邀请记录
	const loadInviteRecords = async () => {
		loading.value = true
		try {
			const res = await inviteList({
				page: page.value,
				limit: limit.value,
			})
			if (res.code == 200) {
				if (res.data.length < 10) {
					state.value = 'finished'
				}
				inviteListData.value = [...inviteListData.value, ...res.data]
				count.value = res.count
			}

		} 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 = () => {

		if (inviteListData?.value.length >= count.value) {
			state.value = 'finished'
			return
		}
		page++
		loadInviteRecords()
	}

	onMounted(() => {
		// loadInviteRecords()
		// 初始化海报信息

	})

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

	// 打开分享海报
	const openSharePoster = () => {
		showPoster.value = true
	}

	// 处理分享海报关闭
	const handleUpdateShare = (val) => {
		showPoster.value = val
	}
</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;
	}

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

	.invite-card .card-content .commission-card .li-text-34 {
		font-size: 34rpx;
		font-weight: bold;
	}

	.invite-card .card-content .commission-card .li-text-26 {
		font-size: 26rpx;
		opacity: 0.8;
	}

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

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

	.invite-card .card-content .benefit-list .benefit-item .icon-box .ri-user-add-line,
	.invite-card .card-content .benefit-list .benefit-item .icon-box .ri-link-m,
	.invite-card .card-content .benefit-list .benefit-item .icon-box .ri-money-cny-box-line {
		font-size: 36rpx;
		color: #0070F0;
	}

	.invite-card .card-content .benefit-list .benefit-item .li-text-30 {
		font-size: 30rpx;
		color: #333;
	}

	.invite-card .card-content .benefit-list .benefit-item .li-text-26 {
		font-size: 26rpx;
		color: #666;
		display: block;
		margin-top: 5rpx;
	}

	.invite-card .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);
	}

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

	.invite-records .records-list .record-item .status-tag {
		padding: 4rpx 20rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
	}

	.invite-records .records-list .record-item .status-tag.success {
		color: #07c160;
		background-color: rgba(7, 193, 96, 0.1);
	}

	.invite-records .records-list .record-item .status-tag.pending {
		color: #f0ad4e;
		background-color: rgba(240, 173, 78, 0.1);
	}

	.rules-popup {
		width: 580rpx;
		overflow: hidden;
	}

	.rules-popup .rules-header {
		border-color: rgba(0, 0, 0, 0.05);
		position: relative;
	}

	.rules-popup .rules-header::after {
		content: '';
		position: absolute;
		left: 30rpx;
		right: 30rpx;
		bottom: 0;
		height: 1px;
		background: rgba(0, 0, 0, 0.05);
		transform: scaleY(0.5);
	}

	.rules-popup .rules-header .ri-close-line {
		padding: 10rpx;
	}

	.rules-popup .rules-content {
		padding: 40rpx 30rpx 50rpx;
	}

	.rules-popup .rules-content .rule-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.rules-popup .rules-content .rule-item .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;
	}

	.rules-popup .rules-content .rule-item:last-child {
		margin-bottom: 0;
	}
	
	::v-deep .wd-divider,
	.wd-divider::after,
	.wd-divider::before {
		border: none !important;
		margin: 0 !important;
	}
</style>