<template>
  <div class="teacher-create">
    <div class="page-header">
      <h1>添加教师</h1>
      <el-button @click="$router.push('/admin/teachers')">返回列表</el-button>
    </div>
    
    <el-card class="form-container">
      <el-form 
        ref="formRef" 
        :model="teacherForm" 
        :rules="rules" 
        label-width="100px"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="teacherForm.name" placeholder="请输入教师姓名" />
        </el-form-item>
        
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="teacherForm.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="teacherForm.phone" placeholder="请输入联系电话" />
        </el-form-item>
        
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="teacherForm.email" placeholder="请输入邮箱" />
        </el-form-item>
        
        <el-form-item label="所属部门" prop="department">
          <el-select v-model="teacherForm.department" placeholder="请选择部门">
            <el-option v-for="dept in departments" :key="dept.value" :label="dept.label" :value="dept.value" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="职称" prop="title">
          <el-select v-model="teacherForm.title" placeholder="请选择职称">
            <el-option label="教授" value="professor" />
            <el-option label="副教授" value="associate_professor" />
            <el-option label="讲师" value="lecturer" />
            <el-option label="助教" value="assistant" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="入职时间" prop="joinDate">
          <el-date-picker 
            v-model="teacherForm.joinDate" 
            type="date" 
            placeholder="选择入职日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="teacherForm.status">
            <el-radio label="active">在职</el-radio>
            <el-radio label="inactive">离职</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="简介" prop="bio">
          <el-input 
            v-model="teacherForm.bio" 
            type="textarea" 
            :rows="4" 
            placeholder="请输入教师简介"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm" :loading="submitting">保存</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { createTeacher } from '../../../api/teacher'

const router = useRouter()
const formRef = ref(null)
const submitting = ref(false)

const departments = [
  { value: 'computer', label: '计算机科学系' },
  { value: 'math', label: '数学系' },
  { value: 'physics', label: '物理系' },
  { value: 'chemistry', label: '化学系' },
  { value: 'biology', label: '生物系' }
]

const teacherForm = ref({
  name: '',
  gender: 'male',
  phone: '',
  email: '',
  department: '',
  title: '',
  joinDate: '',
  status: 'active',
  bio: ''
})

const rules = {
  name: [
    { required: true, message: '请输入教师姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  department: [
    { required: true, message: '请选择所属部门', trigger: 'change' }
  ],
  title: [
    { required: true, message: '请选择职称', trigger: 'change' }
  ],
  joinDate: [
    { required: true, message: '请选择入职日期', trigger: 'change' }
  ],
  status: [
    { required: true, message: '请选择状态', trigger: 'change' }
  ]
}

const submitForm = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      submitting.value = true
      try {
        await createTeacher(teacherForm.value)
        ElMessage.success('教师添加成功')
        router.push('/admin/teachers')
      } catch (error) {
        console.error('添加教师失败:', error)
      } finally {
        submitting.value = false
      }
    }
  })
}

const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
}
</script>

<style lang="scss" scoped>
.teacher-create {
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h1 {
      margin: 0;
      font-size: 24px;
    }
  }
  
  .form-container {
    max-width: 800px;
  }
}
</style> 