<template>
  <view class="event-schedule-page">
    <!-- 日期选择器 -->
    <view class="date-tabs">
      <view
        class="date-tab"
        v-for="(date, index) in dates"
        :key="index"
        :class="{ active: currentDate === index }"
        @click="currentDate = index"
      >
        <view class="date-day">{{ date.day }}</view>
        <view class="date-text">{{ date.text }}</view>
      </view>
    </view>

    <!-- 日程时间线 -->
    <view class="schedule-timeline">
      <view class="timeline-item" v-for="(item, index) in currentSchedule" :key="index">
        <view class="time-dot"></view>
        <view class="time-line" v-if="index < currentSchedule.length - 1"></view>
        <view class="schedule-card">
          <view class="schedule-time">{{ item.time }}</view>
          <view class="schedule-title">{{ item.title }}</view>
          <view class="schedule-location" v-if="item.location">
            <text class="location-icon">📍</text>
            <text>{{ item.location }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentDate: 0,
      dates: [
        { day: '2月1日', text: '周六' },
        { day: '2月2日', text: '周日' },
        { day: '2月3日', text: '周一' }
      ],
      schedules: {
        0: [
          { time: '08:00', title: '签到开始', location: '主会场大厅' },
          { time: '09:00', title: '开幕式', location: '主赛场' },
          { time: '10:00', title: '预赛第一轮', location: 'A赛场' },
          { time: '14:00', title: '预赛第二轮', location: 'A赛场' },
          { time: '18:00', title: '当日比赛结束', location: '' }
        ],
        1: [
          { time: '08:30', title: '选手签到', location: '主会场大厅' },
          { time: '09:30', title: '半决赛', location: 'A赛场' },
          { time: '14:00', title: '表演赛', location: 'B赛场' },
          { time: '16:00', title: '决赛', location: '主赛场' },
          { time: '18:30', title: '当日比赛结束', location: '' }
        ],
        2: [
          { time: '09:00', title: '颁奖典礼', location: '主赛场' },
          { time: '11:00', title: '闭幕式', location: '主赛场' },
          { time: '12:00', title: '赛事圆满结束', location: '' }
        ]
      }
    };
  },
  computed: {
    currentSchedule() {
      return this.schedules[this.currentDate] || [];
    }
  }
};
</script>

<style lang="scss" scoped>
.event-schedule-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.date-tabs {
  background-color: #fff;
  display: flex;
  padding: 20rpx 30rpx;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.date-tab {
  flex: 1;
  text-align: center;
  padding: 20rpx;
  border-radius: 12rpx;
  background-color: #f5f5f5;
}

.date-tab.active {
  background-color: #C93639;
  color: #fff;
}

.date-day {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 5rpx;
}

.date-text {
  font-size: 24rpx;
  opacity: 0.8;
}

.schedule-timeline {
  padding: 20rpx 30rpx;
}

.timeline-item {
  display: flex;
  gap: 20rpx;
  position: relative;
  margin-bottom: 40rpx;
}

.time-dot {
  width: 24rpx;
  height: 24rpx;
  background-color: #C93639;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 10rpx;
  position: relative;
  z-index: 2;
}

.time-line {
  position: absolute;
  left: 11rpx;
  top: 34rpx;
  bottom: -40rpx;
  width: 2rpx;
  background-color: #E0E0E0;
  z-index: 1;
}

.schedule-card {
  flex: 1;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 25rpx;
}

.schedule-time {
  font-size: 26rpx;
  color: #C93639;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.schedule-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10rpx;
}

.schedule-location {
  font-size: 24rpx;
  color: #666666;
  display: flex;
  align-items: center;
  gap: 5rpx;
}

.location-icon {
  font-size: 22rpx;
}
</style>
