<!--教研管理-详情-->
<template>
  <view class="dark-theme">
    <view class="main_section">
      <view class="section_1">
        <view class="title">{{ infoData.title }}</view>
        <view class="meta-info">
          <text class="category">{{ getTableType(infoData.table_type) }}</text>
          <text class="date">{{ infoData.create_time }}</text>
        </view>
        <view class="content" v-html="infoData.content"></view>
        
        <!-- 附件区域 -->
        <view v-if="infoData.url" class="attachment-section">
          <view class="attachment-title">附件</view>
          
          <!-- 图片类型 -->
          <view v-if="attachmentType === 'image'" class="image-attachment">
            <image 
              :src="getFullUrl(infoData.url)" 
              mode="aspectFit" 
              @click="previewImage(getFullUrl(infoData.url))"
              class="attachment-image"
            />
            <text class="attachment-tip">点击图片可放大预览</text>
          </view>
          
          <!-- 视频类型 -->
          <view v-if="attachmentType === 'video'" class="video-attachment">
            <video 
              :src="getFullUrl(infoData.url)" 
              controls 
              class="attachment-video"
              poster=""
            ></video>
          </view>
          
          <!-- 文档类型 -->
          <view v-if="attachmentType === 'document'" class="document-attachment">
            <view class="document-info">
              <view class="document-icon">📄</view>
              <view class="document-details">
                <text class="document-name">{{ getFileName(infoData.url) }}</text>
                <text class="document-size">{{ getFileExtension(infoData.url).toUpperCase() }} 文件</text>
              </view>
            </view>
            <button class="download-btn" @click="downloadFile(getFullUrl(infoData.url))">
              下载文件
            </button>
          </view>
        </view>
        
        <!-- 考试按钮 -->
        <view v-if="infoData.exam_papers_id && infoData.exam_papers_id != 0" class="exam-section">
          <button class="exam-btn" @click="goTake(infoData.exam_papers_id, infoData.id)">
            开始考试
          </button>
        </view>
      </view>
    </view>
    
    <!-- 加载状态 -->
    <view v-if="loading" class="loading">加载中...</view>
  </view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js';

