<template>
  <view class="event-rules-page">
    <!-- 附件下载区 -->
    <view class="attachments-section" v-if="attachments.length > 0">
      <view class="section-title">
        <text class="title-icon">📎</text>
        <text class="title-text">规程附件</text>
      </view>
      <view class="attachments-list">
        <view class="attachment-item" v-for="(file, index) in attachments" :key="index" @click="downloadFile(file)">
          <view class="file-info">
            <text class="file-icon">{{ getFileIcon(file.fileType) }}</text>
            <view class="file-details">
              <text class="file-name">{{ file.fileName }}</text>
              <text class="file-size">{{ file.fileSize }}</text>
            </view>
          </view>
          <view class="download-btn">
            <text class="download-icon">⬇</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 规程内容区 -->
    <view class="content-section" v-if="rulesList.length > 0">
      <view class="section-title">
        <text class="title-icon">📄</text>
        <text class="title-text">规程内容</text>
      </view>
      <view class="rules-list">
        <view class="rules-item" v-for="(item, index) in rulesList" :key="index" @click="toggleSection(index)">
          <view class="rules-header">
            <view class="chapter-number">{{ item.chapter }}</view>
            <view class="chapter-title">{{ item.title }}</view>
            <view class="arrow" :class="{ expanded: item.expanded }">›</view>
          </view>
          <view class="rules-content" v-if="item.expanded">
            <view class="content-item" v-for="(content, idx) in item.contents" :key="idx">
              <text class="content-text">{{ content }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="attachments.length === 0 && rulesList.length === 0">
      <text class="empty-icon">📋</text>
      <text class="empty-text">暂无规程信息</text>
    </view>

    <!-- 快捷入口 -->
    <view class="quick-actions" v-if="eventId">
      <view class="quick-action-item" @click="goToPlayers">
        <view class="action-icon">👥</view>
        <view class="action-text">查看参赛选手</view>
      </view>
      <view class="quick-action-item" @click="goToRegister">
        <view class="action-icon">📝</view>
        <view class="action-text">我要报名</view>
      </view>
    </view>
  </view>
</template>

<script>
import competitionAPI from '@/api/competition.js'

export default {
  data() {
    return {
      eventId: '',
      // 附件列表
      attachments: [],
      // 规程章节列表
      rulesList: []
    };
  },
  onLoad(options) {
    if (options.eventId) {
      this.eventId = options.eventId
      this.loadRulesData()
    }
  },
  methods: {
    /**
     * 加载规程数据
     */
    async loadRulesData() {
      try {
        // 调用API获取规程数据
        const res = await competitionAPI.getCompetitionRules(this.eventId)

        // 处理附件数据
        if (res.attachments && res.attachments.length > 0) {
          this.attachments = res.attachments.map(file => ({
            id: file.id,
            fileName: file.name || file.fileName,
            fileUrl: file.url || file.fileUrl,
            fileSize: this.formatFileSize(file.size || file.fileSize),
            fileType: this.getFileType(file.name || file.fileName)
          }))
        }

        // 处理规程内容数据
        if (res.chapters && res.chapters.length > 0) {
          this.rulesList = res.chapters.map(chapter => ({
            chapter: chapter.chapterNumber || chapter.number,
            title: chapter.title || chapter.name,
            expanded: false,
            contents: chapter.contents || chapter.items || []
          }))
        }
      } catch (err) {
        console.error('加载规程数据失败:', err)
        // 如果API失败，使用模拟数据
        this.loadMockData()
      }
    },

    /**
     * 加载模拟数据（用于开发测试）
     */
    loadMockData() {
      this.attachments = [
        {
          id: '1',
          fileName: '2025年郑州武术大赛规程.pdf',
          fileUrl: 'https://example.com/rules.pdf',
          fileSize: '2.5 MB',
          fileType: 'pdf'
        },
        {
          id: '2',
          fileName: '参赛报名表.docx',
          fileUrl: 'https://example.com/form.docx',
          fileSize: '156 KB',
          fileType: 'docx'
        }
      ]

      this.rulesList = [
        {
          chapter: '第一章',
          title: '总则',
          expanded: false,
          contents: [
            '1.1 本次比赛遵循国际武术联合会竞赛规则。',
            '1.2 所有参赛选手必须持有效证件参赛。',
            '1.3 参赛选手须服从裁判判决，不得有违规行为。'
          ]
        },
        {
          chapter: '第二章',
          title: '参赛资格',
          expanded: false,
          contents: [
            '2.1 参赛选手年龄须在18-45周岁之间。',
            '2.2 参赛选手须持有武术等级证书或相关证明。',
            '2.3 参赛选手须通过健康检查，身体状况良好。'
          ]
        },
        {
          chapter: '第三章',
          title: '比赛规则',
          expanded: false,
          contents: [
            '3.1 比赛采用单败淘汰制。',
            '3.2 每场比赛时间为3分钟，分3局进行。',
            '3.3 得分规则按照国际标准执行。'
          ]
        },
        {
          chapter: '第四章',
          title: '奖项设置',
          expanded: false,
          contents: [
            '4.1 各组别设金、银、铜牌各一枚。',
            '4.2 设最佳表现奖、体育道德风尚奖等特别奖项。',
            '4.3 所有参赛选手均可获得参赛证书。'
          ]
        }
      ]
    },

    /**
     * 切换章节展开/收起
     */
    toggleSection(index) {
      this.rulesList[index].expanded = !this.rulesList[index].expanded
    },

    /**
     * 下载文件
     */
    downloadFile(file) {
      uni.showLoading({
        title: '准备下载'
      })

      // 下载文件
      uni.downloadFile({
        url: file.fileUrl,
        success: (res) => {
          if (res.statusCode === 200) {
            // 保存文件到本地
            const filePath = res.tempFilePath

            // 打开文档
            uni.openDocument({
              filePath: filePath,
              fileType: file.fileType,
              success: () => {
                uni.hideLoading()
                uni.showToast({
                  title: '打开成功',
                  icon: 'success'
                })
              },
              fail: (err) => {
                uni.hideLoading()
                console.error('打开文件失败:', err)
                uni.showToast({
                  title: '打开失败',
                  icon: 'none'
                })
              }
            })
          }
        },
        fail: (err) => {
          uni.hideLoading()
          console.error('下载失败:', err)
          uni.showToast({
            title: '下载失败',
            icon: 'none'
          })
        }
      })
    },

    /**
     * 获取文件类型
     */
    getFileType(fileName) {
      const ext = fileName.split('.').pop().toLowerCase()
      return ext
    },

    /**
     * 获取文件图标
     */
    getFileIcon(fileType) {
      const iconMap = {
        'pdf': '📕',
        'doc': '📘',
        'docx': '📘',
        'xls': '📗',
        'xlsx': '📗',
        'ppt': '📙',
        'pptx': '📙',
        'txt': '📄',
        'zip': '📦',
        'rar': '📦'
      }
      return iconMap[fileType] || '📄'
    },

    /**
     * 格式化文件大小
     */
    formatFileSize(bytes) {
      if (!bytes || bytes === 0) return '0 B'
      if (typeof bytes === 'string') return bytes

      const k = 1024
      const sizes = ['B', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i]
    },

    /**
     * 跳转到参赛选手页面
     */
    goToPlayers() {
      uni.navigateTo({
        url: `/pages/event-players/event-players?eventId=${this.eventId}`
      })
    },

    /**
     * 跳转到报名页面
     */
    goToRegister() {
      uni.navigateTo({
        url: `/pages/event-register/event-register?eventId=${this.eventId}`
      })
    }
  }
};
</script>

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

// 区块标题
.section-title {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-bottom: 20rpx;
  padding: 0 10rpx;
}

.title-icon {
  font-size: 32rpx;
}

.title-text {
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
}

// 附件下载区
.attachments-section {
  margin-bottom: 30rpx;
}

.attachments-list {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.attachment-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 25rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s;

  &:active {
    background-color: #f8f8f8;
    transform: scale(0.98);
  }
}

.file-info {
  display: flex;
  align-items: center;
  gap: 20rpx;
  flex: 1;
  min-width: 0;
}

.file-icon {
  font-size: 48rpx;
  flex-shrink: 0;
}

.file-details {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  flex: 1;
  min-width: 0;
}

.file-name {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.download-btn {
  width: 60rpx;
  height: 60rpx;
  background-color: #C93639;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.download-icon {
  font-size: 32rpx;
  color: #fff;
}

// 规程内容区
.content-section {
  margin-bottom: 30rpx;
}

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

.rules-item {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.rules-header {
  display: flex;
  align-items: center;
  padding: 30rpx;
  gap: 15rpx;
  transition: background-color 0.3s;

  &:active {
    background-color: #f8f8f8;
  }
}

.chapter-number {
  font-size: 28rpx;
  font-weight: bold;
  color: #C93639;
  flex-shrink: 0;
}

.chapter-title {
  flex: 1;
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
}

.arrow {
  font-size: 40rpx;
  color: #999999;
  transition: transform 0.3s;
}

.arrow.expanded {
  transform: rotate(90deg);
}

.rules-content {
  padding: 0 30rpx 30rpx;
  border-top: 1rpx solid #f5f5f5;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.content-item {
  margin-bottom: 15rpx;
  padding-left: 20rpx;
  position: relative;
}

.content-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12rpx;
  width: 8rpx;
  height: 8rpx;
  background-color: #C93639;
  border-radius: 50%;
}

.content-text {
  font-size: 26rpx;
  color: #666666;
  line-height: 1.8;
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
  gap: 20rpx;
}

.empty-icon {
  font-size: 120rpx;
  opacity: 0.3;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
}

// 快捷入口
.quick-actions {
  margin-top: 30rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.quick-action-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s;

  &:active {
    background-color: #f8f8f8;
    transform: scale(0.95);
  }
}

.action-icon {
  font-size: 48rpx;
}

.action-text {
  font-size: 26rpx;
  color: #333333;
  font-weight: 500;
}
</style>
