<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="form-container">
				<!-- 医院 -->
				<view class="form-item">
					<view class="form-label">医院</view>
					<view class="form-value">{{hospital}}</view>
				</view>
				
				<!-- 分院 -->
				<view class="form-item">
					<view class="form-label">分院</view>
					<view class="form-value">{{sortHospital || '本院'}}</view>
				</view>
				
				<!-- 科室 -->
				<view class="form-item">
					<view class="form-label">科室</view>
					<picker mode="selector" :range="departmentList" @change="onDepartmentChange">
						<view class="form-value-picker">
							<text v-if="selectedDepartment">{{selectedDepartment}}</text>
							<text v-else class="placeholder">请选择科室</text>
							<text class="picker-icon">›</text>
						</view>
					</picker>
				</view>
				
				<!-- 医废编码 -->
				<view class="form-item">
					<view class="form-label">医废编码</view>
					<view class="form-value">{{medicalCode}}</view>
				</view>
				
				<!-- 类型 -->
				<view class="form-item">
					<view class="form-label">类型</view>
					<picker mode="selector" :range="typeList" @change="onTypeChange">
						<view class="form-value-picker">
							<text v-if="selectedType">{{selectedType}}</text>
							<text v-else class="placeholder">请选择类型</text>
							<text class="picker-icon">›</text>
						</view>
					</picker>
				</view>
				
				<!-- 重量 -->
				<view class="form-item">
					<view class="form-label">重量(kg)</view>
					<input class="form-input" type="digit" v-model="weight" placeholder="请输入重量" placeholder-class="input-placeholder" />
				</view>
				
				<!-- 收集人员 -->
				<view class="form-item">
					<view class="form-label">收集人员</view>
					<picker mode="selector" :range="collectorList" @change="onCollectorChange">
						<view class="form-value-picker">
							<text v-if="selectedCollector">{{selectedCollector}}</text>
							<text v-else class="placeholder">请选择收集人员</text>
							<text class="picker-icon">›</text>
						</view>
					</picker>
				</view>
				
				<!-- 交接人员 -->
				<view class="form-item">
					<view class="form-label">交接人员</view>
					<picker mode="selector" :range="handoverList" @change="onHandoverChange">
						<view class="form-value-picker">
							<text v-if="selectedHandover">{{selectedHandover}}</text>
							<text v-else class="placeholder">请选择交接人员</text>
							<text class="picker-icon">›</text>
						</view>
					</picker>
				</view>
				
				<!-- 收集时间 -->
				<view class="form-item">
					<view class="form-label">收集时间</view>
					<view class="datetime-picker">
						<picker mode="date" :value="collectionDate" @change="onDateChange" :end="endDate">
							<view class="picker-box">
								<text class="picker-icon">📅</text>
								<text class="picker-text">{{collectionDate || '选择日期'}}</text>
								<text class="picker-arrow">›</text>
							</view>
						</picker>
						<view class="picker-separator">·</view>
						<picker mode="time" :value="collectionTime" @change="onTimeChange">
							<view class="picker-box">
								<text class="picker-icon">🕐</text>
								<text class="picker-text">{{collectionTime}}</text>
								<text class="picker-arrow">›</text>
							</view>
						</picker>
					</view>
				</view>
				
				<!-- 按钮组 -->
				<view class="button-group">
					<button class="cancel-btn" @click="cancelCollection">取消填报</button>
					<button class="confirm-btn" @click="confirmCollection">确认填报</button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hospital: '',
				sortHospital: '',
				department: '',
				name: '',
				duty: '',
				medicalCode: '',
				weight: '',
				collectionDate: '',
				collectionTime: '',
				endDate: '',
				selectedDepartment: '',
				selectedType: '',
				selectedCollector: '',
				selectedHandover: '',
				departmentList: [],
				typeList: [],
				collectorList: [],
				handoverList: []
			}
		},
		mounted() {
			// 获取全局变量
			this.hospital = getApp().globalData.hospital
			this.sortHospital = getApp().globalData.sortHospital
			this.department = getApp().globalData.department
			this.name = getApp().globalData.name
			this.duty = getApp().globalData.duty
			
			// 生成随机医废编码（31开头的20位数字）
			this.generateMedicalCode()
			
			// 设置默认收集时间
			this.setDefaultTime()
			
			// 获取下拉选项数据（预留接口）
			this.getDepartmentOptions()
			this.getTypeOptions()
			this.getCollectorOptions()
			this.getHandoverOptions()
		},
		methods: {
			// 生成随机医废编码
			generateMedicalCode() {
				let code = '31'
				for (let i = 0; i < 18; i++) {
					code += Math.floor(Math.random() * 10)
				}
				this.medicalCode = code
			},
			
			// 设置默认时间
			setDefaultTime() {
				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')
				this.collectionDate = `${year}-${month}-${day}`
				this.endDate = `${year}-${month}-${day}`
				// 时间
				const hours = String(now.getHours()).padStart(2, '0')
				const minutes = String(now.getMinutes()).padStart(2, '0')
				this.collectionTime = `${hours}:${minutes}`
			},
			
			// 获取科室选项（预留接口）
			getDepartmentOptions() {
				let that = this
				uni.request({
					url: 'https://mtx.mini.opmonitor.com/?c=app_api&a=getDepartmentOptions',
					data: {hospital: that.hospital, sortHospital: that.sortHospital},
					header: {
						'Content-type': 'application/json'
					},
					success: function(res) {
						that.departmentList = res.data.data || []
					},
					fail: () => {
						console.info('获取科室选项失败')
					}
				})
			},
			
			// 获取类型选项（预留接口）
			getTypeOptions() {
				let that = this
				uni.request({
					url: 'https://mtx.mini.opmonitor.com/?c=app_api&a=getTypeOptions',
					data: {},
					header: {
						'Content-type': 'application/json'
					},
					success: function(res) {
						that.typeList = res.data.data || []
					},
					fail: () => {
						console.info('获取类型选项失败')
					}
				})
			},
			
			// 获取收集人员选项（预留接口）
			getCollectorOptions() {
				let that = this
				uni.request({
					url: 'https://mtx.mini.opmonitor.com/?c=app_api&a=getCollectorOptions',
					data: {hospital: that.hospital, sortHospital: that.sortHospital},
					header: {
						'Content-type': 'application/json'
					},
					success: function(res) {
						that.collectorList = res.data.data || []
					},
					fail: () => {
						console.info('获取收集人员选项失败')
					}
				})
			},
			
			// 获取交接人员选项（预留接口）
			getHandoverOptions() {
				let that = this
				uni.request({
					url: 'https://mtx.mini.opmonitor.com/?c=app_api&a=getHandoverOptions',
					data: {hospital: that.hospital, sortHospital: that.sortHospital},
					header: {
						'Content-type': 'application/json'
					},
					success: function(res) {
						that.handoverList = res.data.data || []
					},
					fail: () => {
						console.info('获取交接人员选项失败')
					}
				})
			},
			
			// 科室选择变化
			onDepartmentChange(e) {
				this.selectedDepartment = this.departmentList[e.detail.value]
			},
			
			// 类型选择变化
			onTypeChange(e) {
				this.selectedType = this.typeList[e.detail.value]
			},
			
			// 收集人员选择变化
			onCollectorChange(e) {
				this.selectedCollector = this.collectorList[e.detail.value]
			},
			
			// 交接人员选择变化
			onHandoverChange(e) {
				this.selectedHandover = this.handoverList[e.detail.value]
			},
			
			// 日期选择变化
			onDateChange(e) {
				this.collectionDate = e.detail.value
			},
			
			// 时间选择变化
			onTimeChange(e) {
				this.collectionTime = e.detail.value
			},
			
			// 取消填报
			cancelCollection() {
				uni.navigateBack()
			},
			
			// 确认填报
			confirmCollection() {
				// 验证必填项
				if (!this.selectedDepartment) {
					uni.showToast({
						title: '请选择科室',
						icon: 'none'
					})
					return
				}
				if (!this.selectedType) {
					uni.showToast({
						title: '请选择类型',
						icon: 'none'
					})
					return
				}
				if (!this.weight) {
					uni.showToast({
						title: '请输入重量',
						icon: 'none'
					})
					return
				}
				if (!this.selectedCollector) {
					uni.showToast({
						title: '请选择收集人员',
						icon: 'none'
					})
					return
				}
				if (!this.selectedHandover) {
					uni.showToast({
						title: '请选择交接人员',
						icon: 'none'
					})
					return
				}
				
				// 提交数据（预留接口）
				let that = this
				uni.request({
					url: 'https://mtx.mini.opmonitor.com/?c=app_api&a=submitCollectionData',
					data: {
						hospital: that.hospital,
						sortHospital: that.sortHospital,
						department: that.selectedDepartment,
						medicalCode: that.medicalCode,
						type: that.selectedType,
						weight: that.weight,
						collector: that.selectedCollector,
						handover: that.selectedHandover,
						collectionTime: `${that.collectionDate} ${that.collectionTime}`
					},
					header: {
						'Content-type': 'application/json'
					},
					success: function(res) {
						uni.showToast({
							title: '填报成功',
							icon: 'success'
						})
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/main/inventory'
							})
						}, 1500)
					},
					fail: () => {
						uni.showToast({
							title: '填报失败',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style>
	.page {
		width: 100vw;
		height: 100vh;
		background: #f5f5f5;
	}
	
	.form-container {
		padding: 20rpx;
	}
	
	.form-item {
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		padding: 24rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
	}
	
	.form-label {
		font-size: 28rpx;
		color: #333;
		font-weight: 600;
		min-width: 160rpx;
	}
	
	.form-value {
		flex: 1;
		font-size: 28rpx;
		color: #666;
		text-align: right;
	}
	
	.form-value-picker {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		color: #666;
		font-size: 28rpx;
	}
	
	.placeholder {
		color: #ccc;
	}
	
	.picker-icon {
		font-size: 40rpx;
		color: #999;
		margin-left: 10rpx;
	}
	
	.form-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		text-align: right;
	}
	
	.input-placeholder {
		color: #ccc;
	}
	
	/* 日期时间选择器 */
	.datetime-picker {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 20rpx;
	}
	
	.picker-box {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
		border: 1px solid #dee2e6;
		border-radius: 12rpx;
		padding: 16rpx 20rpx;
		transition: all 0.3s ease;
	}
	
	.picker-box:active {
		background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
		transform: scale(0.98);
	}
	
	.picker-icon {
		font-size: 32rpx;
		margin-right: 10rpx;
	}
	
	.picker-text {
		flex: 1;
		font-size: 28rpx;
		color: #495057;
		text-align: center;
	}
	
	.picker-arrow {
		font-size: 36rpx;
		color: #adb5bd;
		margin-left: 8rpx;
	}
	
	.picker-separator {
		font-size: 36rpx;
		color: #adb5bd;
		font-weight: 300;
	}
	
	.button-group {
		display: flex;
		gap: 20rpx;
		margin-top: 40rpx;
	}
	
	.cancel-btn, .confirm-btn {
		flex: 1;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		font-size: 30rpx;
		font-weight: 600;
		border: none;
	}
	
	.cancel-btn {
		background: #f0f0f0;
		color: #666;
	}
	
	.confirm-btn {
		background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
		color: #fff;
		box-shadow: 0 6rpx 20rpx rgba(74, 144, 226, 0.35);
	}
	
	.cancel-btn::after, .confirm-btn::after {
		border: none;
	}
</style>
