<template>
  <el-dialog v-model="visible" title="提交预约申请" width="500px">
    <el-form ref="formRef" :model="form" label-width="80px">
      <el-form-item label="预约房间">
        <strong>{{ currentRoom?.name }}</strong>
      </el-form-item>
      <el-form-item label="预约日期">
        {{ currentDate ? new Date(currentDate).toLocaleDateString() : '' }}
      </el-form-item>
      <el-form-item label="时间段">
        <el-select v-model="form.slots" multiple placeholder="请选择连续的时间段">
          <el-option 
            v-for="slot in availableSlots" 
            :key="slot.time" 
            :label="slot.time" 
            :value="slot.time" 
          />
        </el-select>
      </el-form-item>
      <el-form-item label="申请人">
        <el-input v-model="form.userName" placeholder="姓名" />
      </el-form-item>
      <el-form-item label="用途说明">
        <el-input v-model="form.reason" type="textarea" rows="3" placeholder="请详细说明活动内容及人数..." />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">提交申请</el-button>
    </template>
  </el-dialog>
</template>

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

const emit = defineEmits(['success'])

const visible = ref(false)
const currentRoom = ref(null)
const currentDate = ref(null)
const availableSlots = ref([])

const form = reactive({
  slots: [],
  userName: '',
  reason: ''
})

const open = (room, date, slots) => {
  currentRoom.value = room
  currentDate.value = date
  availableSlots.value = slots
  form.slots = []
  form.userName = ''
  form.reason = ''
  visible.value = true
}

const handleSubmit = () => {
  if (form.slots.length === 0) {
    ElMessage.warning('请选择时间段')
    return
  }
  visible.value = false
  ElMessage.success('申请提交成功，请等待管理员审核')
  emit('success', form)
}

defineExpose({
  open
})
</script>
