<template>
	<view class="feedback-container">
		<view class="form-container">
			<input v-model="formData.companyName" placeholder="公司名称" class="input-field" />
			<input v-model="formData.contactPerson" placeholder="联系人" class="input-field" />
			<input v-model="formData.contactPhone" placeholder="联系电话" class="input-field" />
			<textarea v-model="formData.opinion" placeholder="您的意见" class="textarea-field" style="width: 93%;" />
			<button @click="submitForm" class="submit-btn">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					companyName: '',
					contactPerson: '',
					contactPhone: '',
					opinion: ''
				},
				apiUrl: 'https://ylaiapi.raycos.com.cn'
			}
		},
		onLoad() {

		},
		methods: {
			validateForm() {
				if (!this.formData.companyName.trim()) {
					uni.showToast({
						title: '请输入公司名称',
						icon: 'none'
					})
					return false
				}
				if (!this.formData.contactPerson.trim()) {
					uni.showToast({
						title: '请输入联系人',
						icon: 'none'
					})
					return false
				}
				if (!/^1\d{10}$/.test(this.formData.contactPhone)) {
					uni.showToast({
						title: '请输入有效的联系电话',
						icon: 'none'
					})
					return false
				}
				if (!this.formData.opinion.trim()) {
					uni.showToast({
						title: '请输入您的意见',
						icon: 'none'
					})
					return false
				}
				return true
			},
			async submitForm() {
				if (this.validateForm()) {
					try {
						uni.showLoading({
							title: '提交中...'
						});

						const result = await this.sendRequest();

						if (result.success) {
							this.resetForm();
							uni.showToast({
								title: '提交成功！',
								icon: 'success'
							});
						} else {
							throw new Error(result.message || '提交失败，请重试');
						}
					} catch (error) {
						console.error('提交失败', error);
						uni.showToast({
							title: error.message || '提交失败，请重试',
							icon: 'none'
						});
					} finally {
						uni.hideLoading();
					}
				}
			},

			sendRequest() {
				return new Promise((resolve) => {
					uni.request({
						url: this.apiUrl + '/complaint/insertComplaint',
						method: 'POST',
						data: {
							name: this.formData.contactPerson,
							phone: this.formData.contactPhone,
							corporate_name: this.formData.companyName,
							content: this.formData.opinion,
							status: 5
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						success: (res) => {
							if (res.statusCode === 200 && res.data && res.data.status == 200) {
								resolve({
									success: true
								});
							} else {
								resolve({
									success: false,
									message: res.data?.message || '提交失败，请重试'
								});
							}
						},
						fail: (err) => {
							resolve({
								success: false,
								message: '网络请求失败'
							});
						}
					});
				});
			},
			resetForm() {
				this.formData = {
					companyName: '',
					contactPerson: '',
					contactPhone: '',
					opinion: ''
				};
			}
		}
	}
</script>

<style scoped>
	.feedback-container {
		background-color: #0066cc;
		min-height: 100vh;
		padding: 20px;
	}

	.header {
		color: white;
		font-size: 18px;
		margin-bottom: 20px;
	}

	.form-container {
		background-color: transparent;
	}

	.input-field,
	.textarea-field {

		margin-bottom: 15px;
		padding: 12px;
		background-color: white;
		border: none;
		border-radius: 5px;
		font-size: 14px;
	}

	.textarea-field {
		height: 120px;
	}

	.submit-btn {
		width: 100%;
		background-color: #00aaff;
		color: white;
		border: none;
		padding: 12px;
		border-radius: 5px;
		font-size: 16px;
		margin-top: 10px;
	}
</style>