antissoft / lvqianmeiye_ERP

<template>
	<view class="form-container">
		<view class="form-card">
			<view class="form-content">
				<!-- 数量 -->
				<view class="form-group">
					<text class="form-label">{{ flowType === 0 ? '送出数量' : '送回数量' }}</text>
					<view class="input-wrapper">
						<u-input v-model="formData.quantity" placeholder="请输入数量" 
							type="number" class="select-input" />
					</view>
				</view>

				<!-- 送出时间 -->
				<view class="form-group" v-if="flowType === 0">
					<text class="form-label">送出时间</text>
					<view class="input-wrapper">
						<view class="custom-select" @tap="openDateTimePicker">
							<text class="select-text">{{ formData.sendTimeStr || '请选择送出时间' }}</text>
							<text class="select-arrow">▼</text>
						</view>
					</view>
				</view>

				<!-- 送回时间 -->
				<view class="form-group" v-if="flowType === 1">
					<text class="form-label">送回时间</text>
					<view class="input-wrapper">
						<view class="custom-select" @tap="openDateTimePicker">
							<text class="select-text">{{ formData.returnTimeStr || '请选择送回时间' }}</text>
							<text class="select-arrow">▼</text>
						</view>
					</view>
				</view>

				<!-- 备注 -->
				<view class="form-group">
					<text class="form-label">备注</text>
					<view class="input-wrapper">
						<u-input v-model="formData.remark" placeholder="请输入备注" 
							type="textarea" :maxlength="500" class="select-input" />
					</view>
				</view>

				<!-- 提交按钮 -->
				<view class="btn-group">
					<button type="submit" class="btn btn-primary" 
						:style="{opacity: isSubmitting ? 0.5 : 1}" 
						@tap="isSubmitting ? null : handleFormSubmit()">
						{{ isSubmitting ? '提交中...' : '提交' }}
					</button>
				</view>
			</view>
		</view>

		<!-- 日期时间选择器 -->
		<u-datetime-picker 
			v-if="showDateTimePicker" 
			:show="showDateTimePicker" 
			:value="currentDateTimeValue" 
			mode="datetime" 
			@confirm="onDateTimeConfirm" 
			@close="closeDateTimePicker" 
			@cancel="closeDateTimePicker" 
			:show-toolbar="true"
			:close-on-click-overlay="true" 
			confirm-color="#43e97b" 
			:title="flowType === 0 ? '选择送出时间' : '选择送回时间'" 
			class="datetime-picker" />
	</view>
</template>

