<template>
	<view class="assign-order-page">
		<!-- 顶部导航 -->
		<u-navbar :is-back="true" title="分配订单" :background="{'background':'#1479ff'}" title-color="#fff"
			:border-bottom="false">
		</u-navbar>
		<view class="b-border"></view>

		<!-- 护工列表 -->
		<view class="nurse-list">
			<view class="section-title">选择护工</view>
			<view class="search-box">
				<u-search v-model="searchKeyword" placeholder="搜索护工姓名" @search="searchNurse" @custom="searchNurse"></u-search>
			</view>
			
			<scroll-view scroll-y style="height: 400rpx;" @scrolltolower="loadMoreNurses">
				<view v-if="hasNurseList" class="nurse-items">
					<view 
						v-for="nurse in nurseList" 
						:key="nurse.id" 
						:class="['nurse-item', { active: selectedNurseId === nurse.id }]"
						@click="selectNurse(nurse)"
					>
						<view class="nurse-avatar">
							<u-avatar :src="getNurseAvatar(nurse)" size="80"></u-avatar>
						</view>
						<view class="nurse-info">
							<view class="nurse-name">{{ nurse.name }}</view>
							<view class="nurse-phone">{{ nurse.mobile }}</view>
						</view>
						<view class="nurse-select">
							<u-icon v-if="selectedNurseId === nurse.id" name="checkmark-circle" color="#1479ff" size="40"></u-icon>
						</view>
					</view>
				</view>
				<view v-else class="empty-state">
					<u-empty mode="list" text="暂无护工"></u-empty>
				</view>
				
				<u-loadmore v-if="hasNurseList" :margin-top="20" :margin-bottom="40" :status="loadStatus"></u-loadmore>
			</scroll-view>
		</view>

		<!-- 分配按钮 -->
		<view class="assign-btn-wrapper">
			<u-button 
				type="primary" 
				shape="circle" 
				class="assign-btn"
				:disabled="!selectedNurseId"
				@click="assignOrder"
			>
				确认分配
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				nurseList: [],
				selectedNurseId: null,
				searchKeyword: '',
				loadStatus: 'loadmore',
				page: 1,
				pageSize: 10,
				hasMore: true
			}
		},
		onLoad(options) {
			if (options.id) {
				this.orderId = options.id;
			}
			this.getNurseList();
		},
		methods: {
			// 获取护工列表
			async getNurseList(isLoadMore = false) {
				try {
					if (!isLoadMore) {
						this.page = 1;
						this.nurseList = [];
					}
					
					const params = {
						page: this.page,
						page_size: this.pageSize
					};
					
					// 如果有搜索关键词，添加搜索条件
					if (this.searchKeyword) {
						params['filter[0][key]'] = 'name';
						params['filter[0][op]'] = 'like';
						params['filter[0][value]'] = this.searchKeyword;
					}
					
					// 只显示在线护工
					params['filter[1][key]'] = 'status';
					params['filter[1][op]'] = 'eq';
					params['filter[1][value]'] = 1;
					
					const res = await this.$u.api.nurseIndex(params);
					
					if (res && res.data) {
						if (isLoadMore) {
							this.nurseList.push(...res.data);
						} else {
							this.nurseList = res.data;
						}
						
						this.hasMore = res.data.length === this.pageSize;
						this.loadStatus = this.hasMore ? 'loadmore' : 'nomore';
					} else {
						this.loadStatus = 'nomore';
						if (!isLoadMore) {
							this.nurseList = [];
						}
					}
				} catch (error) {
					console.error('获取护工列表失败:', error);
					this.loadStatus = 'nomore';
					uni.showToast({
						title: '获取护工列表失败',
						icon: 'none'
					});
				}
			},
			
			// 搜索护工
			searchNurse() {
				this.getNurseList();
			},
			
			// 加载更多护工
			loadMoreNurses() {
				if (this.hasMore && this.loadStatus === 'loadmore') {
					this.page++;
					this.getNurseList(true);
				}
			},
			
			// 选择护工
			selectNurse(nurse) {
				this.selectedNurseId = nurse.id;
			},
			
			// 分配订单
			async assignOrder() {
				if (!this.selectedNurseId) {
					uni.showToast({
						title: '请选择护工',
						icon: 'none'
					});
					return;
				}
				
				try {
					const res = await this.$u.api.operatorOrderSave({
						id: this.orderId,
						nurse_id: this.selectedNurseId
					});
					
					if (res.errorCode === 0 || res.errorCode === undefined || res.errorCode === null) {
						uni.showToast({
							title: '分配成功',
							icon: 'success'
						});
						
						// 延迟返回上一页
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							title: '分配失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('分配订单失败:', error);
					uni.showToast({
						title: '分配失败',
						icon: 'none'
					});
				}
			},
			
			// 获取护工头像
			getNurseAvatar(nurse) {
				if (nurse.avatar) {
					return nurse.avatar_detail.url;
				}
				return '/static/default-avatar.png';
			}
		},
		computed: {
			hasNurseList() {
				return this.nurseList.length > 0;
			}
		}
	}
</script>

<style scoped lang="scss">
	.assign-order-page {
		background: #f6f8fb;
		min-height: 100vh;
	}

	.b-border {
		width: 100%;
		height: 30rpx;
		border-radius: 0 0 120rpx 120rpx;
		background-color: #1479ff;
	}

	.nurse-list {
		padding: 30rpx;
	}

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

	.search-box {
		margin-bottom: 30rpx;
	}

	.nurse-items {
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.nurse-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
		transition: all 0.3s ease;

		&:last-child {
			border-bottom: none;
		}

		&.active {
			background: #f0f8ff;
			border-left: 6rpx solid #1479ff;
		}

		&:active {
			background: #f0f8ff;
		}
	}

	.nurse-avatar {
		margin-right: 30rpx;
	}

	.nurse-info {
		flex: 1;
	}

	.nurse-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.nurse-phone {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.nurse-status {
		font-size: 24rpx;
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
		display: inline-block;

		&.online {
			background: #e8f5e8;
			color: #52c41a;
		}

		&.offline {
			background: #f5f5f5;
			color: #999;
		}
	}

	.nurse-select {
		margin-left: 20rpx;
	}

	.empty-state {
		background: #fff;
		border-radius: 20rpx;
		padding: 60rpx 0;
	}

	.assign-btn-wrapper {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 40rpx;
		padding: 0 30rpx;
		z-index: 1001;
	}

	.assign-btn {
		width: 100%;
		background: linear-gradient(to right, #476de4, #7bb9f7);
		color: #fff;
		font-size: 32rpx;
		border-radius: 50rpx;
		height: 88rpx;
		line-height: 88rpx;

		&:disabled {
			background: #ccc;
			color: #999;
		}
	}
</style>
