<template>
  <div class="feedback-container">
    <h1 class="page-title">意见反馈与举报</h1>
    
    <!-- 反馈表单 -->
    <div class="feedback-form">
      <el-form 
        ref="feedbackFormRef"
        :model="form"
        :rules="rules"
        label-width="120px"
        @submit.prevent="submitForm"
      >
        <!-- 反馈类型 -->
        <el-form-item label="反馈类型" prop="type">
          <el-select 
            v-model="form.type"
            placeholder="请选择反馈类型"
            class="type-selector"
          >
            <el-option
              v-for="item in feedbackTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <!-- 关联帖子 -->
        <el-form-item 
          v-if="form.type === 'report'"
          label="关联帖子ID"
          prop="postId"
        >
          <el-input
            v-model="form.postId"
            placeholder="请输入需要举报的帖子ID"
          />
        </el-form-item>

        <!-- 反馈内容 -->
        <el-form-item label="详细内容" prop="content">
          <el-input
            v-model="form.content"
            type="textarea"
            :rows="6"
            placeholder="请详细描述您的问题或建议"
            maxlength="500"
            show-word-limit
          />
        </el-form-item>

        <!-- 联系方式 -->
        <el-form-item label="联系方式" prop="contact">
          <el-input
            v-model="form.contact"
            placeholder="请输入邮箱/手机号（选填）"
          />
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item class="submit-btn">
          <el-button
            type="primary"
            native-type="submit"
            :loading="submitting"
          >
            提交反馈
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 成功提示 -->
    <el-alert
      v-if="submitSuccess"
      title="提交成功"
      type="success"
      :closable="false"
      class="result-alert"
    >
      感谢您的反馈，我们将在3个工作日内处理
    </el-alert>

    <!-- 错误提示 -->
    <el-alert
      v-if="submitError"
      title="提交失败"
      type="error"
      description="请检查网络连接或稍后重试"
      class="result-alert"
      @close="submitError = false"
    />
  </div>
</template>

<script setup lang ="js" name="FeedBack">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 表单引用
const feedbackFormRef = ref(null)

// 响应式数据
const submitting = ref(false)
const submitSuccess = ref(false)
const submitError = ref(false)

const feedbackTypes = reactive([
  { value: 'suggestion', label: '意见反馈' },
  { value: 'complaint', label: '用户投诉' },
  { value: 'report', label: '内容举报' }
])

const form = reactive({
  type: 'suggestion',
  content: '',
  contact: '',
  postId: ''
})

const rules = reactive({
  type: [{ required: true, message: '请选择反馈类型', trigger: 'change' }],
  content: [
    { required: true, message: '请输入反馈内容', trigger: 'blur' },
    { min: 20, message: '内容长度至少20个字符', trigger: 'blur' }
  ],
  postId: [
    { required: true, message: '举报必须提供帖子ID', trigger: 'blur' }
  ],
  contact: [
    { pattern: /^1[3-9]\d{9}$|^\w+@\w+\.\w+$/, message: '格式不正确' }
  ]
})

// 提交表单
const submitForm = async () => {
  try {
    submitting.value = true
    
    // 验证表单
    await feedbackFormRef.value.validate()
    
    // 模拟API调用
    // await axios.post('/api/feedback', form)
    
    submitSuccess.value = true
    submitError.value = false
    feedbackFormRef.value.resetFields()
    
    setTimeout(() => {
      submitSuccess.value = false
    }, 3000)
  } catch (error) {
    if (error instanceof Error) {
      ElMessage.error(error.message)
    }
    submitError.value = true
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
/* 保持原有样式不变 */
.feedback-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 30px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.page-title {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 30px;
}

.feedback-form {
  background: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.type-selector {
  width: 100%;
}

.submit-btn {
  text-align: center;
  margin-top: 30px;
}

.result-alert {
  margin-top: 20px;
  border-radius: 6px;
}

.el-form-item__label {
  color: #666;
  font-size: 14px;
}

.el-textarea__inner,
.el-input__inner {
  border-radius: 4px;
  border: 1px solid #e4e4e4;
}
</style>