<template>
	<view class="page-container">

		<view class="content">
			<!-- 搜索区域 -->
			<view class="search-section">
				<view class="search-card">
					<view class="search-row">
						<tn-input v-model="searchKeyword" placeholder="请输入网格员姓名或负责区域" border height="80rpx"
							class="search-input">
							<template #prefix>
								<uni-icons type="search" size="20" color="#999"></uni-icons>
							</template>
						</tn-input>
						<tn-button type="primary" @click="handleSearch" :loading="loading" class="search-btn">
							搜索
						</tn-button>
						<tn-button width="80px" height="32px" :plain="true" text-color="#0099ff" @click="backToIndex">
							<uni-icons type="arrow-left" size="18" color="#0099ff"
								style="margin-right: 5px;"></uni-icons>返回
						</tn-button>
					</view>
				</view>
			</view>

			<!-- 网格员表格 -->
			<view class="table-section">
				<view class="section-card">
					<view class="section-header">
						<text class="section-title">网格员列表</text>
						<text class="total-count">共 {{ gridMembers.length }} 人</text>
					</view>

					<uni-table ref="table" :loading="loading" border stripe emptyText="暂无网格员数据">
						<uni-tr>
							<uni-th width="120" align="center">姓名</uni-th>
							<uni-th width="150" align="center">工号</uni-th>
							<uni-th width="200" align="center">负责区域</uni-th>
							<uni-th width="120" align="center">联系方式</uni-th>
							<uni-th width="100" align="center">在岗状态</uni-th>
							<uni-th width="120" align="center">操作</uni-th>
						</uni-tr>
						<uni-tr v-for="(member, index) in gridMembers" :key="member.id">
							<uni-td align="center">
								<view class="member-info">
									<image :src="member.avatar || '/static/default-avatar.png'" class="avatar"></image>
									<text class="member-name">{{ member.name }}</text>
								</view>
							</uni-td>
							<uni-td align="center">{{ member.workNumber }}</uni-td>
							<uni-td align="center">
								<text class="area-text">{{ member.area }}</text>
							</uni-td>
							<uni-td align="center">
								<view class="contact-info">
									<text class="phone">{{ member.phone }}</text>
									<text class="email" v-if="member.email">{{ member.email }}</text>
								</view>
							</uni-td>
							<uni-td align="center">
								<view class="status-badge" :class="getStatusClass(member.status)">
									{{ getStatusText(member.status) }}
								</view>
							</uni-td>
							<uni-td align="center">
								<tn-button size="sm" type="primary" plain @click="viewMemberDetail(member)">
									查看详情
								</tn-button>
							</uni-td>
						</uni-tr>
					</uni-table>

					<!-- 分页 -->
					<view class="pagination-section" v-if="total > pageSize">
						<uni-pagination :total="total" :pageSize="pageSize" :current="currentPage"
							@change="handlePageChange" show-icon />
					</view>
				</view>
			</view>
		</view>

		<!-- 网格员详情弹窗 -->
		<uni-popup ref="detailPopup" type="center" background-color="#fff" class="detail-popup">
			<view class="popup-content" v-if="currentMember">
				<view class="popup-header">
					<text class="popup-title">网格员详细信息</text>
					<uni-icons type="close" size="20" color="#999" @click="closeDetailPopup"></uni-icons>
				</view>

				<view class="popup-body">
					<!-- 基本信息 -->
					<view class="detail-section">
						<view class="detail-header">
							<text class="detail-title">基本信息</text>
						</view>
						<view class="detail-grid">
							<view class="detail-item">
								<text class="item-label">姓名：</text>
								<text class="item-value">{{ currentMember.name }}</text>
							</view>
							<view class="detail-item">
								<text class="item-label">工号：</text>
								<text class="item-value">{{ currentMember.workNumber }}</text>
							</view>
							<view class="detail-item">
								<text class="item-label">性别：</text>
								<text class="item-value">{{ currentMember.gender }}</text>
							</view>
							<view class="detail-item">
								<text class="item-label">职务：</text>
								<text class="item-value">{{ currentMember.position }}</text>
							</view>
						</view>
					</view>

					<!-- 联系信息 -->
					<view class="detail-section">
						<view class="detail-header">
							<text class="detail-title">联系信息</text>
						</view>
						<view class="detail-grid">
							<view class="detail-item">
								<text class="item-label">手机号码：</text>
								<text class="item-value">{{ currentMember.phone }}</text>
							</view>
							<view class="detail-item">
								<text class="item-label">电子邮箱：</text>
								<text class="item-value">{{ currentMember.email || '未填写' }}</text>
							</view>
							<view class="detail-item">
								<text class="item-label">办公电话：</text>
								<text class="item-value">{{ currentMember.officePhone || '未填写' }}</text>
							</view>
						</view>
					</view>

					<!-- 工作信息 -->
					<view class="detail-section">
						<view class="detail-header">
							<text class="detail-title">工作信息</text>
						</view>
						<view class="detail-grid">
							<view class="detail-item full-width">
								<text class="item-label">负责区域：</text>
								<text class="item-value">{{ currentMember.area }}</text>
							</view>
							<view class="detail-item">
								<text class="item-label">在岗状态：</text>
								<view class="status-badge" :class="getStatusClass(currentMember.status)">
									{{ getStatusText(currentMember.status) }}
								</view>
							</view>
							<view class="detail-item">
								<text class="item-label">入职时间：</text>
								<text class="item-value">{{ currentMember.joinDate }}</text>
							</view>
							<view class="detail-item full-width">
								<text class="item-label">管辖企业数量：</text>
								<text class="item-value">{{ currentMember.enterpriseCount }} 家</text>
							</view>
						</view>
					</view>

					<!-- 工作统计 -->
					<view class="detail-section">
						<view class="detail-header">
							<text class="detail-title">工作统计</text>
						</view>
						<view class="stats-grid">
							<view class="stat-item">
								<text class="stat-number">{{ currentMember.monthlyTasks || 0 }}</text>
								<text class="stat-label">本月任务</text>
							</view>
							<view class="stat-item">
								<text class="stat-number">{{ currentMember.completedTasks || 0 }}</text>
								<text class="stat-label">已完成</text>
							</view>
							<view class="stat-item">
								<text class="stat-number">{{ currentMember.responseRate || '0%' }}</text>
								<text class="stat-label">响应率</text>
							</view>
							<view class="stat-item">
								<text class="stat-number">{{ currentMember.satisfaction || '0%' }}</text>
								<text class="stat-label">满意度</text>
							</view>
						</view>
					</view>
				</view>

				<view class="popup-footer">
					<tn-button type="primary" @click="contactMember(currentMember)" class="action-btn">
						<uni-icons type="phone" size="16" color="#fff"></uni-icons>
						联系网格员
					</tn-button>
					<tn-button type="default" @click="assignTask(currentMember)" class="action-btn">
						<uni-icons type="plus" size="16" color="#666"></uni-icons>
						分配任务
					</tn-button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, onMounted } from 'vue'

	// 搜索相关
	const searchKeyword = ref('')
	const loading = ref(false)

	// 分页相关
	const currentPage = ref(1)
	const pageSize = ref(10)
	const total = ref(0)

	// 弹窗引用
	const detailPopup = ref()

	// 网格员数据
	const gridMembers = ref<any[]>([])
	const currentMember = ref<any>(null)

	// 状态映射
	const statusMap = {
		1: { text: '在岗', class: 'status-online' },
		2: { text: '离岗', class: 'status-offline' },
		3: { text: '忙碌', class: 'status-busy' },
		4: { text: '休假', class: 'status-leave' }
	}

	// 初始化数据
	const initGridMembers = () => {
		// 模拟数据 - 实际项目中从API获取
		gridMembers.value = [
			{
				id: 1,
				name: '张三',
				workNumber: 'GY2024001',
				area: '某某区某某街道税务网格A区',
				phone: '13800138001',
				email: 'zhangsan@tax.gov.cn',
				status: 1,
				gender: '男',
				position: '高级网格员',
				officePhone: '020-12345678',
				joinDate: '2022-03-15',
				enterpriseCount: 45,
				monthlyTasks: 23,
				completedTasks: 18,
				responseRate: '95%',
				satisfaction: '92%'
			},
			{
				id: 2,
				name: '李四',
				workNumber: 'GY2024002',
				area: '某某区某某街道税务网格B区',
				phone: '13800138002',
				email: 'lisi@tax.gov.cn',
				status: 2,
				gender: '女',
				position: '网格员',
				officePhone: '020-12345679',
				joinDate: '2023-01-10',
				enterpriseCount: 38,
				monthlyTasks: 19,
				completedTasks: 15,
				responseRate: '88%',
				satisfaction: '90%'
			},
			{
				id: 3,
				name: '王五',
				workNumber: 'GY2024003',
				area: '某某区某某街道税务网格C区',
				phone: '13800138003',
				status: 3,
				gender: '男',
				position: '网格组长',
				joinDate: '2021-08-20',
				enterpriseCount: 52,
				monthlyTasks: 28,
				completedTasks: 25,
				responseRate: '98%',
				satisfaction: '96%'
			},
			{
				id: 4,
				name: '赵六',
				workNumber: 'GY2024004',
				area: '某某区某某街道税务网格D区',
				phone: '13800138004',
				email: 'zhaoliu@tax.gov.cn',
				status: 4,
				gender: '女',
				position: '网格员',
				joinDate: '2023-05-08',
				enterpriseCount: 32,
				monthlyTasks: 16,
				completedTasks: 12,
				responseRate: '85%',
				satisfaction: '87%'
			}
		]
		total.value = gridMembers.value.length
	}

	// 搜索处理
	const handleSearch = () => {
		loading.value = true
		// 模拟搜索 - 实际项目中调用API
		setTimeout(() => {
			if (searchKeyword.value) {
				const filtered = gridMembers.value.filter(member =>
					member.name.includes(searchKeyword.value) ||
					member.area.includes(searchKeyword.value)
				)
				gridMembers.value = filtered
				total.value = filtered.length
			} else {
				initGridMembers()
			}
			loading.value = false
		}, 500)
	}

	// 获取状态样式
	const getStatusClass = (status : number) => {
		return statusMap[status]?.class || 'status-offline'
	}

	// 获取状态文本
	const getStatusText = (status : number) => {
		return statusMap[status]?.text || '未知'
	}

	// 查看网格员详情
	const viewMemberDetail = (member : any) => {
		currentMember.value = member
		detailPopup.value.open()
	}

	// 关闭详情弹窗
	const closeDetailPopup = () => {
		detailPopup.value.close()
	}

	// 联系网格员
	const contactMember = (member : any) => {
		uni.makePhoneCall({
			phoneNumber: member.phone
		})
	}

	// 分配任务
	const assignTask = (member : any) => {
		uni.showModal({
			title: '分配任务',
			content: `确定要给 ${member.name} 分配新任务吗？`,
			success: (res) => {
				if (res.confirm) {
					uni.navigateTo({
						url: `/pages/task/assign?memberId=${member.id}`
					})
					closeDetailPopup()
				}
			}
		})
	}

	const backToIndex = () => {
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}

	// 分页变化
	const handlePageChange = (e : any) => {
		currentPage.value = e.current
		// 实际项目中这里应该调用API获取对应页面的数据
	}

	onMounted(() => {
		initGridMembers()
	})
