<template>
  <el-dialog v-model="dialogVisible" title="考试时间范围设置" width="600px">
    <el-form :model="formData" label-width="100px">
      <el-form-item label="开始时间">
        <el-date-picker v-model="formData.startTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择开始时间" />
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker v-model="formData.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择结束时间" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleSave">保存</el-button>

        <!-- <el-button @click="dialogVisible = false">关闭</el-button> -->
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { getApi, postApi } from "@/api/tobAcco_api.js";

const dialogVisible = ref(false)
const formData = ref({
  startTime: '',
  endTime: ''
})

const emit = defineEmits(['close','ok'])

const handleSave = () => {
  if (!formData.value.startTime || !formData.value.endTime) {
    ElMessage.warning('请选择完整的时间范围')
    return
  }
  const params = {
    id: formData.value.id,
    startTime: formData.value.startTime,
    endTime: formData.value.endTime
  }
  postApi(params, '/mosty-jcgl/training/editExamTime')
    .then((res) => {
      emit('ok', formData.value)
      dialogVisible.value = false
    })
}

// 暴露方法供父组件调用
defineExpose({
  open: ({ id, startTime, endTime } = {}) => {
    formData.value = { id, startTime: startTime, endTime: endTime }
    dialogVisible.value = true
  }
})
</script>
