<template>
  <el-dialog v-model="visible" :title="isEdit ? '编辑课程' : '添加课程'" width="500px">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
      <el-form-item label="上课日期" prop="class_date">
        <el-date-picker v-model="form.class_date" type="date" value-format="YYYY-MM-DD" />
      </el-form-item>

      <el-form-item label="时间段" prop="time">
        <el-select v-model="form.time" placeholder="选择时间段">
          <el-option label="上午" :value="1" />
          <el-option label="下午" :value="2" />
          <el-option label="晚上" :value="3" />
        </el-select>
      </el-form-item>

      <el-form-item label="课程名称" prop="classdetail">
        <el-input v-model="form.classdetail" />
      </el-form-item>

      <el-form-item label="教师" prop="teacher">
      <el-select v-model="form.teacher" placeholder="请选择教师">
        <el-option
          v-for="teacher in teacherList"
          :key="teacher.id"
          :label="teacher.name"
          :value="teacher.id"
        />
      </el-select>
    </el-form-item>


      <el-form-item label="学期" prop="semester">
        <el-input-number v-model="form.semester" :min="1" />
      </el-form-item>

      <el-form-item label="年级" prop="grade">
        <el-input-number v-model="form.grade" :min="1" />
      </el-form-item>

      <el-form-item label="班级编码" prop="class_number">
        <el-input-number v-model="form.class_number" :min="1" :max="10" />
      </el-form-item>

      <el-form-item label="教室" prop="classroom">
        <el-input v-model="form.classroom" />
      </el-form-item>

      <el-form-item label="总课时" prop="total_lessons">
        <el-input-number v-model="form.total_lessons" :min="1" />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineExpose,onMounted } from 'vue';
import {AddObj,getTeacherList,UpdateObj} from '../api';
import { ElMessage } from 'element-plus';

const teacherList = ref<any[]>([]);
const emit = defineEmits(['saved']);
async function fetchTeachers() {
  const result = await getTeacherList();
  teacherList.value = result.data;
}

onMounted(() => {
  fetchTeachers(); 
});


const formRef = ref();
const rules = {
  class_date: [
    { required: true, message: '请选择上课日期', trigger: 'change' },
  ],
  teacher: [
    { required: true, message: '请选择老师', trigger: 'change' },
  ],
  classdetail: [
    { required: true, message: '请填写课程名称', trigger: 'change' },
  ],
  classroom: [
    { required: true, message: '请填写教室', trigger: 'change' },
  ],
};


const visible = ref(false);
const isEdit = ref(false);
const form = ref({
  class_date: '',
  time: 1,
  classdetail: '',
  teacher: null,
  semester: 1,
  grade: 1,
  class_number: 1,
  classroom: '',
  total_lessons: 48
});

function open(data?: any) {
  if (data) {
    form.value = { ...data };
    isEdit.value = true;
  } else {
    form.value = {
      class_date: '',
      time: 1,
      classdetail: '',
      teacher: null,
      semester: 1,
      grade: 1,
      class_number: 1,
      classroom: '',
      total_lessons: 48
    };
    isEdit.value = false;
  }
  visible.value = true;
}

function close() {
  visible.value = false;
}

async function save() {
  try {
    formRef.value?.validate(async (valid: boolean) => {
      if (valid) {
      const isEdit = !!form.value.id;
      // eslint-disable-next-line no-console
      console.log('保存课程:', form.value);
      if (isEdit) {
          await UpdateObj(form.value);
      }else{
          await AddObj(form.value); 
      }
      visible.value = false;
      ElMessage.success(isEdit ? '编辑成功' : '创建成功');
      emit('saved');
      }else {
        ElMessage.success('表单校验未通过！');
      }
    });
  } catch (error) {
      // eslint-disable-next-line no-console
      console.error('保存失败', error);
      ElMessage.error('保存失败！');
  }
}



defineExpose({ open });



</script>
