<template>
  <view class="event-live-page">
    <!-- 实况列表 -->
    <view class="live-list">
      <view class="live-item" v-for="(item, index) in liveList" :key="index">
        <view class="live-time">{{ item.time }}</view>
        <view class="live-content">
          <view class="live-type" :class="item.type">{{ item.typeText }}</view>
          <view class="live-text">{{ item.content }}</view>
          <view class="live-images" v-if="item.images && item.images.length > 0">
            <image
              class="live-image"
              v-for="(img, idx) in item.images"
              :key="idx"
              :src="img"
              mode="aspectFill"
            ></image>
          </view>
        </view>
      </view>
    </view>

    <!-- 刷新提示 -->
    <view class="refresh-tip">
      <text class="tip-icon">🔄</text>
      <text class="tip-text">下拉刷新获取最新实况</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      liveList: [
        {
          time: '16:45',
          type: 'highlight',
          typeText: '精彩瞬间',
          content: '张三选手以一记精彩的侧踢得分，现场观众掌声雷动！',
          images: []
        },
        {
          time: '16:30',
          type: 'score',
          typeText: '比分',
          content: '男子散打决赛：张三 3:2 李四，比赛进入白热化阶段',
          images: []
        },
        {
          time: '16:15',
          type: 'news',
          typeText: '赛况',
          content: '男子散打决赛正式开始，双方选手入场，裁判宣读比赛规则',
          images: []
        },
        {
          time: '16:00',
          type: 'news',
          typeText: '赛况',
          content: '上一场比赛结束，场地准备中...',
          images: []
        },
        {
          time: '15:45',
          type: 'highlight',
          typeText: '精彩瞬间',
          content: '半决赛第二场，王五选手表现出色，成功晋级决赛',
          images: []
        }
      ]
    };
  }
};
</script>

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

.live-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.live-item {
  display: flex;
  gap: 20rpx;
}

.live-time {
  font-size: 24rpx;
  color: #999999;
  flex-shrink: 0;
  padding-top: 5rpx;
}

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

.live-type {
  display: inline-block;
  font-size: 22rpx;
  padding: 6rpx 16rpx;
  border-radius: 6rpx;
  margin-bottom: 12rpx;
  color: #fff;
}

.live-type.highlight {
  background-color: #C93639;
}

.live-type.score {
  background-color: #FF8C00;
}

.live-type.news {
  background-color: #4CAF50;
}

.live-text {
  font-size: 28rpx;
  color: #333333;
  line-height: 1.6;
}

.live-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10rpx;
  margin-top: 15rpx;
}

.live-image {
  width: 100%;
  height: 180rpx;
  border-radius: 8rpx;
}

.refresh-tip {
  text-align: center;
  padding: 40rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
}

.tip-icon {
  font-size: 28rpx;
  color: #999999;
}

.tip-text {
  font-size: 24rpx;
  color: #999999;
}
</style>
