<template>
  <view class="schedule-timeline">
    <view
      v-for="hour in hours"
      :key="hour"
      class="timeline-row"
    >
      <view class="time-label">{{ hour }}:00</view>
      <view class="schedule-cell">
        <ScheduleBlock
          v-for="item in getEventsByHour(hour)"
          :key="item.id"
          :event="item"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
import ScheduleBlock from './ScheduleBlock.vue';
const props = defineProps({
  hours: {
    type: Array,
    default: () => Array.from({length: 24}, (_,i) => i) // 8~19点
  },
  events: {
    type: Array,
    default: () => []
  }
});
// 按小时过滤日程
function getEventsByHour(hour) {
  return props.events.filter(e => e.startHour === hour);
}
</script>

<style scoped lang="scss">
.schedule-timeline {
  padding: 0 12rpx 60px;
}
.timeline-row {
  display: flex;
  border-bottom: 1px dashed #e3e3e3;
  align-items: center;
  height: 30px;
}
.time-label {
  width: 44px;
  color: #bbb;
  font-size: 13px;
}
.schedule-cell {
  flex: 1;
  position: relative;
  min-height: 28px;
}
</style>
