<template>
	<view>
		<view class="page">
			<cu-custom bgColor="bg-blue" :isBack="true">
				<block slot="content">胎盘录入</block>
			</cu-custom>
			
			<!-- 信息展示区域 -->
			<view class="info-section">
				<view class="info-item">
					<text class="info-label">医院</text>
					<text class="info-value">{{ hospital }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">科室</text>
					<text class="info-value">{{ department }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">医废类型</text>
					<text class="info-value">胎盘</text>
				</view>
				<view class="info-item">
					<text class="info-label">医废编码</text>
					<text class="info-value code">{{ wasteCode }}</text>
				</view>
			</view>
			
			<!-- 录入表单 -->
			<view class="form-section">
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>收集人员
					</view>
					<picker mode="selector" :range="collectorList" range-key="name" @change="onCollectorChange">
						<view class="picker-view">
							<text :class="collector ? '' : 'placeholder'">{{ collector ? collector.name : '请选择收集人员' }}</text>
							<text class="cuIcon-right"></text>
						</view>
					</picker>
				</view>
				
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>交接人员
					</view>
					<picker mode="selector" :range="handoverList" range-key="name" @change="onHandoverChange">
						<view class="picker-view">
							<text :class="handover ? '' : 'placeholder'">{{ handover ? handover.name : '请选择交接人员' }}</text>
							<text class="cuIcon-right"></text>
						</view>
					</picker>
				</view>
				
				<view class="form-item form-item-large">
					<view class="form-label">
						<text class="required">*</text>住院号
					</view>
					<input class="form-input-large" v-model="hospitalNo" placeholder="请输入住院号" />
				</view>
				
				<view class="form-item form-item-large">
					<view class="form-label">
						<text class="required">*</text>患者姓名
					</view>
					<input class="form-input-large" v-model="patientName" placeholder="请输入患者姓名" />
				</view>
				
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>处置方式
					</view>
					<picker mode="selector" :range="disposalList" @change="onDisposalChange">
						<view class="picker-view">
							<text :class="disposal ? '' : 'placeholder'">{{ disposal || '请选择处置方式' }}</text>
							<text class="cuIcon-right"></text>
						</view>
					</picker>
				</view>
				
				<view class="form-item">
					<view class="form-label">处置时间</view>
					<picker mode="datetime" :value="disposalDateTime" @change="onDateTimeChange">
						<view class="picker-view">
							<text :class="disposalDateTime ? '' : 'placeholder'">{{ disposalDateTime || '请选择日期时间' }}</text>
							<text class="cuIcon-right"></text>
						</view>
					</picker>
				</view>
			</view>
			
			<!-- 录入按钮 -->
			<view class="btn-section">
				<button class="submit-btn" @tap="submitForm">录入</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			hospital: '',
			department: '',
			wasteCode: '',
			collector: null,
			handover: null,
			hospitalNo: '',
			patientName: '',
			disposal: '',
			disposalDateTime: '',
			collectorList: [
				{ id: 1, name: '张三' },
				{ id: 2, name: '李四' },
				{ id: 3, name: '王五' }
			],
			handoverList: [
				{ id: 1, name: '赵六' },
				{ id: 2, name: '钱七' },
				{ id: 3, name: '孙八' }
			],
			disposalList: ['家属带走', '病捡带走', '病捡留院', '医院处理']
		}
	},
	onLoad() {
		this.hospital = getApp().globalData.hospital || '测试医院'
		this.department = getApp().globalData.department || '产科'
		this.generateWasteCode()
		this.setDefaultDate()
	},
	methods: {
		// 生成12位随机医废编码
		generateWasteCode() {
			const chars = '0123456789'
			let code = ''
			for (let i = 0; i < 12; i++) {
				code += chars.charAt(Math.floor(Math.random() * chars.length))
			}
			this.wasteCode = code
		},
		// 设置默认日期时间为现在
		setDefaultDate() {
			const now = new Date()
			const year = now.getFullYear()
			const month = String(now.getMonth() + 1).padStart(2, '0')
			const day = String(now.getDate()).padStart(2, '0')
			const hours = String(now.getHours()).padStart(2, '0')
			const minutes = String(now.getMinutes()).padStart(2, '0')
			this.disposalDateTime = `${year}-${month}-${day} ${hours}:${minutes}`
		},
		onCollectorChange(e) {
			const index = e.detail.value
			this.collector = this.collectorList[index]
		},
		onHandoverChange(e) {
			const index = e.detail.value
			this.handover = this.handoverList[index]
		},
		onDisposalChange(e) {
			const index = e.detail.value
			this.disposal = this.disposalList[index]
		},
		onDateTimeChange(e) {
			this.disposalDateTime = e.detail.value
		},
		submitForm() {
			// 表单验证
			if (!this.collector) {
				uni.showToast({ title: '请选择收集人员', icon: 'none' })
				return
			}
			if (!this.handover) {
				uni.showToast({ title: '请选择交接人员', icon: 'none' })
				return
			}
			if (!this.hospitalNo) {
				uni.showToast({ title: '请输入住院号', icon: 'none' })
				return
			}
			if (!this.patientName) {
				uni.showToast({ title: '请输入患者姓名', icon: 'none' })
				return
			}
			if (!this.disposal) {
				uni.showToast({ title: '请选择处置方式', icon: 'none' })
				return
			}
			
			// 提交逻辑（暂不实现接口）
			uni.showToast({ title: '录入成功', icon: 'success' })
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		}
	}
}
</script>

<style>
.page {
	min-height: 100vh;
	background: #f5f5f5;
}

/* 信息展示区域 */
.info-section {
	background: #fff;
	margin: 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.info-item:last-child {
	border-bottom: none;
}

.info-label {
	font-size: 28rpx;
	color: #666;
}

.info-value {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.info-value.code {
	color: #1c8cff;
	font-family: monospace;
	letter-spacing: 2rpx;
}

/* 表单区域 */
.form-section {
	background: #fff;
	margin: 20rpx;
	border-radius: 16rpx;
	padding: 10rpx 30rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.form-item {
	padding: 28rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.form-item:last-child {
	border-bottom: none;
}

.form-label {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 16rpx;
}

.required {
	color: #ff4949;
	margin-right: 8rpx;
}

.picker-view {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 24rpx;
	background: #f8f8f8;
	border-radius: 12rpx;
	font-size: 28rpx;
	color: #333;
}

.picker-view .placeholder {
	color: #999;
}

.picker-view .cuIcon-right {
	font-size: 28rpx;
	color: #999;
}

.form-input {
	padding: 30rpx 24rpx;
	background: #f8f8f8;
	border-radius: 12rpx;
	font-size: 28rpx;
	color: #333;
	height: 80rpx;
	line-height: 80rpx;
}

.form-item-large {
	padding: 36rpx 0;
}

.form-input-large {
	padding: 28rpx 30rpx;
	background: #f8f8f8;
	border-radius: 16rpx;
	font-size: 32rpx;
	color: #333;
	height: 96rpx;
	line-height: 40rpx;
}

/* 按钮区域 */
.btn-section {
	padding: 40rpx 30rpx;
}

.submit-btn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	background: linear-gradient(135deg, #1c8cff 0%, #0077e6 100%);
	color: #fff;
	font-size: 32rpx;
	font-weight: 500;
	border: none;
	border-radius: 44rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 145, 255, 0.3);
}

.submit-btn::after {
	border: none;
}

.submit-btn:active {
	transform: scale(0.98);
	opacity: 0.9;
}
</style>