</script>

<style lang="scss" scoped>
	.page-container {
		min-height: 100vh;
		background-color: #f5f7fa;
	}

	.content {
		padding: 6vh 20px 0 20px;
	}

	// 搜索区域
	.search-section {
		margin-bottom: 30rpx;

		.search-card {
			background: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

			.search-row {
				display: flex;
				gap: 20rpx;
				align-items: center;

				.search-input {
					flex: 1;
				}

				.search-btn {
					width: 200rpx;
					height: 32px;
				}
			}
		}
	}

	// 表格区域
	.table-section {
		.section-card {
			background: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
		}

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.total-count {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	// 网格员信息
	.member-info {
		display: flex;
		align-items: center;
		justify-content: center;

		.avatar {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-right: 15rpx;
		}

		.member-name {
			font-size: 28rpx;
			color: #333;
		}
	}

	.area-text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
	}

	.contact-info {
		.phone {
			display: block;
			font-size: 26rpx;
			color: #333;
		}

		.email {
			display: block;
			font-size: 22rpx;
			color: #999;
			margin-top: 5rpx;
		}
	}

	// 状态标签
	.status-badge {
		display: inline-block;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		font-weight: 500;

		&.status-online {
			background: #f6ffed;
			color: #52c41a;
			border: 1rpx solid #b7eb8f;
		}

		&.status-offline {
			background: #f5f5f5;
			color: #999;
			border: 1rpx solid #d9d9d9;
		}

		&.status-busy {
			background: #fff2e8;
			color: #fa541c;
			border: 1rpx solid #ffbb96;
		}

		&.status-leave {
			background: #e6f7ff;
			color: #1890ff;
			border: 1rpx solid #91d5ff;
		}
	}

	// 分页
	.pagination-section {
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
	}

	// 详情弹窗
	.detail-popup {
		.popup-content {
			width: 700rpx;
			max-height: 80vh;
			border-radius: 20rpx;
			overflow: hidden;
			background: #fff;
		}

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #f0f0f0;

			.popup-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
		}

		.popup-body {
			padding: 30rpx;
			max-height: 60vh;
			overflow-y: auto;
		}

		.detail-section {
			margin-bottom: 40rpx;

			.detail-header {
				margin-bottom: 20rpx;
				padding-bottom: 15rpx;
				border-bottom: 1rpx solid #f0f0f0;

				.detail-title {
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
				}
			}
		}

		.detail-grid {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;

			.detail-item {
				width: calc(50% - 10rpx);

				&.full-width {
					width: 100%;
				}

				.item-label {
					font-size: 26rpx;
					color: #666;
				}

				.item-value {
					font-size: 26rpx;
					color: #333;
					font-weight: 500;
				}
			}
		}

		.stats-grid {
			display: flex;
			justify-content: space-around;
			text-align: center;

			.stat-item {
				.stat-number {
					display: block;
					font-size: 32rpx;
					font-weight: bold;
					color: #1890ff;
					margin-bottom: 8rpx;
				}

				.stat-label {
					font-size: 22rpx;
					color: #999;
				}
			}
		}

		.popup-footer {
			display: flex;
			gap: 20rpx;
			padding: 30rpx;
			border-top: 1rpx solid #f0f0f0;

			.action-btn {
				flex: 1;
			}
		}
	}
</style>