export default {
  data() {
    return {
      loading: true,
      articleId: '',
      infoData: {
        title: '',
        content: '',
        table_type: '',
        create_time: '',
        exam_papers_id: 0,
        type: 1,
        url: ''
      },
      tableTypeName: {
        '1': "课程教学大纲",
        '2': "跳绳教案库",
        '3': "增高教案库", 
        '4': "篮球教案库",
        '5': "强化教案库",
        '6': "空中忍者教案库",
        '7': "少儿安防教案库",
        '8': "体能教案库",
        '9': "热身动作库",
        '10': "体能动作库",
        '11': "趣味游戏库",
        '12': "放松动作库",
        '13': "训练内容",
        '14': "训练视频",
        '15': "课后作业",
        '16': "优秀一堂课",
        '17': "空中忍者",
        '18': "篮球动作",
        '19': "跳绳动作",
        '20': "跑酷动作",
        '21': "安防动作",
        '22': "标准化动作",
        '23': "3-6岁体测",
        '24': "7+体测",
        '25': "3-6岁体测讲解—解读",
        '26': "7+岁体测讲解—解读",
        '27': "互动游戏",
        '28': "套圈游戏",
        '29': "鼓励方式"
      }
    }
  },
  
  computed: {
    // 根据type字段判断附件类型
    attachmentType() {
      if (!this.infoData.url) return null;
      
      const type = this.infoData.type;
      // type: 1=文档, 2=文档, 3=图片, 4=视频
      if (type === 3) {
        return 'image';
      } else if (type === 4) {
        return 'video';
      } else if (type === 1 || type === 2) {
        return 'document';
      }
      
      // 如果type不明确，根据文件扩展名判断
      const ext = this.getFileExtension(this.infoData.url).toLowerCase();
      if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext)) {
        return 'image';
      } else if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'm3u8'].includes(ext)) {
        return 'video';
      } else {
        return 'document';
      }
    }
  },
  
  onLoad(options) {
    this.articleId = options.id;
    this.getInfo();
  },
  
  methods: {
    // 获取教研管理文章详情
    async getInfo() {
      try {
        this.loading = true;
        const res = await apiRoute.teachingResearchInfo(this.articleId);
        
        if (res.code === 1) {
          this.infoData = res.data;
        } else {
          uni.showToast({
            title: res.msg || '获取详情失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('获取教研管理详情失败:', error);
        uni.showToast({
          title: '网络错误，请稍后重试',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    
    // 获取表类型名称
    getTableType(type) {
      return this.tableTypeName[type] || '未知类型';
    },
    
    // 跳转到考试页面
    goTake(examId, articleId) {
      uni.navigateTo({
        url: '/pages-coach/coach/my/gotake_exam?id=' + examId + '&zid=' + articleId
      });
    },
    
    // 获取完整URL（相对路径转绝对路径）
    getFullUrl(url) {
      if (!url) return '';
      if (url.startsWith('http://') || url.startsWith('https://')) {
        return url;
      }
      // 如果是相对路径，添加基础URL
      return 'http://localhost:20080' + (url.startsWith('/') ? url : '/' + url);
    },
    
    // 图片预览
    previewImage(url) {
      uni.previewImage({
        urls: [url],
        current: url
      });
    },
    
    // 文件下载
    downloadFile(url) {
      uni.showLoading({
        title: '下载中...'
      });
      
      uni.downloadFile({
        url: url,
        success: (res) => {
          if (res.statusCode === 200) {
            // 获取文件扩展名
            const extension = this.getFileExtension(url);
            const fileName = this.getFileName(url);
            
            // 保存到相册或文档
            if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(extension.toLowerCase())) {
              // 图片文件保存到相册
              uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: () => {
                  uni.showToast({
                    title: '保存成功',
                    icon: 'success'
                  });
                },
                fail: (error) => {
                  console.error('保存图片失败:', error);
                  uni.showToast({
                    title: '保存失败',
                    icon: 'none'
                  });
                }
              });
            } else {
              // 其他文件类型，打开文档
              uni.openDocument({
                filePath: res.tempFilePath,
                showMenu: true,
                success: () => {
                  console.log('打开文档成功');
                },
                fail: (error) => {
                  console.error('打开文档失败:', error);
                  uni.showToast({
                    title: '无法打开文件',
                    icon: 'none'
                  });
                }
              });
            }
          } else {
            uni.showToast({
              title: '下载失败',
              icon: 'none'
            });
          }
        },
        fail: (error) => {
          console.error('下载失败:', error);
          uni.showToast({
            title: '下载失败',
            icon: 'none'
          });
        },
        complete: () => {
          uni.hideLoading();
        }
      });
    },
    
    // 获取文件名
    getFileName(url) {
      if (!url) return '';
      const parts = url.split('/');
      const fileName = parts[parts.length - 1];
      return fileName.split('?')[0]; // 移除查询参数
    },
    
    // 获取文件扩展名
    getFileExtension(url) {
      if (!url) return '';
      const fileName = this.getFileName(url);
      const lastDotIndex = fileName.lastIndexOf('.');
      return lastDotIndex !== -1 ? fileName.substring(lastDotIndex + 1) : '';
    }
  }
}
</script>

<style lang="scss" scoped>
.dark-theme {
  background-color: #121212;
  color: #ffffff;
  min-height: 100vh;
}

.main_section {
  padding: 20rpx 30rpx;
  padding-bottom: 150rpx;
}

.section_1 {
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 20rpx;
    line-height: 1.4;
  }
  
  .meta-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #333;
    
    .category {
      color: #00d18c;
      font-size: 24rpx;
      background: rgba(0, 209, 140, 0.1);
      padding: 8rpx 16rpx;
      border-radius: 12rpx;
    }
    
    .date {
      color: #b0b0b0;
      font-size: 24rpx;
    }
  }
  
  .content {
    line-height: 1.8;
    font-size: 30rpx;
    color: #ffffff;
    word-wrap: break-word;
    word-break: break-all;
    
    // 处理内容中的图片
    :deep(img) {
      max-width: 100%;
      height: auto;
      border-radius: 8rpx;
      margin: 20rpx 0;
    }
    
    // 处理内容中的段落
    :deep(p) {
      margin: 20rpx 0;
      line-height: 1.8;
    }
  }
}

.exam-section {
  margin-top: 40rpx;
  text-align: center;
  
  .exam-btn {
    background: linear-gradient(45deg, #00d18c, #00a374);
    color: #ffffff;
    border: none;
    border-radius: 25rpx;
    padding: 20rpx 60rpx;
    font-size: 30rpx;
    font-weight: bold;
    box-shadow: 0 4rpx 12rpx rgba(0, 209, 140, 0.3);
    
    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 2rpx 8rpx rgba(0, 209, 140, 0.3);
    }
  }
}

.loading {
  text-align: center;
  padding: 40rpx 0;
  color: #b0b0b0;
  font-size: 28rpx;
}

// 附件区域样式
.attachment-section {
  margin-top: 30rpx;
  padding: 30rpx;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16rpx;
  border: 1rpx solid #333;
  
  .attachment-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #00d18c;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    
    &::before {
      content: '📎';
      margin-right: 10rpx;
      font-size: 28rpx;
    }
  }
  
  // 图片附件样式
  .image-attachment {
    text-align: center;
    
    .attachment-image {
      max-width: 100%;
      max-height: 400rpx;
      border-radius: 12rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
      cursor: pointer;
      transition: transform 0.2s ease;
      
      &:active {
        transform: scale(0.98);
      }
    }
    
    .attachment-tip {
      margin-top: 16rpx;
      font-size: 24rpx;
      color: #b0b0b0;
    }
  }
  
  // 视频附件样式
  .video-attachment {
    .attachment-video {
      width: 100%;
      height: 400rpx;
      border-radius: 12rpx;
      background: #000;
    }
  }
  
  // 文档附件样式
  .document-attachment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12rpx;
    border: 1rpx solid #444;
    
    .document-info {
      display: flex;
      align-items: center;
      flex: 1;
      
      .document-icon {
        font-size: 48rpx;
        margin-right: 20rpx;
      }
      
      .document-details {
        display: flex;
        flex-direction: column;
        
        .document-name {
          font-size: 28rpx;
          color: #ffffff;
          word-break: break-all;
          margin-bottom: 8rpx;
          line-height: 1.4;
        }
        
        .document-size {
          font-size: 24rpx;
          color: #b0b0b0;
        }
      }
    }
    
    .download-btn {
      background: linear-gradient(45deg, #00d18c, #00a374);
      color: #ffffff;
      border: none;
      border-radius: 20rpx;
      padding: 16rpx 32rpx;
      font-size: 26rpx;
      font-weight: bold;
      box-shadow: 0 2rpx 8rpx rgba(0, 209, 140, 0.3);
      min-width: 120rpx;
      
      &:active {
        transform: translateY(2rpx);
        box-shadow: 0 1rpx 4rpx rgba(0, 209, 140, 0.3);
      }
    }
  }
}
</style>