<template>
  <el-dialog v-model="dialogVisible" :title="title" width="600px" @close="close">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" label-position="top">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="学号" prop="id">
            <el-input v-model="form.id" :disabled="isEdit" placeholder="请输入学号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="form.gender">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学院" prop="college">
            <el-select v-model="form.college" placeholder="请选择学院" style="width: 100%">
              <el-option label="ZJE" value="ZJE" />
              <el-option label="ZJUI" value="ZJUI" />
              <el-option label="ZIBS" value="ZIBS" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="专业" prop="major">
            <el-input v-model="form.major" placeholder="请输入专业" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="辅导员" prop="counselor">
            <el-input v-model="form.counselor" placeholder="辅导员姓名" />
          </el-form-item>
        </el-col>
         <el-col :span="12">
          <el-form-item label="辅导员电话" prop="counselorPhone">
            <el-input v-model="form.counselorPhone" placeholder="辅导员电话" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="家庭住址" prop="address">
        <el-input v-model="form.address" type="textarea" rows="2" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="save" :loading="submitLoading">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['fetch-data'])

const formRef = ref()
const dialogVisible = ref(false)
const submitLoading = ref(false)
const isEdit = ref(false)

const form = reactive({
  id: '',
  name: '',
  gender: '男',
  phone: '',
  college: '',
  major: '',
  counselor: '',
  counselorPhone: '',
  address: ''
})

const rules = {
  id: [{ required: true, message: '请输入学号', trigger: 'blur' }],
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  college: [{ required: true, message: '请选择学院', trigger: 'change' }],
}

const title = computed(() => isEdit.value ? '编辑学生信息' : '新增学生')

const showEdit = (row) => {
  if (!row) {
    isEdit.value = false
    Object.assign(form, {
      id: '', name: '', gender: '男', phone: '', college: '', major: '', counselor: '', counselorPhone: '', address: ''
    })
  } else {
    isEdit.value = true
    Object.assign(form, row)
  }
  dialogVisible.value = true
}

const close = () => {
  formRef.value?.resetFields()
  dialogVisible.value = false
}

const save = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      submitLoading.value = true
      setTimeout(() => {
        submitLoading.value = false
        dialogVisible.value = false
        ElMessage.success(isEdit.value ? '修改成功' : '新增成功')
        emit('fetch-data')
      }, 800)
    }
  })
}

defineExpose({
  showEdit,
})
</script>
