<template>
	<view>
		<scroll-view scroll-y class="page">
			<cu-custom bgColor="bg-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">交接列表</block></cu-custom>
			
			<!-- 搜索框 -->
			<view class="search-box">
				<input
					class="search-input"
					type="text"
					v-model="searchKeyword"
					placeholder="请输入科室名称"
					placeholder-class="search-placeholder"
				/>
				<text class="search-icon" v-if="!searchKeyword">🔍</text>
				<text class="clear-icon" v-else @click="clearSearch">✕</text>
			</view>
			
			<!-- 空数据提示 -->
			<view v-if="!handDetailsInfo || handDetailsInfo.length === 0" class="empty-container">
				<text class="empty-icon">📭</text>
				<text class="empty-text">本日医废数据为空</text>
			</view>
			
			<!-- 搜索无结果提示 -->
			<view v-else-if="filteredGroupedData.length === 0" class="empty-container">
				<text class="empty-icon">📭</text>
				<text class="empty-text">未找到匹配的科室</text>
			</view>
			
			<!-- 表格展示 -->
			<view v-else class="data-wrapper" v-for="(deptData, deptIndex) in filteredGroupedData" :key="deptIndex">
				<!-- 科室汇总行 -->
				<view class="dept-summary-row">
					<view class="summary-cell summary-cell-dept">
						<text class="dept-icon">🏥</text>
						<text class="dept-name">{{deptData.department}}</text>
					</view>
					<view class="summary-cell summary-cell-count">
						<text class="summary-value">{{deptData.totalCount}}</text>
						<text class="summary-unit">袋</text>
					</view>
					<view class="summary-cell summary-cell-weight">
						<text class="summary-value">{{deptData.totalWeight}}</text>
						<text class="summary-unit">kg</text>
					</view>
				</view>
				
				<!-- 表格形式展示分类 -->
				<view class="table-container">
					<view class="table-header">
						<view class="table-cell table-cell-type">类型</view>
						<view class="table-cell table-cell-count">袋数</view>
						<view class="table-cell table-cell-weight">重量</view>
						<view class="table-cell table-cell-type">收集人</view>
						<view class="table-cell table-cell-hand">交接人</view>
						<view class="table-cell table-cell-action">操作</view>
					</view>
					<view class="table-row" v-for="(item, itemIndex) in deptData.items" :key="itemIndex">
						<view class="table-cell table-cell-type">
							<img :src="item.image" class="type-icon" v-if="item.image">
							<text>{{item.type}}</text>
						</view>
						<view class="table-cell table-cell-count">{{item.totalCount}}</view>
						<view class="table-cell table-cell-weight">{{item.totalWeight}}</view>
						<view class="table-cell table-cell-type">{{item.reclName}}</view>
						<view class="table-cell table-cell-hand" v-if="itemIndex === 0">{{item.handName}}</view>
						<view class="table-cell table-cell-hand" v-else></view>
						<view class="table-cell table-cell-action" v-if="itemIndex === 0">
							<button class="sign-btn" @click="goToSign(item)">签</button>
						</view>
						<view class="table-cell table-cell-action" v-else></view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				handDetailsInfo: [],
				groupedHandData: [],
				searchKeyword: ''
			}
		},
		computed: {
			// 按科室分组数据
			groupHandData() {
				const groups = {};
				this.handDetailsInfo.forEach(item => {
					if (!groups[item.department]) {
						groups[item.department] = {
							department: item.department,
							totalCount: 0,
							totalWeight: 0,
							items: []
						};
					}
					groups[item.department].totalCount += parseFloat(item.totalCount) || 0;
					groups[item.department].totalWeight += parseFloat(item.totalWeight) || 0;
					groups[item.department].items.push({
						...item,
						totalCount: Math.round(parseFloat(item.totalCount) || 0),
						totalWeight: (parseFloat(item.totalWeight) || 0).toFixed(2)
					});
				});
				return Object.values(groups).map(group => ({
					...group,
					totalCount: Math.round(group.totalCount),
					totalWeight: group.totalWeight.toFixed(2)
				}));
			},
			// 过滤后的分组数据
			filteredGroupedData() {
				if (!this.searchKeyword) {
					return this.groupedHandData;
				}
				return this.groupedHandData.filter(dept => {
					return dept.department && dept.department.includes(this.searchKeyword);
				});
			}
		},
		mounted(){
			// 获取全局变量中的数据
			this.hospital  = getApp().globalData.hospital
			this.sortHospital = getApp().globalData.sortHospital
			this.department = getApp().globalData.department
			this.duty = getApp().globalData.duty
			this.getHandDetailsInfo();
		},
		watch: {
			handDetailsInfo: {
				handler(newVal) {
					this.groupedHandData = this.groupHandData;
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			getHandDetailsInfo(){
				let that = this;
				uni.request({
					url: "https://lekapi.opmonitor.com/?c=app_api&a=getHandDetailsInfo",
					data: {hospital: that.hospital, sortHospital: that.sortHospital, department: that.department, duty: that.duty},
					header: {
						'Content-type': 'application/json'
					},
					success: function(res){
						that.handDetailsInfo = res.data.data
					},
					fail: () => {
						console.info('小程序域名不正确，请检查域名的正确性')
					}
				})
			},
			goToSign(item) {
				// 跳转到签名页面，传递必要的数据
				uni.navigateTo({
					url: `/pages/plugin/sign?id=${item.id}&handName=${item.handName}`
				})
			},
			// 清空搜索
			clearSearch() {
				this.searchKeyword = '';
			}
		}
	}
</script>

<style>
	.bg-gradual-pink{
		vertical-align: middle;
		font-size:18px;
		background:linear-gradient(135deg,rgba(45,201,235,1) 0%,rgba(20,210,184,1) 100%);
	}
	
	.cu{
		height:89px;
	}
	
	.page {
		width: 100vw;
		height: 100Vh;
	}
	
	.page.show {
		overflow: hidden;
	}
	
	.cuIcon-locationfill{
		color:#2CC9EA;
	}
	
	/* 空数据容器 */
	.empty-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 200rpx 0;
	}
	
	.empty-icon {
		font-size: 120rpx;
		margin-bottom: 30rpx;
	}
	
	.empty-text {
		font-size: 32rpx;
		color: #999;
	}
	
	/* 搜索框 */
	.search-box {
		margin: 12rpx;
		padding: 0 24rpx;
		background-color: #fff;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 2rpx 12rpx rgba(74, 144, 226, 0.15);
		border: 1px solid #e1e8f0;
	}
	
	.search-input {
		flex: 1;
		height: 70rpx;
		font-size: 26rpx;
		color: #333;
	}
	
	.search-placeholder {
		color: #999;
	}
	
	.search-icon, .clear-icon {
		font-size: 28rpx;
		margin-left: 10rpx;
	}
	
	.clear-icon {
		color: #999;
		padding: 10rpx;
	}
	
	/* 数据包裹层 */
	.data-wrapper {
		margin-bottom: 40rpx;
	}
	
	/* 科室汇总行 */
	.dept-summary-row {
		display: flex;
		align-items: center;
		margin: 20rpx;
		padding: 28rpx 24rpx;
		background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%);
		border-radius: 20rpx;
		box-shadow: 0 6rpx 24rpx rgba(41, 128, 185, 0.4);
		border: 2px solid rgba(255, 255, 255, 0.2);
		position: relative;
		overflow: hidden;
	}
	
	.dept-summary-row::before {
		content: '';
		position: absolute;
		top: -50%;
		right: -20%;
		width: 200rpx;
		height: 200rpx;
		background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
		border-radius: 50%;
	}
	
	.summary-cell {
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 28rpx;
		position: relative;
		z-index: 1;
	}
	
	.summary-cell-dept {
		flex: 2;
	}
	
	.dept-icon {
		font-size: 40rpx;
		margin-right: 14rpx;
		filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
	}
	
	.dept-name {
		font-size: 32rpx;
		font-weight: 700;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
	}
	
	.summary-cell-count,
	.summary-cell-weight {
		flex: 1;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: rgba(255, 255, 255, 0.15);
		border-radius: 16rpx;
		padding: 16rpx 20rpx;
		margin: 0 10rpx;
		backdrop-filter: blur(10rpx);
		border: 1px solid rgba(255, 255, 255, 0.2);
	}
	
	.summary-value {
		font-size: 36rpx;
		font-weight: 800;
		margin-bottom: 6rpx;
	}
	
	.summary-unit {
		font-size: 20rpx;
		opacity: 0.9;
	}
	
	/* 表格容器 */
	.table-container {
		margin: 0 20rpx 20rpx 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #f8f9fa;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		border: 2px solid #d4e6f1;
	}
	
	/* 表头 */
	.table-header {
		display: flex;
		background: linear-gradient(90deg, #2980b9 0%, #1a5276 100%);
		color: #fff;
		font-weight: 700;
		font-size: 22rpx;
		letter-spacing: 2rpx;
		padding-top: 4rpx;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	/* 表格行 */
	.table-row {
		display: flex;
		border-bottom: 1px dashed #d0dbe6;
		background-color: #fff;
		transition: all 0.3s ease;
		min-height: 56rpx;
	}

	.table-row:last-child {
		border-bottom: none;
	}

	.table-row:hover {
		background-color: #eaf2f8;
		transform: translateX(4rpx);
	}

	/* 表格单元格 */
	.table-cell {
		padding: 10rpx 8rpx;
		font-size: 22rpx;
		color: #2c3e50;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		word-break: break-all;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 1;
		min-width: 0;
	}

	.table-cell-type {
		justify-content: flex-start;
		padding-left: 12rpx;
		flex: 1.5;
	}

	.table-cell-count {
		color: #2980b9;
		font-weight: 600;
	}

	.table-cell-weight {
		color: #c0392b;
		font-weight: 600;
	}

	.table-cell-hand {
		color: #666;
		font-weight: 500;
		font-size: 20rpx;
	}

	.table-cell-action {
		flex: 0.8;
		justify-content: center;
	}
	
	/* 类型图标 */
	.type-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 14rpx;
		border-radius: 8rpx;
		padding: 4rpx;
		background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%);
	}
	
	/* 签名按钮 */
	.sign-btn {
		background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%);
		color: #fff;
		border: none;
		border-radius: 24rpx;
		padding: 16rpx 40rpx;
		font-size: 26rpx;
		line-height: 1;
		font-weight: 700;
		box-shadow: 0 4rpx 16rpx rgba(41, 128, 185, 0.5);
		transition: all 0.3s ease;
		letter-spacing: 4rpx;
	}
	
	.sign-btn::after {
		border: none;
	}
	
	.sign-btn:active {
		transform: scale(0.92);
		box-shadow: 0 2rpx 10rpx rgba(41, 128, 185, 0.4);
	}
</style>
