<template>
	<view class="grid-item" @click="handleCardClick">
		<uni-card margin="0px" padding="0px" spacing="0px">
			<view
				style="position:absolute;top:0;right:0;width:100%;  background: linear-gradient(to bottom, rgba(255, 108, 0, 0.9), rgba(255, 108, 0, 0.7));box-shadow: 0 2px 8px rgba(235,135,58, 0.3);z-index:999;border-radius:4px 4px 0 0;font-size:24rpx;color:#fff;font-weight: 500;    opacity: 0.7;">
				<text style="padding-left:10rpx;">{{ item.status }}</text>
			</view>
			<view class="item-content column">
				<!-- 麻将桌区域 -->
				<view class="mahjong-table">
					<!-- 九宫格布局 -->
					<view style="width:300rpx;height: 300rpx;">
						<view class="nine-grid-container">
							<!-- 第一行 -->
							<view class="grid-cell"></view>
							<view class="grid-cell" :class="getCellClass(0)">
								<view v-if="getPlayerAtPosition(0)" class="player-avatar">
									<image :src="getPlayerAtPosition(0).avatar || ''" class="avatar-img"></image>
								</view>
								<view v-else-if="canJoinAtPosition(0)" class="join-button" @click.stop="handleJoin">
									<text class="join-text">+</text>
								</view>
							</view>
							<view class="grid-cell"></view>

							<!-- 第二行 -->
							<view class="grid-cell" :class="getCellClass(1)">
								<view v-if="getPlayerAtPosition(1)" class="player-avatar">
									<image :src="getPlayerAtPosition(1).avatar || ''" class="avatar-img"></image>
								</view>
								<view v-else-if="canJoinAtPosition(1)" class="join-button" @click.stop="handleJoin">
									<text class="join-text">+</text>
								</view>
							</view>
							<view class="grid-cell center-cell">
								<!-- 麻将桌背景图 -->
								<image src="/static/9.png" class="table-bg" mode=""></image>
							</view>
							<view class="grid-cell" :class="getCellClass(2)">
								<view v-if="getPlayerAtPosition(2)" class="player-avatar">
									<image :src="getPlayerAtPosition(2).avatar || ''" class="avatar-img"></image>
								</view>
								<view v-else-if="canJoinAtPosition(2)" class="join-button" @click.stop="handleJoin">
									<text class="join-text">+</text>
								</view>
							</view>

							<!-- 第三行 -->
							<view class="grid-cell"></view>
							<view class="grid-cell" :class="getCellClass(3)">
								<view v-if="getPlayerAtPosition(3)" class="player-avatar">
									<image :src="getPlayerAtPosition(3).avatar || ''" class="avatar-img"></image>
								</view>
								<view v-else-if="canJoinAtPosition(3)" class="join-button" @click.stop="handleJoin">
									<text class="join-text">+</text>
								</view>
							</view>
							<view class="grid-cell"></view>
						</view>
					</view>
				</view>

				<!-- 信息区域 -->
				<view class="info-section">
					<text class="info-text" style="font-size: 26rpx;font-weight: 600;color: #FA690B;">{{
						item.description }}</text>
					<text class="info-text" style="margin-top: -7rpx;">{{ item.room }}</text>
					<text class="info-text" style="font-size: 22rpx;font-weight: 600;line-height:28rpx;">2025-09-06</text>
					<text class="info-text" style="font-size: 22rpx;font-weight: 600;line-height:28rpx;">{{ item.time }}</text>
					<text class="info-text" style="color:#FA690B;line-height:30rpx;margin-top:6rpx;">{{ item.requirements }}</text>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue'

// 定义 props
const props = defineProps({
	item: {
		type: Object,
		required: true,
		default: () => ({
			id: '',
			status: '',
			description: '',
			time: '',
			room: '',
			requirements: '',
			personCount: 4,//总人数
			joinPerson: [
				{
					id: 1,
					name: '张三',
					avatar: '',
					phone: '',
				}
			],//已加入人
		})
	}
})

