<!-- 实验室安全素养资源卡 -->
<template>
  <div class="resource-card">
    <div class="card-title">实验室安全素养资源卡</div>

    <!-- 分类 Tab 横向滚动 -->
    <div class="tab-scroll-wrap">
      <div class="tab-bar">
        <el-button
          v-for="tab in resourceData.tabs"
          :key="tab"
          :type="resourceData.activeTab === tab ? 'primary' : 'default'"
          size="mini"
          round
          @click="resourceData.activeTab = tab"
        >{{ tab }}</el-button>
      </div>
    </div>

    <div class="resource-body">
      <!-- 左侧：知识学习 + 刷题练习 -->
      <div class="left-panel">

        <!-- 知识学习 -->
        <div class="sub-block">
          <div class="sub-header">
            <span class="sub-title">知识学习</span>
            <a class="more-link">查看更多</a>
          </div>
          <div v-for="item in resourceData.knowledgeList" :key="item.name + item.year" class="file-item">
            <div class="file-icon-wrap">
              <i class="el-icon-document file-icon"></i>
            </div>
            <div class="file-info">
              <div class="file-name">{{ item.name }}</div>
              <div class="file-meta">{{ item.year }}｜{{ item.term }}｜{{ item.credit }}学分</div>
            </div>
            <el-button size="mini" type="primary" plain>学习</el-button>
          </div>
        </div>

        <!-- 刷题练习 -->
        <div class="sub-block">
          <div class="sub-header">
            <span class="sub-title">刷题练习</span>
            <a class="more-link">查看更多</a>
          </div>
          <div class="practice-item">
            <div class="practice-top">
              <a class="practice-date link">2026-09-01 9:30:33</a>
              <div class="practice-more"><i class="el-icon-more"></i></div>
            </div>
            <div class="practice-stats">
              <span>练习题：<b>32/369</b></span>
            </div>
            <div class="practice-rates">
              <span>答对率：<b>50%</b></span>
              <span>正确数：<b>72%</b></span>
              <span>错误数：<b>96%</b></span>
            </div>
            <div class="practice-time">2026-09-01 11:03:25</div>
          </div>
        </div>

      </div>

      <!-- 右侧：视频课程学习 -->
      <div class="right-panel">
        <div class="sub-header">
          <span class="sub-title">视频课程学习</span>
          <a class="more-link">查看更多</a>
        </div>
        <div class="video-grid">
          <div v-for="item in resourceData.videoList" :key="item.name + item.idx" class="video-item">
            <div class="video-thumb">
              <div class="thumb-inner">视频缩略图</div>
            </div>
            <div class="video-footer">
              <div class="video-name">{{ item.name }}</div>
              <div class="video-meta">{{ item.year }}｜{{ item.term }}｜{{ item.credit }}学分</div>
              <el-button size="mini" type="primary" plain>学习</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResourceCard',
  data() {
    return {
      resourceData: {
        activeTab: '总览',
        tabs: ['总览', '生物类', '辐射类', '化学', '总览', '科目', '生物类', '辐射类', '化学', '科目'],
        knowledgeList: [
          { name: '课件资料名称.PDF', year: '2026年', term: '1学年', credit: '1' },
          { name: '课件资料名称.PDF', year: '2026年', term: '1学年', credit: '1' },
          { name: '课件资料名称.PDF', year: '2026年', term: '1学年', credit: '1' },
          { name: '课件资料名称.PDF', year: '2026年', term: '1学年', credit: '1' },
          { name: '课件资料名称.PDF', year: '2026年', term: '1学年', credit: '1' },
        ],
        videoList: [
          { idx: 1, name: '视频课程名称', year: '2026年', term: '1学年', credit: '1' },
          { idx: 2, name: '视频课程名称', year: '2026年', term: '1学年', credit: '1' },
          { idx: 3, name: '视频课程名称', year: '2026年', term: '1学年', credit: '1' },
          { idx: 4, name: '视频课程名称', year: '2026年', term: '1学年', credit: '1' },
          { idx: 5, name: '视频课程名称', year: '2026年', term: '1学年', credit: '1' },
          { idx: 6, name: '视频课程名称', year: '2026年', term: '1学年', credit: '1' },
        ]
      }
    }
  }
}
</script>

<style scoped lang="scss">
.resource-card {
  background: #fff;
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);

  .card-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
  }

  .tab-scroll-wrap {
    overflow-x: auto;
    margin-bottom: 16px;
    padding-bottom: 4px;

    &::-webkit-scrollbar { height: 4px; }
    &::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }

    .tab-bar {
      display: flex;
      gap: 6px;
      white-space: nowrap;
      width: max-content;
    }
  }

  .resource-body {
    display: flex;
    gap: 20px;
    align-items: flex-start;

    .left-panel { flex: 0 0 45%; }
    .right-panel { flex: 1; }
  }

  .sub-block { margin-bottom: 20px; }

  .sub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .sub-title { font-size: 14px; font-weight: 600; color: #333; }
    .more-link { font-size: 12px; color: #409eff; cursor: pointer; }
  }

  .file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;

    .file-icon-wrap {
      width: 32px;
      height: 32px;
      background: #fff3e0;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      .file-icon { font-size: 18px; color: #e6a23c; }
    }

    .file-info {
      flex: 1;
      min-width: 0;
      .file-name { font-size: 13px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .file-meta { font-size: 12px; color: #999; margin-top: 2px; }
    }
  }

  .practice-item {
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 12px;

    .practice-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      .link { color: #409eff; font-size: 13px; cursor: pointer; }
      .practice-more { color: #ccc; cursor: pointer; font-size: 16px; }
    }

    .practice-stats {
      font-size: 13px;
      color: #555;
      margin-bottom: 6px;
      b { color: #333; }
    }

    .practice-rates {
      display: flex;
      gap: 16px;
      font-size: 12px;
      color: #666;
      margin-bottom: 6px;
      b { color: #409eff; }
    }

    .practice-time {
      font-size: 12px;
      color: #999;
      text-align: right;
    }
  }

  .video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;

    .video-item {
      border: 1px solid #eee;
      border-radius: 6px;
      overflow: hidden;

      .video-thumb {
        height: 72px;
        background: #f0f2f5;
        display: flex;
        align-items: center;
        justify-content: center;
        .thumb-inner { color: #ccc; font-size: 12px; }
      }

      .video-footer {
        padding: 8px 10px;
        .video-name { font-size: 13px; color: #333; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .video-meta { font-size: 12px; color: #999; margin-bottom: 6px; }
      }
    }
  }
}
</style>
