<!--
 * @Date: 2024-10-08 14:29:36
 * @LastEditors: lip
 * @LastEditTime: 2025-05-07 10:03:20
-->
<template>
	<view class="container">
		<scroll-view scroll-y="true" >
			<view class="inner">
				<view class="part-title" style="display: flex;justify-content: space-between;">需求信息
					<view v-if="!edit&&formData.id&&formData.currentStatus!=3" class="btn"
						style="font-weight: normal;display: flex;" @click="edit=true">编辑<view class="icon-right">✏️</view></view>
				</view>
				<view class="inner-part">
					<view class="self-form">
						<view class="form-item">
							<view class="form-label">姓名 <text class="required">*</text></view>
							<view v-if="name" style="width: 100%;" class="disabledLine">
								{{ formData.personName || '请选择' }}
							</view>
							<view v-else style="width: 100%;" @click="openPersonChooser"
								:class="{disabledLine: !edit||!canChoosePerson, noValue: !formData.personName}">
								{{ formData.personName || '请选择' }}
							</view>
							<view class="icon-right">✏️</view>
						</view>

						<view class="form-item">
							<view class="form-label">需求说明 <text class="required">*</text></view>
							<textarea :disabled="!edit" v-model="formData.jobDescription" placeholder="请输入" :class="['form-textarea', { 'form-textarea-disabled': !edit }]"></textarea>
						</view>
					</view>
				</view>
			</view>

			<!-- 办理完成后 需求说明 -->
			

		</scroll-view>
			
		<choose-person ref="personChooser" @confirm="personNameConfirm" />
		<view class="button-area" v-if="edit">
			<view class="btn" @click="cancelPage">取消</view>
			<view class="btn reset" @click="formData.id ? getDetail(formData.id) : setDefaultValues()">重置</view>
			<view class="btn save" @click="saveInfo">保存</view>
		</view>
	</view>
</template>

<script>
	import { getPersonBase } from "@/packageRc/api/personinfo/index";
import { addPersonDemand, updatePersonDemand, getPersonDemand } from "@/packageRc/api/needs/personDemand";
//import reqComp from './req-comp';

	export default {
		components: {
	//	reqComp
	},
								props: {
			needId: {
				type: String,
				default: ''
			},
			name: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				edit: true,
				canChoosePerson: false,
				formData: {
					id: '',
					personName: '',
					personId: '',
						demandType:"9",
					userId: '',
					demandTitle: '',
					jobDescription: '',
					actualSolveDate: '',
					actualSolvePeople: '',
					solveDesc: '',
					fileUrl: '',
					currentStatus: ''
				}
			}
		},
		onReady() {
			// 组件已准备就绪
		},
		created() {
			this.loading = true;
			// 直接使用传入的参数设置姓名信息
			if(this.name && this.needId) {
				this.formData.personName = this.name;
				this.formData.personId = this.needId;
				this.formData.userId = this.needId;
			}
			// 如果需要获取详情
			if (this.needId) {
				this.getDetail(this.needId);
			}
		},
		methods: {
			cancelPage() {
				if (!this.formData.id) {
					this.$u.navigateBack();
				} else {
					this.edit = false;
					this.getDetail(this.formData.id);
				}
			},
			// workTypeRemoteMethod(key) {
				// 	listJobType({
				// 		workTypeName: key,
				// 		pageNum: 1,
				// 		pageSize: 50
				// 	}).then(
				// 		(res) => {
							// this.jobTypeList = res.rows;
				// 		}
				// 	);
				// },
			openPersonChooser() {
				if (this.edit && this.canChoosePerson) {
					this.$refs.personChooser.open();
				}
			},
			personNameConfirm(event) {
				this.formData.personName = event.name
				this.formData.personId = event.id
				this.formData.userId = event.userId
				this.$forceUpdate();
			},
			
	
				
			getDetail(id) {
				this.$request({
					url: '/mini/demand/getPersonDemandById',
					method: 'GET',
					data: {
						id: id
					}
				}).then(res => {
					if (res.code == 200) {
						this.formData = res.data;
					}
				}).catch(err => {
					console.log(err);
				});
			},
			goBack() {
				uni.navigateBack();
			},
			
			setName() {
				// 确保personName存在
				if (!this.formData.personName) {
					this.formData.personName = '未知用户';
				}
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				month = month < 10 ? '0' + month : month;
				let day = date.getDate();
				day = day < 10 ? '0' + day : day;
				this.formData.demandTitle = `${this.formData.personName}_于${year}-${month}-${day}_提出其他需求`;
			},
			saveInfo() {
				console.log("执行")
				try {
					// 验证必填项
					if (!this.formData.personName) {
						uni.showToast({
							title: '请选择姓名',
							icon: 'none'
						});
						return;
					}
					if (!this.formData.jobDescription) {
						uni.showToast({
							title: '请输入需求说明',
							icon: 'none'
						});
						return;
					}
					uni.showLoading({
						title: '保存中...'
					});
					this.setName();
					let params = {
						...this.formData,
						type: '3'
					};
					const requestFn = this.formData.id ? updatePersonDemand : addPersonDemand;
					requestFn(params).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '保存成功',
								icon: 'success'
							});
							this.edit = false;
							if (!this.formData.id) {
								this.formData.id = res.data;
							}
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
					}).catch(err => {
						if (err.message) {
							uni.showToast({
								title: err.message,
								icon: 'none'
							});
						}
					});
				} catch (error) {
					console.error('保存失败:', error);
				} finally {
					uni.hideLoading();
				}
			}
		}
	}
