<template>
	<view class="content" :style="getBackgroundImg()">
		<!-- 使用 z-paging 组件实现分页功能 -->
		<z-paging ref="pagePaging" v-model="dataList" @query="queryList" :refresher-enabled="true"
			:loading-more-enabled="true" :auto="true" :empty-view-text="'暂无麻将局数据'" :empty-view-img="'/static/empty.png'"
			:refresher-threshold="80" :loading-more-threshold="50" style="flex: 1; width: 95%; margin-top: 10rpx;">
			<template #top>
				<view style="z-index: 100;position: sticky;top :0;">
					<view :style="{ height: statusBarHeight + 'px' }" style="background-color: #fff;"
						class="status-bar">
					</view>
				</view>
			</template>
			<template #empty>
				<com-index-NoEmpty></com-index-NoEmpty>
			</template>

			<view style="z-index: 100;margin-top:10rpx;height:532rpx;">
				<view style="width: 100%;width:100%;display:flex;justify-content: center;"
					v-if="homeData != null && homeData.advertList != null && homeData.advertList.length > 0">
					<view class="" style="width:97%; height: 386rpx;border-radius: 25rpx;">
						<swiper class="img-swiper" :indicator-dots="false" circular autoplay interval="3000">
							<swiper-item v-for="(item, index) in homeData.advertList" :key="index">
								<image :src="item.imageUrl" mode="scaleToFill" class="slide-img"
									style="border-radius:25rpx;">
								</image>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<view style="height: 10rpx;"></view>
			</view>
			<view class="grid-container">
				<MahjongCard v-for="(item, index) in dataList" :key="index" :item="item" @click="openPop"
					@join="handleJoin" />
			</view>
		</z-paging>


		<!-- 预约信息弹窗组件 -->
		<ReservationPopup ref="reservationPopup" @join="handleJoin" @openUserPop="openUserPop" />



		<uni-popup ref="userInfo_popup" type="center">

			<view class="column" style="width: 500rpx; background-color: white; padding: 20rpx;">

				<image @click="closeUserPop()" src="/static/ic_close.png"
					style="width: 20rpx; height: 20rpx; margin-left: auto;" mode="">
				</image>

				<view class="row" style="align-items: center;">

					<image src="" style="width: 80rpx; height: 80rpx; background-color: aquamarine; border-radius: 50%;"
						mode="">
					</image>

					<view class="column" style="font-size: 24rpx; margin-left: 20rpx;">

						<text>树下的胖子</text>
						<text style="margin-top: 10rpx;">男，30岁，已参与20次，信誉5.0</text>

					</view>
				</view>

				<view class="row" style="align-items: center; margin-top: 20rpx;">
					<text style="font-size: 24rpx;">Ta的评分 </text>
					<text style="font-size: 40rpx; color: #ED3535; margin-left: 10rpx;">4.6</text>
				</view>

				<view class="row" style="align-items: center; margin-top: 20rpx;">
					<text style="font-size: 24rpx;">牌品</text>
					<uni-rate style="margin-left: 20rpx;" :readonly="true" v-model="rateValue" @change="onChange" />
				</view>

				<view class="row" style="align-items: center; margin-top: 20rpx;">
					<text style="font-size: 24rpx;">牌技</text>
					<uni-rate style="margin-left: 20rpx;" :readonly="true" v-model="rateValue" @change="onChange" />
				</view>

				<text style="font-size: 24rpx; margin-top: 20rpx;">鸽子数 0次</text>


			</view>

		</uni-popup>


	</view>
</template>

