<template>
	<view class="permission-container">
		<!-- 搜索栏 -->
		<view class="search-section">
			<view class="search-box">
				<u-icon name="search" size="20" color="#bbb"></u-icon>
				<input class="search-input" v-model="keyword" placeholder="搜索用户姓名或手机号" confirm-type="search"
					@input="onSearch" />
				<view v-if="keyword" class="search-clear" @click="clearSearch">
					<u-icon name="close-circle" size="18" color="#ccc"></u-icon>
				</view>
			</view>
		</view>

		<!-- 用户列表 -->
		<view class="users-section">
			<view v-if="users.length === 0" class="empty-state">
				<view class="empty-icon">
					<u-icon name="account" size="64" color="#ddd"></u-icon>
				</view>
				<text class="empty-text">暂无用户</text>
			</view>

			<view v-else class="users-list">
				<view v-for="user in users" :key="user.userId" class="user-card">
					<view class="user-avatar">
						<image v-if="user.headImg" class="avatar-img" :src="Service.GetMateUrlByImg(user.headImg)"
							mode="aspectFill"></image>
						<view v-else class="avatar-default">
							<text class="avatar-text">{{ user.name ? user.name.charAt(0) : '?' }}</text>
						</view>
					</view>
					<view class="user-info">
						<text class="user-name">{{ user.name }}</text>
						<text class="user-phone">{{ user.phone }}</text>
					</view>
					<view class="user-action">
						<!-- 手写开关器：status == 1 为开 -->
						<view
							class="custom-switch"
							:class="{ 'switch-on': user.status == 1 }"
							@click="toggleStatus(user)"
						>
							<view class="switch-thumb"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

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

	const keyword = ref('')
	const users = ref<Array<any>>([])
	let page = ref(1)
	let loadStatus = ref('nomore')

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

	onReachBottom(() => {
		getList()
	})

	const getData = () => {
		users.value = []
		page.value = 1
		loadStatus.value = 'loadmore'
		getList()
	}

	const getList = () => {
		if (loadStatus.value == 'loading' || loadStatus.value == 'nomore') {
			return
		}
		loadStatus.value = 'loading'
		userService.GetUserList(keyword.value, page.value).then((res: any) => {
			if (res.code == 0) {
				users.value = [...users.value, ...res.data.list]
				loadStatus.value = res.data.list.length == 10 ? 'loadmore' : 'nomore'
				page.value++
			} else {
				Service.Msg(res.msg)
			}
		})
	}

	const onSearch = () => {
		getData()
	}

	const clearSearch = () => {
		keyword.value = ''
		getData()
	}

	const toggleStatus = (user: any) => {
		userService.UpdateUserRole(user.userId).then(res=>{
			if (res.code == 0) {
				const newStatus = user.status == 1 ? 0 : 1
				user.status = newStatus
			} else {
				Service.Msg(res.msg)
			}
		})
	}
</script>

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

	.permission-container {
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: 40rpx;
	}

	/* 搜索栏 */
	.search-section {
		margin-bottom: 20rpx;

		.search-box {
			display: flex;
			align-items: center;
			gap: 12rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 16rpx 24rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

			.search-input {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				height: 48rpx;
			}

			.search-clear {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 44rpx;
				height: 44rpx;
			}
		}
	}

	/* 用户列表 */
	.users-section {
		.empty-state {
			background-color: #fff;
			border-radius: 24rpx;
			padding: 80rpx 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

			.empty-icon {
				margin-bottom: 24rpx;
				opacity: 0.6;
			}

			.empty-text {
				font-size: 30rpx;
				font-weight: 600;
				color: #666;
			}
		}
	}

	.users-list {
		.user-card {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 24rpx;
			margin-bottom: 16rpx;
			display: flex;
			align-items: center;
			gap: 20rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.98);
			}

			.user-avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				overflow: hidden;
				flex-shrink: 0;

				.avatar-img {
					width: 100%;
					height: 100%;
				}

				.avatar-default {
					width: 100%;
					height: 100%;
					background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					.avatar-text {
						color: #fff;
						font-size: 30rpx;
						font-weight: 700;
					}
				}
			}

			.user-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				gap: 6rpx;
				min-width: 0;

				.user-name {
					font-size: 32rpx;
					font-weight: 700;
					color: #333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.user-phone {
					font-size: 24rpx;
					color: #999;
				}
			}

			.user-action {
				flex-shrink: 0;
			}
		}
	}

	/* 手写开关器 */
	.custom-switch {
		width: 96rpx;
		height: 52rpx;
		border-radius: 26rpx;
		background-color: #d9d9d9;
		position: relative;
		transition: background-color 0.3s ease;
		cursor: pointer;

		.switch-thumb {
			width: 44rpx;
			height: 44rpx;
			border-radius: 50%;
			background-color: #fff;
			position: absolute;
			top: 4rpx;
			left: 4rpx;
			transition: transform 0.3s ease;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
		}

		&.switch-on {
			background-color: #52c41a;

			.switch-thumb {
				transform: translateX(44rpx);
			}
		}

		&:active {
			opacity: 0.8;
		}
	}
</style>
