<template>
  <el-container>
    <el-header>
      <Header />
    </el-header>
    <el-container>
      <el-main>
        <div class="complaint-container">
          <h2>快递投诉</h2>
          <el-form
            :model="complaintForm"
            :rules="rules"
            ref="complaintFormRef"
            label-width="100px"
            class="complaint-form"
          >
            <el-form-item label="订单号" prop="orderNumber">
              <el-input v-model="complaintForm.orderNumber" placeholder="请输入订单号" />
            </el-form-item>

            <el-form-item label="投诉原因" prop="reason">
              <el-select v-model="complaintForm.reason" placeholder="请选择投诉原因">
                <el-option label="快递未按时送达" value="未按时送达" />
                <el-option label="快递损坏或丢失" value="损坏或丢失" />
                <el-option label="服务态度差" value="服务态度差" />
                <el-option label="其他问题" value="其他" />
              </el-select>
            </el-form-item>

            <el-form-item label="详细描述" prop="description">
              <el-input
                type="textarea"
                v-model="complaintForm.description"
                placeholder="请详细描述您的问题"
                rows="4"
              />
            </el-form-item>

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

            <el-form-item>
              <el-button type="primary" @click="submitComplaint">提交投诉</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 complaintForm = ref({
  orderNumber: '',
  reason: '',
  description: '',
  contact: '',
});

const rules = {
  orderNumber: [
    { required: true, message: '订单号不能为空', trigger: 'blur' },
  ],
  reason: [
    { required: true, message: '请选择投诉原因', trigger: 'change' },
  ],
  description: [
    { required: true, message: '请详细描述问题', trigger: 'blur' },
    { min: 10, message: '描述至少需要10个字', trigger: 'blur' },
  ],
  contact: [
    { required: true, message: '联系方式不能为空', trigger: 'blur' },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入有效的手机号码',
      trigger: 'blur',
    },
  ],
};

const complaintFormRef = ref();

const submitComplaint = () => {
  complaintFormRef.value?.validate((valid) => {
    if (valid) {
      ElMessage.success('投诉已提交，我们将尽快处理您的问题！');
      resetForm();
    } else {
      ElMessage.error('请检查表单内容是否填写完整！');
    }
  });
};

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

<style scoped>
.complaint-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: 20px;
}

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