<template>
  <view class="event-block" :style="{background: event.color||'#e3fae6'}" @click="handleClick">
    <view class="event-time">{{ event.startHour }}:{{ event.startMin || '00' }}</view>
    <view class="event-title">{{ event.title }}</view>
  </view>
</template>
<script setup>
const props = defineProps({
  event: {
    type: Object,
    required: true
  }
});

// 点击事件，跳转到详情页
const handleClick = () => {
  // 将事件数据存储到本地存储中
  uni.setStorageSync('eventDetailData', props.event);
  
  // 跳转到详情页
  uni.navigateTo({
    url: '/pages/event/detail/index'
  });
};
</script>
<style scoped lang="scss">
.event-block {
  padding: 8rpx 18rpx 8rpx 10rpx;
  border-radius: 8rpx;
  margin: 4rpx 0;
  font-size: 13px;
  min-width: 120rpx;
  color: #3a3a3a;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.2s;
}

.event-block:active {
  opacity: 0.7;
}
.event-time {
  color: #fa5e5e;
  font-size: 11px;
  margin-right: 7rpx;
}
.event-title {
  font-weight: 500;
}
</style>