<script setup>
import {
	ref,
	reactive,
	onMounted
} from 'vue'
import zPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import MahjongCard from '@/components/index/MahjongCard.vue'
import ReservationPopup from '@/components/com/index/ReservationPopup.vue'
import {
	homeData,
	preloadHomeData,
	getReservation
} from '@/common/server/index'
import {
	configData,
	getConfigData,
	preloadConfigData
} from '@/common/server/config'
import { userInfo, loadUserInfo } from '@/common/server/user'
const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight);
const getBackgroundImg = () => {
	return {
		background: `url(${configData.value.config.defaultImage}) 100% 100% `,
		backgroundSize: '100%',
		backgroundRepeat: "no-repeat",
		backgroundRepeatX: "0px",
		backgroundSize: "100%",
		backgroundRepeatY: "0px",
		backgroundPositionX: "0px",
		backgroundPositionY: statusBarHeight.value + "px",
	};
}
// 响应式数据
const title = ref('Hello')
const imgList = ref([1, 2, 3, 4, 5])
const dataList = ref([]) // 分页数据列表
const rateValue = ref(3.5)
const mockData = ref([]) // 模拟数据源

// 组件引用
const pagePaging = ref(null)
const reservationPopup = ref(null)
const userInfo_popup = ref(null)

// 初始化模拟数据
const initMockData = () => {
	mockData.value = []
	for (let i = 1; i <= 20; i++) {
		// 随机生成不同人数的麻将局
		const personCount = [2, 3, 4][Math.floor(Math.random() * 3)]
		const joinedCount = Math.floor(Math.random() * (personCount + 1))

		// 生成已加入的玩家
		const joinPerson = []
		for (let j = 0; j < joinedCount; j++) {
			joinPerson.push({
				id: j + 1,
				name: `玩家${j + 1}`,
				avatar: 'https://admin-1308826010.cos.ap-shanghai.myqcloud.com/app/static/userlogo.png',
				phone: `138****${String(j + 1).padStart(4, '0')}`
			})
		}

		mockData.value.push({
			id: i,
			title: `麻将局 ${i}`,
			status: joinedCount >= personCount ? '已满员' : '组局中',
			time: '20：00 ~ 04：30 共8小时30分钟',
			room: `304包厢-大包，${personCount}人`,
			description: '休闲局，随便来',
			requirements: '麻将、斗地主、不可吸烟、性别不限、信誉≧4.0',
			personCount: personCount,
			joinPerson: joinPerson
		})
	}
}

// 分页查询方法
const queryList = (pageNo, pageSize) => {
	console.log(`加载第${pageNo}页，每页${pageSize}条数据333`)
	getReservation(pageNo, pageSize).then(res => {
		if (res != null && res.length > 0) {
			pagePaging.value.complete(res)
		} else {
			pagePaging.value.complete([])
		}
	});

}

// 手动刷新
const refreshData = () => {
	pagePaging.value.reload()
}

// 清空数据
const clearData = () => {
	pagePaging.value.clear()
}

// 弹窗相关方法
const openPop = (item) => {
	reservationPopup.value.show(item.data)
}

const openUserPop = () => {
	userInfo_popup.value.open()
}

const closeUserPop = () => {
	userInfo_popup.value.close()
}

const onChange = (e) => {
	console.log('rate发生改变:' + JSON.stringify(e))
}

// 处理加入麻将局事件
const handleJoin = (item) => {
	console.log('加入麻将局:', item)
	// 这里可以添加加入逻辑，比如调用API
	uni.showToast({
		title: '加入成功',
		icon: 'success',
		duration: 1500
	})
	// 关闭弹窗
	reservationPopup.value.close()
}

// 生命周期
onMounted(() => {
	// 初始化模拟数据

})

onLoad(async () => {
	if (!homeData.value) preloadHomeData();
	if (!configData.value) preloadConfigData();
	await loadUserInfo();
	// initMockData();
	// initMockData();
});
</script>

<style lang="scss">
.content {
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;

}

.img-swiper {
	width: 100%;
	height: 386rpx;
}

.slide-img {
	width: 100%;
	height: 100%;

}

/* 网格容器 - 2列布局 */
.grid-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* 2列，每列宽度相等 */
	gap: 20rpx;
	/* 网格间距（行列间距相同） */
	padding: 0 15rpx;
}

/* 网格项内容 */
.item-content {
	height: 630rpx;
	// background-color: #E6E6E6;
	color: white;
	border-radius: 10rpx;
	font-size: 32rpx;
}
</style>