<template>
  <view class="event-info-page">
    <!-- 信息列表 -->
    <view class="info-list">
      <view class="info-item" v-for="(item, index) in infoList" :key="index" @click="handleItemClick(item)">
        <view class="info-header">
          <view class="info-tag" :class="item.type">{{ item.typeText }}</view>
          <view class="info-time">{{ item.time }}</view>
        </view>
        <view class="info-title">{{ item.title }}</view>
        <view class="info-desc">{{ item.desc }}</view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="infoList.length === 0">
      <text class="empty-text">暂无信息发布</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      infoList: [
        {
          id: 1,
          type: 'notice',
          typeText: '通知',
          title: '关于赛事报名截止时间的通知',
          desc: '本次赛事报名将于2025年2月10日24:00截止，请各位选手抓紧时间报名...',
          time: '2025-01-20 10:30'
        },
        {
          id: 2,
          type: 'announcement',
          typeText: '公告',
          title: '比赛场地变更公告',
          desc: '因场馆维护，比赛场地由原定的A馆变更为B馆，请各位参赛选手注意...',
          time: '2025-01-18 14:20'
        },
        {
          id: 3,
          type: 'important',
          typeText: '重要',
          title: '疫情防控须知',
          desc: '所有参赛人员需提供48小时内核酸检测阴性证明，并配合现场测温...',
          time: '2025-01-15 09:00'
        }
      ]
    };
  },
  methods: {
    handleItemClick(item) {
      uni.showToast({
        title: '查看详情',
        icon: 'none'
      });
    }
  }
};
</script>

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

.info-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.info-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
}

.info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15rpx;
}

.info-tag {
  font-size: 24rpx;
  padding: 8rpx 20rpx;
  border-radius: 8rpx;
  color: #fff;
}

.info-tag.notice {
  background-color: #C93639;
}

.info-tag.announcement {
  background-color: #FF8C00;
}

.info-tag.important {
  background-color: #DC143C;
}

.info-time {
  font-size: 24rpx;
  color: #999999;
}

.info-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10rpx;
  line-height: 1.4;
}

.info-desc {
  font-size: 26rpx;
  color: #666666;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.empty-state {
  padding: 200rpx 0;
  text-align: center;
}

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