<template>
  <div style="display: flex; align-items: center">
    <span>预约时间段：</span>
<!--    <el-form-item label="" prop="time">-->
      <!-- 开始时间选择 -->
        <el-time-picker
            v-model="startTime"
            format="HH:mm"
            placeholder="开始时间"
            @change="onTimeChange"
            :minute-step="1"
            :hour-step="1"
            size="default"
            style="width: 100px; margin-right: 10px"
        />
        <!-- 结束时间选择 -->
        <el-time-picker
            v-model="endTime"
            format="HH:mm"
            placeholder="结束时间"
            @change="onTimeChange"
            :minute-step="1"
            :hour-step="1"
            size="default"
            style="width: 100px"
        />

<!--    </el-form-item>-->
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import emitter from "@/utils/emitter";
import dayjs from "dayjs";

const startTime = ref('')
const endTime = ref('')

// 处理时间选择变化

onMounted(() => {
  emitter.on('clearTimeSlot', () => {
    startTime.value = ''
    endTime.value = ''
  })
})

const onTimeChange = (e:any) => {
  if (startTime.value && endTime.value) {
    const time = dayjs(startTime.value).format('HH:mm') + "-" + dayjs(endTime.value).format('HH:mm')
    emitter.emit('getTimeSlot', time)
  }
}
</script>

<style scoped>

</style>
