<!--
  -    Copyright (c) 2018-2025, cyweb All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  -
  -->

<template>
  <el-dialog v-model="dialogVisible" title="保存审核人员" width="600px" append-to-body @close="handleClose">
    <el-form :model="{ belongTeacherNos }" label-width="100px">
      <el-form-item label="选择教师：">
        <el-select
          v-model="belongTeacherNos"
          filterable
          remote
          clearable
          reserve-keyword
          placeholder="请选择或输入教师姓名"
          :remote-method="remoteTeacherByQuery"
          style="width: 100%"
        >
          <el-option
            v-for="item in teacherList"
            :key="item.teacherNo"
            :label="item.realName"
            :value="item.teacherNo"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="AddExamPeopleForm">
import { ref, watch } from 'vue'
import {getTeacherInfoCommon} from '/@/api/professional/professionaluser/teacherbase'

// Props
const props = defineProps<{
  visible: boolean
  timeRange: string[]
}>()

// Emits
const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'save', data: { teacherNo: string; startTime: string; endTime: string }): void
}>()

// 弹窗显示状态
const dialogVisible = ref(false)
const belongTeacherNos = ref('')
const teacherList = ref<any[]>([])

// 监听 visible 变化
watch(() => props.visible, (newVal) => {
  dialogVisible.value = newVal
  if (newVal) {
    belongTeacherNos.value = ''
    teacherList.value = []
  }
})

// 监听 dialogVisible 变化，同步到父组件
watch(dialogVisible, (newVal) => {
  emit('update:visible', newVal)
})

// 检索教师
const remoteTeacherByQuery = (query: string) => {
  teacherList.value = []
  if (query !== '') {
    setTimeout(() => {
      getTeacherInfoCommon({searchKeywords:query,tied:"0"}).then(response => {
        teacherList.value = response.data
      })
    }, 200)
  }
}

// 关闭窗口
const handleClose = () => {
  belongTeacherNos.value = ''
  dialogVisible.value = false
}

// 保存
const handleSave = () => {
  if (props.timeRange.length === 0) {
    emit('save', {
      teacherNo: belongTeacherNos.value,
      startTime: '',
      endTime: ''
    })
    return
  }
  emit('save', {
    teacherNo: belongTeacherNos.value,
    startTime: props.timeRange[0],
    endTime: props.timeRange[1]
  })
  handleClose()
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>

