<template>
  <el-container>
    <el-header>
      <Header />
    </el-header>
    <el-container>
      <el-main>
        <div class="feedback-container">
          <h2>我有建议</h2>
          <p class="feedback-description">
            如果您对我们的服务或功能有任何建议，请告诉我们，我们会认真听取并改进！
          </p>
          <el-form
            :model="feedbackForm"
            :rules="rules"
            ref="feedbackFormRef"
            label-width="100px"
            class="feedback-form"
          >
            <el-form-item label="标题" prop="title">
              <el-input
                v-model="feedbackForm.title"
                placeholder="请输入您的建议标题"
              />
            </el-form-item>

            <el-form-item label="建议内容" prop="content">
              <el-input
                type="textarea"
                v-model="feedbackForm.content"
                placeholder="请输入详细建议内容"
                rows="5"
              />
            </el-form-item>

            <el-form-item label="联系方式" prop="contact">
              <el-input
                v-model="feedbackForm.contact"
                placeholder="请输入您的联系方式（可选）"
              />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitFeedback">
                提交建议
              </el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
    </el-container>
    <el-footer>
      <Footer />
    </el-footer>
  </el-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const feedbackForm = ref({
  title: '',
  content: '',
  contact: '',
});

const rules = {
  title: [
    { required: true, message: '标题不能为空', trigger: 'blur' },
    { min: 3, message: '标题至少需要3个字符', trigger: 'blur' },
  ],
  content: [
    { required: true, message: '建议内容不能为空', trigger: 'blur' },
    { min: 10, message: '内容至少需要10个字符', trigger: 'blur' },
  ],
};

const feedbackFormRef = ref();

const submitFeedback = () => {
  feedbackFormRef.value?.validate((valid) => {
    if (valid) {
      ElMessage.success('感谢您的建议！我们会认真参考并改进。');
      resetForm();
    } else {
      ElMessage.error('请填写完整的建议内容！');
    }
  });
};

const resetForm = () => {
  feedbackFormRef.value?.resetFields();
};
</script>

<style scoped>
.feedback-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #fff;
}

h2 {
  text-align: center;
  margin-bottom: 10px;
}

.feedback-description {
  text-align: center;
  margin-bottom: 20px;
  color: #666;
}

.feedback-form {
  width: 100%;
}
</style>
