<script lang="ts" setup>

import { reactive, ref } from 'vue';

// 表单数据
const form = reactive({
  trackingNumber: '',
  company: '',
  recipientName: '',
  phoneNumber: '',
  adminName: '',
});

// 表单校验规则
const rules = {
  trackingNumber: [{ required: true, message: '请输入快递单号', trigger: 'blur' }],
  company: [{ required: true, message: '请选择快递公司', trigger: 'change' }],
  recipientName: [{ required: true, message: '请输入收件人姓名', trigger: 'blur' }],
  phoneNumber: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  adminName: [{ required: true, message: '请输入管理员姓名', trigger: 'blur' }],
};

// 表单引用
const formRef = ref(null);

// 提交表单函数
const submitForm = () => {
    if (formRef) {
      console.log('表单提交成功', form);
      alert('快递信息提交成功！');
    } else {
      alert('请填写完整信息！');
    }
  // });
};
</script>
<template>
  <el-container>
    <!-- 顶部导航 -->
    <el-header>
      <backIndex />
    </el-header>

    <!-- 主内容区域 -->
    <el-container>
      <el-main>
        <div style="
            padding: 20px;
            max-width: 600px;
            margin: 30px auto;
            background: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          ">
          <h2>录入快件</h2>
          <!-- 表单部分 -->
          <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
            <el-form-item label="单号" prop="trackingNumber">
              <el-input v-model="form.trackingNumber" placeholder="请输入快递单号" />
            </el-form-item>
            <el-form-item label="快递公司" prop="company">
              <el-select v-model="form.company" placeholder="请选择快递公司">
                <el-option label="顺丰速运" value="顺丰速运" />
                <el-option label="中通快递" value="中通快递" />
                <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="recipientName">
              <el-input v-model="form.recipientName" placeholder="请输入收件人姓名" />
            </el-form-item>
            <el-form-item label="手机号" prop="phoneNumber">
              <el-input v-model="form.phoneNumber" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="管理员姓名" prop="adminName">
              <el-input v-model="form.adminName" placeholder="请输入管理员姓名" />
            </el-form-item>
          </el-form>
          <!-- 提交按钮 -->
          <div style="text-align: center; margin-top: 20px;">
            <el-button type="primary" :disabled="!form.trackingNumber ||
              !form.company ||
              !form.recipientName ||
              !form.phoneNumber ||
              !form.adminName
              " @click="submitForm">
              立即提交
            </el-button>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>



<style scoped>
h2 {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
  color: #333;
}

.el-form-item {
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

div[style*='max-width: 600px;'] {
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  div[style*='max-width: 600px;'] {
    max-width: 90%;
    padding: 15px;
  }

  h2 {
    font-size: 20px;
  }
}
</style>