<script>
	import laundryFlowApi from '@/apis/modules/laundry-flow.js'

	export default {
		data() {
			return {
				isSubmitting: false,
				flowId: '',
				flowType: 0, // 0: 送出, 1: 送回
				formData: {
					id: '',
					quantity: 1,
					sendTime: '',
					sendTimeStr: '',
					returnTime: '',
					returnTimeStr: '',
					remark: ''
				},
				// 日期时间选择器相关
				showDateTimePicker: false,
				currentDateTimeValue: 0
			}
		},

		onLoad(options) {
			if (options.id) {
				this.flowId = options.id
				this.loadDetail()
			} else {
				uni.showToast({
					title: '缺少记录ID',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		},

		methods: {
			// 加载详情数据
			async loadDetail() {
				try {
					uni.showLoading({
						title: '加载中...'
					})

					const res = await laundryFlowApi.getLaundryFlowDetail(this.flowId)

					if (res.code === 200 && res.data) {
						const data = res.data
						this.flowType = data.flowType || 0
						this.formData.id = data.id
						this.formData.quantity = data.quantity || 1
						this.formData.remark = data.remark || ''

						// 根据类型设置时间
						if (this.flowType === 0 && data.sendTime) {
							const sendDate = new Date(data.sendTime)
							this.formData.sendTime = sendDate.getTime()
							this.formData.sendTimeStr = this.utils.formatTime(sendDate)
						} else if (this.flowType === 1 && data.returnTime) {
							const returnDate = new Date(data.returnTime)
							this.formData.returnTime = returnDate.getTime()
							this.formData.returnTimeStr = this.utils.formatTime(returnDate)
						}
					} else {
						throw new Error(res.msg || res.message || '加载详情失败')
					}
				} catch (error) {
					console.error('加载详情失败:', error)
					uni.showToast({
						title: error.message || error.msg || '加载详情失败',
						icon: 'none',
						duration: 3000
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} finally {
					uni.hideLoading()
				}
			},


			// 格式化日期时间（用于提交，包含秒）
			formatDateTimeForSubmit(date) {
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				const hours = String(date.getHours()).padStart(2, '0')
				const minutes = String(date.getMinutes()).padStart(2, '0')
				const seconds = String(date.getSeconds()).padStart(2, '0')
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
			},

			// 打开日期时间选择器
			openDateTimePicker() {
				if (this.flowType === 0) {
					this.currentDateTimeValue = this.formData.sendTime || new Date().getTime()
				} else {
					this.currentDateTimeValue = this.formData.returnTime || new Date().getTime()
				}
				this.showDateTimePicker = true
			},

			// 日期时间确认
			onDateTimeConfirm(e) {
				const timestamp = e.value
				const date = new Date(timestamp)
				
				if (this.flowType === 0) {
					this.formData.sendTime = timestamp
					this.formData.sendTimeStr = this.utils.formatTime(date)
				} else {
					this.formData.returnTime = timestamp
					this.formData.returnTimeStr = this.utils.formatTime(date)
				}
				this.closeDateTimePicker()
			},

			// 关闭日期时间选择器
			closeDateTimePicker() {
				this.showDateTimePicker = false
				this.currentDateTimeValue = 0
			},

			// 表单提交
			async handleFormSubmit() {
				// 验证必填字段
				if (!this.formData.quantity || this.formData.quantity <= 0) {
					uni.showToast({
						title: '请输入有效的数量',
						icon: 'none'
					})
					return
				}

				this.isSubmitting = true

				try {
					uni.showLoading({
						title: '提交中...'
					})

					// 构建提交数据
					const submitData = {
						id: this.formData.id,
						quantity: parseInt(this.formData.quantity),
						remark: this.formData.remark || ''
					}

					// 根据类型添加时间字段（转换为ISO格式）
					if (this.flowType === 0 && this.formData.sendTime) {
						submitData.sendTime = this.utils.formatTime(new Date(this.formData.sendTime))
					} else if (this.flowType === 1 && this.formData.returnTime) {
						submitData.returnTime = this.utils.formatTime(new Date(this.formData.returnTime))
					}
					console.error(submitData.sendTime,submitData.returnTime)
					const res = await laundryFlowApi.updateLaundryFlow(submitData)

					if (res.code === 200) {
						uni.showToast({
							title: res.msg || '更新成功',
							icon: 'success'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					} else {
						throw new Error(res.msg || res.message || '更新失败')
					}
				} catch (error) {
					console.error('提交失败:', error)
					uni.showToast({
						title: error.message || error.msg || '更新失败，请重试',
						icon: 'none',
						duration: 3000
					})
				} finally {
					this.isSubmitting = false
					uni.hideLoading()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
		padding: 40rpx;
		box-sizing: border-box;
	}

	.form-card {
		background: #fff;
		border-radius: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(76, 175, 80, 0.1);
		overflow: hidden;
	}

	.form-content {
		padding: 40rpx;
	}

	.form-group {
		margin-bottom: 40rpx;
	}

	.form-label {
		display: block;
		font-size: 28rpx;
		color: #2e7d32;
		margin-bottom: 16rpx;
		font-weight: 500;
	}

	.input-wrapper {
		width: 100%;
	}

	.custom-select {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #f9fff9;
		border: 3rpx solid #c8e6c9;
		border-radius: 24rpx;
		padding: 24rpx 32rpx;
		min-height: 88rpx;
		box-sizing: border-box;
	}

	.select-text {
		flex: 1;
		font-size: 28rpx;
		color: #2e7d32;
	}

	.select-arrow {
		font-size: 24rpx;
		color: #6a9c6a;
		margin-left: 16rpx;
	}

	.select-input {
		background: #f9fff9;
		border: 3rpx solid #c8e6c9;
		border-radius: 24rpx;
		padding: 24rpx 32rpx;
		font-size: 28rpx;
		color: #2e7d32;
		min-height: 88rpx;
		box-sizing: border-box;
	}

	.btn-group {
		margin-top: 60rpx;
	}

	.btn {
		width: 100%;
		height: 96rpx;
		border-radius: 32rpx;
		font-size: 32rpx;
		font-weight: 600;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		letter-spacing: 2rpx;
	}

	.btn-primary {
		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
		color: #fff;
		box-shadow: 0 8rpx 24rpx rgba(67, 233, 123, 0.3);
	}

	.btn-primary:active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 12rpx rgba(67, 233, 123, 0.4);
	}
</style>