<template>
	<view class="page-container">
		<!-- 表单内容 -->
		<view class="form-container">
			<!-- 计划名称 -->
			<view class="form-group">
				<text class="form-label">计划名称</text>
				<view class="form-value">
					<text class="value-text">{{taskname}}</text>
				</view>
			</view>
			
			<!-- 手机号输入 -->
			<view class="form-group">
				<text class="form-label required">手机号/微信号</text>
				<view class="input-wrapper">
					<textarea 
						class="form-input"
						v-model="form.phone"
						:placeholder="phonePlaceholder"
						:maxlength="500"
						:auto-height="true"
					></textarea>
				</view>
			</view>
			
			<!-- 提交按钮 -->
			<view class="submit-wrapper">
				<button 
					class="submit-button" 
					:class="{loading: isSubmitting, success: submitSuccess}" 
					@click="submit" 
					:disabled="isSubmitting"
				>
					<text class="button-text">
						{{submitSuccess ? '提交成功' : (isSubmitting ? '提交中...' : '提交')}}
					</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request';
	export default {
		data() {
			return {
				form: {
					phone: ""
				},
				// 多行 placeholder 需要放在 data 中，避免模板字符串里直接换行导致小程序编译错误
				phonePlaceholder: '请输入手机号或微信号，如有备注请用逗号隔开，多个用换行隔开，格式如下:18888888888,张三',
				token: "test",
				taskid: '',
				taskname: '',
				cid: '',
				isSubmitting: false,
				submitSuccess: false
			}
		},
		onLoad(options) {
			let taskId = options.id;
			let cid = options.channelId;
			//h5
			if (taskId != undefined) {
				this.taskid = taskId;
				this.cid = cid;
			} else {
				let paramsArr = decodeURIComponent(options.scene).split('&');
				this.taskid = paramsArr[0].split('=')[1];
				this.cid = paramsArr[1].split('=')[1];
			}
			//修改标题
			uni.setNavigationBarTitle({
				title: "表单录入"
			});

			this.getPosterData();
		},
		methods: {
			getPosterData() {
				let that = this;
				uni.request({
					method: 'POST',
					url: that.$config.apiUrl2 + '/v1/frontend/business/poster/getone',
					data: {
						id: that.taskid,
					},
					success: (res) => {
						console.log(res)
						if (res.data.code == 200) {
							that.taskname = res.data.data.name
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							});
						}
					}
				});
			},
			submit() {
				let that = this;
				
				// 防止重复提交
				if (that.isSubmitting) {
					return;
				}
				
				if (!that.form.phone.length) {
					return uni.showToast({
						title: '请输入手机号或微信号',
						icon: 'none',
						duration: 3000
					});
				}

				// 开始提交
				that.isSubmitting = true;
				
				let data = {
					id: that.taskid,
					cid: that.cid,
					phone: that.form.phone,
				}
				uni.request({
					method: 'POST',
					url: that.$config.apiUrl2 + '/v1/frontend/business/form/importsave',
					data: data,
					success: (res) => {
						console.log(res)
						if (res.data.code == 200) {
							// 处理响应数据
							that.submitSuccess = true;
							that.form.phone = ""
							uni.showToast({
								title: res.data.message,
								icon: 'success',
								duration: 2000
							});
							// 3秒后重置成功状态
							setTimeout(() => {
								that.submitSuccess = false;
							}, 3000);
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							});
						}
					},
					fail: (error) => {
						console.error('提交失败:', error);
						uni.showToast({
							title: '网络错误，请重试',
							icon: 'none',
							duration: 2000
						});
					},
					complete: () => {
						// 无论成功失败都重置提交状态
						that.isSubmitting = false;
					}
				});
			},
		}
	}
</script>

<style scoped>
/* 页面容器 */
.page-container {
	min-height: 100vh;
	background: #fff;
	padding: 0;
}


/* 表单容器 */
.form-container {
	padding: 40px 24px;
	width: 100%;
	height: 100vh;
	background: #fff;
	box-sizing: border-box;
}

/* 表单项 */
.form-group {
	margin-bottom: 28px;
}

.form-label {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: #2c3e50;
	margin-bottom: 12px;
	letter-spacing: 0.3px;
}

.form-label.required {
	color: #e74c3c;
	position: relative;
}

.form-label.required::after {
	content: '';
	position: absolute;
	right: -8px;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 4px;
	background: #e74c3c;
	border-radius: 50%;
}

/* 计划名称显示 */
.form-value {
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	border: 2px solid #e9ecef;
	border-radius: 12px;
	padding: 16px 20px;
	min-height: 52px;
	display: flex;
	align-items: center;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.form-value::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.value-text {
	font-size: 16px;
	color: #2c3e50;
	font-weight: 600;
	letter-spacing: 0.2px;
}

/* 输入框包装器 */
.input-wrapper {
	position: relative;
}

.form-input {
	width: 100%;
	min-height: 120px;
	padding: 20px;
	font-size: 16px;
	color: #2c3e50;
	background: #fff;
	border: 2px solid #e9ecef;
	border-radius: 12px;
	outline: none;
	resize: none;
	line-height: 1.6;
	transition: all 0.3s ease;
	font-family: inherit;
	box-sizing: border-box;
	position: relative;
}

.form-input:focus {
	border-color: #667eea;
	box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
	transform: translateY(-2px);
	background: #fafbfc;
}

.form-input::placeholder {
	color: #95a5a6;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.2px;
}

/* 提交按钮区域 */
.submit-wrapper {
	margin-top: 40px;
}

.submit-button {
	width: 100%;
	height: 56px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border: none;
	border-radius: 16px;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	letter-spacing: 0.5px;
	box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}

.submit-button::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.5s;
}

.submit-button:hover:not(:disabled) {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4);
}

.submit-button:active:not(:disabled) {
	transform: translateY(-1px);
}

.submit-button:active::before {
	left: 100%;
}

.submit-button.loading {
	background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
	pointer-events: none;
	box-shadow: 0 8px 24px rgba(149, 165, 166, 0.3);
}

.submit-button.success {
	background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
	box-shadow: 0 8px 24px rgba(39, 174, 96, 0.3);
}

.submit-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.button-text {
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.5px;
}

/* 响应式设计 */
@media (max-width: 375px) {
	.form-container {
		padding: 32px 20px;
	}
	
	.form-group {
		margin-bottom: 24px;
	}
	
	.submit-wrapper {
		margin-top: 32px;
	}
	
	.submit-button {
		height: 50px;
		font-size: 16px;
	}
}

/* 优雅的动画效果 */
.form-container {
	animation: slideInUp 0.6s ease-out;
}

.form-group {
	animation: fadeInUp 0.5s ease-out;
}

.form-group:nth-child(1) {
	animation-delay: 0.2s;
}

.form-group:nth-child(2) {
	animation-delay: 0.4s;
}

.submit-wrapper {
	animation: fadeInUp 0.5s ease-out 0.6s both;
}

@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
</style>