// 定义 emits
const emit = defineEmits(['click', 'join'])

// 计算属性：获取玩家位置布局
const playerPositions = computed(() => {
	const { personCount, joinPerson } = props.item
	const joinedCount = joinPerson.length

	// 根据总人数确定布局
	if (personCount === 2) {
		// 2人局：第二行左边和右边
		return {
			positions: [null, joinPerson[0] || null, joinPerson[1] || null, null],
			joinPositions: [null, !joinPerson[0], !joinPerson[1], null]
		}
	} else if (personCount === 3) {
		// 3人局：第一行中间、第二行左边和右边
		return {
			positions: [joinPerson[2] || null, joinPerson[0] || null, joinPerson[1] || null, null],
			joinPositions: [!joinPerson[2], !joinPerson[0], !joinPerson[1], null]
		}
	} else {
		// 4人局：标准布局（上、左、右、下）
		return {
			positions: [
				joinPerson[2] || null, // 第一行中间
				joinPerson[0] || null, // 第二行左边
				joinPerson[1] || null, // 第二行右边
				joinPerson[3] || null  // 第三行中间
			],
			joinPositions: [
				!joinPerson[2], // 第一行中间
				!joinPerson[0], // 第二行左边
				!joinPerson[1], // 第二行右边
				!joinPerson[3]  // 第三行中间
			]
		}
	}
})

// 获取指定位置的玩家
const getPlayerAtPosition = (position) => {
	return playerPositions.value.positions[position]
}

// 判断指定位置是否可以加入
const canJoinAtPosition = (position) => {
	const { personCount, joinPerson } = props.item
	const joinedCount = joinPerson.length

	// 如果已满员，不能加入
	if (joinedCount >= personCount) {
		return false
	}

	// 直接使用计算属性中的 joinPositions
	return playerPositions.value.joinPositions[position]
}

// 获取单元格样式类
const getCellClass = (position) => {
	if (getPlayerAtPosition(position)) {
		return 'player-cell'
	} else if (canJoinAtPosition(position)) {
		return 'join-cell'
	}
	return ''
}

// 处理卡片点击事件
const handleCardClick = () => {
	emit('click', props.item)
}

// 处理加入按钮点击事件
const handleJoin = () => {
	emit('join', props.item)
}
</script>

<style lang="scss" scoped>
.item-content {
	height: 540rpx;
	color: white;
	border-radius: 10rpx;
	font-size: 32rpx;
}

.mahjong-table {
	width: 100%;
	background-color: #D4D4D4;
	border-radius: 10rpx 10rpx 0 0;
	display: flex;
    justify-content: center;
}

.status-tag {
	position: absolute;
	left: 15rpx;
	top: 15rpx;
	font-size: 16rpx;
	color: black;
	z-index: 10;
}

/* 九宫格容器 */
.nine-grid-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	width: 100%;
	height: 100%;
	padding: 20rpx;
	box-sizing: border-box;
}

/* 网格单元格 */
.grid-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

/* 玩家头像单元格 */
.player-cell {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 中心单元格（麻将桌） */
.center-cell {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 加入按钮单元格 */
.join-cell {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 麻将桌背景图 */
.table-bg {
	width: 80rpx;
	height: 80rpx;
}

/* 玩家头像 */
.player-avatar {
	width: 60rpx;
	height: 60rpx;
	background-color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.avatar-img {
	width: 100%;
	height: 100%;
	background-color: aqua;
	border-radius: 50%;
}

/* 加入按钮 */
.join-button {
	width: 60rpx;
	height: 60rpx;
	background-color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	cursor: pointer;
	transition: all 0.3s ease;
}

.join-button:hover {
	transform: scale(1.1);
	background-color: #f0f0f0;
}

.join-text {
	color: black;
	font-size: 24rpx;
	font-weight: bold;
}

.info-section {
	padding: 10rpx;
}

.info-text {
	font-size: 24rpx;
	color: black;
	display: block;
}
</style>
