<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>
import infoAPI from '@/api/info.js'

export default {
  data() {
    return {
      eventId: '',
      currentDate: 0,
      dates: [],
      schedules: {}
    };
  },
  computed: {
    currentSchedule() {
      return this.schedules[this.currentDate] || [];
    }
  },
  onLoad(options) {
    if (options.eventId) {
      this.eventId = options.eventId
      this.loadScheduleDates(options.eventId)
    }
  },
  watch: {
    currentDate(newVal) {
      if (this.dates[newVal] && this.dates[newVal].date) {
        this.loadScheduleByDate(this.eventId, this.dates[newVal].date)
      }
    }
  },
  methods: {
    /**
     * 加载日程日期列表
     */
    async loadScheduleDates(eventId) {
      try {
        const res = await infoAPI.getActivityScheduleList({ competitionId: eventId })

        let list = []
        if (res.records) {
          list = res.records
        } else if (Array.isArray(res)) {
          list = res
        }

        // 如果后端没有数据，使用模拟数据
        if (list.length === 0) {
          list = this.getMockScheduleData()
        }

        // 提取唯一日期
        const dateSet = new Set()
        list.forEach(item => {
          const date = item.scheduleDate || item.schedule_date || item.date
          if (date) {
            dateSet.add(date)
          }
        })

        // 格式化日期选项卡并排序
        this.dates = Array.from(dateSet)
          .sort((a, b) => new Date(a) - new Date(b))  // 按日期升序排序
          .map(date => {
            const d = new Date(date)
            const month = d.getMonth() + 1
            const day = d.getDate()
            const weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][d.getDay()]

            return {
              date: date,
              day: `${month}月${day}日`,
              text: weekDay
            }
          })

        // 按日期分组日程
        list.forEach(item => {
          const date = item.scheduleDate || item.schedule_date || item.date
          const dateIndex = this.dates.findIndex(d => d.date === date)

          if (dateIndex >= 0) {
            if (!this.schedules[dateIndex]) {
              this.schedules[dateIndex] = []
            }

            this.schedules[dateIndex].push({
              time: this.formatTime(item.scheduleTime || item.schedule_time || item.time),
              timeRaw: item.scheduleTime || item.schedule_time || item.time,  // 保存原始时间用于排序
              title: item.eventName || item.event_name || item.title || item.activityName || item.scheduleName,
              location: item.venue || item.location || ''
            })
          }
        })

        // 对每个日期内的日程按时间排序
        Object.keys(this.schedules).forEach(dateIndex => {
          this.schedules[dateIndex].sort((a, b) => {
            const timeA = a.timeRaw || a.time
            const timeB = b.timeRaw || b.time
            return timeA.localeCompare(timeB)
          })
        })

        // 加载第一天的日程
        if (this.dates.length > 0 && this.dates[0].date) {
          this.loadScheduleByDate(eventId, this.dates[0].date)
        }
      } catch (err) {
        console.error('加载日程日期失败:', err)
        // 加载失败时使用模拟数据
        const list = this.getMockScheduleData()

        // 提取唯一日期
        const dateSet = new Set()
        list.forEach(item => {
          if (item.scheduleDate) {
            dateSet.add(item.scheduleDate)
          }
        })

        // 格式化日期选项卡并排序
        this.dates = Array.from(dateSet)
          .sort((a, b) => new Date(a) - new Date(b))  // 按日期升序排序
          .map(date => {
            const d = new Date(date)
            const month = d.getMonth() + 1
            const day = d.getDate()
            const weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][d.getDay()]

            return {
              date: date,
              day: `${month}月${day}日`,
              text: weekDay
            }
          })

        // 按日期分组日程
        list.forEach(item => {
          const dateIndex = this.dates.findIndex(d => d.date === item.scheduleDate)

          if (dateIndex >= 0) {
            if (!this.schedules[dateIndex]) {
              this.schedules[dateIndex] = []
            }

            this.schedules[dateIndex].push({
              time: this.formatTime(item.scheduleTime),
              timeRaw: item.scheduleTime,  // 保存原始时间用于排序
              title: item.eventName,
              location: item.venue || ''
            })
          }
        })

        // 对每个日期内的日程按时间排序
        Object.keys(this.schedules).forEach(dateIndex => {
          this.schedules[dateIndex].sort((a, b) => {
            const timeA = a.timeRaw || a.time
            const timeB = b.timeRaw || b.time
            return timeA.localeCompare(timeB)
          })
        })
      }
    },

    /**
     * 加载指定日期的日程
     */
    async loadScheduleByDate(eventId, date) {
      try {
        const res = await infoAPI.getScheduleList({ competitionId: eventId, date: date })

        let list = []
        if (res.records) {
          list = res.records
        } else if (Array.isArray(res)) {
          list = res
        }

        const dateIndex = this.dates.findIndex(d => d.date === date)
        if (dateIndex >= 0) {
          this.schedules[dateIndex] = list
            .map(item => ({
              time: this.formatTime(item.scheduleTime || item.schedule_time || item.time),
              timeRaw: item.scheduleTime || item.schedule_time || item.time,
              title: item.eventName || item.event_name || item.title || item.activityName || item.scheduleName,
              location: item.venue || item.location || ''
            }))
            .sort((a, b) => {
              const timeA = a.timeRaw || a.time
              const timeB = b.timeRaw || b.time
              return timeA.localeCompare(timeB)
            })

          // 触发视图更新
          this.$forceUpdate()
        }
      } catch (err) {
        console.error('加载日程详情失败:', err)
      }
    },

    /**
     * 格式化时间（只取时分）
     */
    formatTime(timeStr) {
      if (!timeStr) return ''

      // 如果已经是 HH:MM 格式
      if (/^\d{2}:\d{2}$/.test(timeStr)) {
        return timeStr
      }

      // 如果是 HH:MM:SS 格式，直接截取前5位
      if (/^\d{2}:\d{2}:\d{2}$/.test(timeStr)) {
        return timeStr.substring(0, 5)
      }

      // 尝试解析完整的日期时间字符串
      const date = new Date(timeStr)
      if (!isNaN(date.getTime())) {
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        return `${hours}:${minutes}`
      }

      // 如果无法解析，返回原字符串
      return timeStr
    },

    /**
     * 获取模拟日程数据
     */
    getMockScheduleData() {
      return [
        // 第一天：2025-12-25 (报到日)
        {
          id: 2001,
          competitionId: 200,
          scheduleDate: '2025-12-25',
          scheduleTime: '08:00',
          eventName: '运动员报到',
          venue: '赛事组委会接待处',
          status: 1
        },
        {
          id: 2002,
          competitionId: 200,
          scheduleDate: '2025-12-25',
          scheduleTime: '09:00',
          eventName: '领取参赛证件及装备',
          venue: '赛事组委会接待处',
          status: 1
        },
        {
          id: 2003,
          competitionId: 200,
          scheduleDate: '2025-12-25',
          scheduleTime: '10:00',
          eventName: '赛前技术会议',
          venue: '会议室A',
          status: 1
        },
        {
          id: 2004,
          competitionId: 200,
          scheduleDate: '2025-12-25',
          scheduleTime: '14:00',
          eventName: '场地开放训练',
          venue: '主赛场',
          status: 1
        },
        {
          id: 2005,
          competitionId: 200,
          scheduleDate: '2025-12-25',
          scheduleTime: '16:00',
          eventName: '裁判员培训会',
          venue: '会议室B',
          status: 1
        },
        {
          id: 2006,
          competitionId: 200,
          scheduleDate: '2025-12-25',
          scheduleTime: '18:00',
          eventName: '开幕式彩排',
          venue: '主赛场',
          status: 1
        },
        // 第二天：2025-12-26 (正式比赛第一天)
        {
          id: 2007,
          competitionId: 200,
          scheduleDate: '2025-12-26',
          scheduleTime: '07:30',
          eventName: '运动员检录',
          venue: '检录处',
          status: 1
        },
        {
          id: 2008,
          competitionId: 200,
          scheduleDate: '2025-12-26',
          scheduleTime: '08:30',
          eventName: '开幕式',
          venue: '主赛场',
          status: 1
        },
        {
          id: 2009,
          competitionId: 200,
          scheduleDate: '2025-12-26',
          scheduleTime: '09:00',
          eventName: '男子长拳预赛',
          venue: '主赛场',
          status: 1
        },
        {
          id: 2010,
          competitionId: 200,
          scheduleDate: '2025-12-26',
          scheduleTime: '10:30',
          eventName: '女子长拳预赛',
          venue: '主赛场',
          status: 1
        },
        {
          id: 2011,
          competitionId: 200,
          scheduleDate: '2025-12-26',
          scheduleTime: '12:00',
          eventName: '午休',
          venue: '',
          status: 1
        },
        {
          id: 2012,
          competitionId: 200,
          scheduleDate: '2025-12-26',
          scheduleTime: '14:00',
          eventName: '男子太极拳预赛',
          venue: '主赛场',
          status: 1
        },
        {
          id: 2013,
          competitionId: 200,
          scheduleDate: '2025-12-26',
          scheduleTime: '15:30',
          eventName: '女子太极拳预赛',
          venue: '主赛场',
          status: 1
        },
        {
          id: 2014,
          competitionId: 200,
          scheduleDate: '2025-12-26',
          scheduleTime: '17:00',
          eventName: '当日赛事总结会',
          venue: '会议室A',
          status: 1
        },
        // 第三天：2025-12-27 (正式比赛第二天 - 决赛日)
        {
          id: 2015,
          competitionId: 200,
          scheduleDate: '2025-12-27',
          scheduleTime: '07:30',
          eventName: '运动员检录',
          venue: '检录处',
          status: 1
        },
        {
          id: 2016,
          competitionId: 200,
          scheduleDate: '2025-12-27',
          scheduleTime: '08:30',
          eventName: '男子长拳半决赛',
          venue: '主赛场',
          status: 1
        },
        {
          id: 2017,
          competitionId: 200,
          scheduleDate: '2025-12-27',
          scheduleTime: '10:00',
          eventName: '女子长拳半决赛',
          venue: '主赛场',
          status: 1
        },
        {
          id: 2018,
          competitionId: 200,
          scheduleDate: '2025-12-27',
          scheduleTime: '12:00',
          eventName: '午休',
          venue: '',
          status: 1
        },
        {
          id: 2019,
          competitionId: 200,
          scheduleDate: '2025-12-27',
          scheduleTime: '14:00',
          eventName: '男子长拳决赛',
          venue: '主赛场',
          status: 1
        },
        {
          id: 2020,
          competitionId: 200,
          scheduleDate: '2025-12-27',
          scheduleTime: '15:00',
          eventName: '女子长拳决赛',
          venue: '主赛场',
          status: 1
        },
        {
          id: 2021,
          competitionId: 200,
          scheduleDate: '2025-12-27',
          scheduleTime: '16:00',
          eventName: '男子太极拳决赛',
          venue: '主赛场',
          status: 1
        },
        {
          id: 2022,
          competitionId: 200,
          scheduleDate: '2025-12-27',
          scheduleTime: '17:00',
          eventName: '女子太极拳决赛',
          venue: '主赛场',
          status: 1
        },
        {
          id: 2023,
          competitionId: 200,
          scheduleDate: '2025-12-27',
          scheduleTime: '18:00',
          eventName: '颁奖典礼',
          venue: '主赛场',
          status: 1
        },
        {
          id: 2024,
          competitionId: 200,
          scheduleDate: '2025-12-27',
          scheduleTime: '19:00',
          eventName: '闭幕式',
          venue: '主赛场',
          status: 1
        }
      ]
    }
  }
};
</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>