</script>

<style lang="scss">	.container {
		height: 100vh;
		overflow: hidden;
		background-color: #f7f7f7;
	}

	.inner {
		background: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
	}

	.inner-part {
		width: 100%;
	}

	.self-form {
		width: 100%;
	}

	.form-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 24rpx;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 24rpx;
	}

	.form-label {
		width: 200rpx;
		font-size: 28rpx;
		color: #333;
		flex-shrink: 0;
		line-height: 48rpx;
	}

	.required {
		color: #f56c6c;
		margin-left: 4rpx;
	}

	.form-textarea {
		flex: 1;
		border: none;
		outline: none;
		font-size: 28rpx;
		color: #333;
		background: none;
		min-height: 120rpx;
		line-height: 40rpx;
	}

	.form-textarea-disabled {
		color: #909399;
		background-color: #f5f7fa;
	}

	.icon-right {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #A6A6A6;
		margin-left: 16rpx;
	}

	.button-area {
		padding: 24rpx 32rpx 68rpx;
		width: calc(100% + 64rpx);
		margin-left: -32rpx;
		background: #fff;
		display: flex;
		box-sizing: border-box;
		margin-top: 40rpx;
		border-radius: 16px 16px 0px 0px;

		.btn {
			line-height: 72rpx;
			width: 176rpx;
			margin-right: 16rpx;
			font-size: 28rpx;
			border: 1px solid #B8C5D4;
			color: #282828;
			text-align: center;
			border-radius: 8rpx;
		}

		.reset {
			background: #DCE2E9;
		}

		.save {
			background: linear-gradient(103deg, #1D64CF 0%, #1590D4 99%);
			color: #fff;
			border: 0;
			flex-grow: 1;
		}
	}

	.container {
		background-color: #f7f7f7;
	}

	.inner {
		background-color: #f7f7f7;
		padding: 24rpx 32rpx;
	}

	.self-form {
		width: 100%;
	}

	.form-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 24rpx;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 24rpx;
	}

	.form-label {
		width: 200rpx;
		font-size: 28rpx;
		color: #333;
		flex-shrink: 0;
		line-height: 48rpx;
	}

	.required {
		color: #f56c6c;
		margin-left: 4rpx;
	}

	.form-textarea {
		flex: 1;
		border: none;
		outline: none;
		font-size: 28rpx;
		color: #333;
		background: none;
		min-height: 120rpx;
		line-height: 40rpx;
	}

	.form-textarea-disabled {
		color: #909399;
		background-color: #f5f7fa;
	}

	.icon-right {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #A6A6A6;
		margin-left: 16rpx;
	}

	.noValue {
		color: rgb(192, 196, 204);
	}

	.disabledLine {
		background: rgb(245, 247, 250);
		cursor: not-allowed;
	}
</style>