<!-- 实验室安全素养资源卡 -->
<template>
  <div class="resource-card">
    <div class="card-title">实验室安全素养资源卡</div>
    <!-- 分类 Tab 横向滚动 -->
    <div class="tab-scroll-wrap">
      <div class="tab-bar">
        <p v-for="(item,index) in topList" :key="index"
           :class="item.value == topIndex?'check-p':''"
          @click="topButton(item.value)">{{ item.table }}</p>
      </div>
    </div>

    <div class="resource-body">
      <div class="left-max-big-box">
        <!--知识学习-->
        <div class="left-top-big-box">
          <div class="big-title-box">
            <p>知识学习</p>
            <p>查看更多</p>
          </div>
          <div class="big-content-box scrollbar-box">
            <p class="null-p" v-if="!leftTopList[0]">暂无数据</p>
            <div class="for-big-box" v-for="(item,index) in leftTopList" :key="index">
              <p>{{item.leftTopData1}}</p>
              <p>{{item.leftTopData2}}分钟丨{{item.leftTopData3}}学时丨{{item.leftTopData4}}积分</p>
              <p :class="item.leftTopData5==1?'colorA':''">{{item.leftTopData5==1?'学习中':'未学习'}}</p>
            </div>
          </div>
        </div>
        <!--刷题练习-->
        <div class="left-bottom-big-box">
          <div class="big-title-box">
            <p>刷题练习</p>
            <p>查看更多</p>
          </div>
          <div class="big-content-box scrollbar-box">
            <p class="null-p" v-if="!leftBottomList[0]">暂无数据</p>
            <div class="for-big-box" v-for="(item,index) in leftBottomList" :key="index">
              <div class="for-flex-box">
                <p class="el-icon-time"></p>
                <p>{{item.leftBottomData1}}</p>
              </div>
              <p class="text-p">练习进度：{{item.leftBottomData2}}/{{item.leftBottomData3}}</p>
              <p class="text-p">正确数：{{item.leftBottomData4}}丨错题数：{{item.leftBottomData5}}丨正确率：{{item.leftBottomData6}}%</p>
              <el-progress
                class="num-p" type="circle"
                :stroke-width="4"
                :width="60" :percentage="item.leftBottomData6">
              </el-progress>
            </div>
          </div>
        </div>
      </div>
      <!--视频资源学习-->
      <div class="right-max-big-box">
        <div class="big-title-box">
          <p>视频资源学习</p>
          <p>查看更多</p>
        </div>
        <div class="big-content-box-1 scrollbar-box">
          <p class="null-p" v-if="!rightList[0]">暂无数据</p>
          <div class="for-big-box" v-for="(item,index) in rightList" :key="index">
            <img :src="item.rightData1">
            <div class="text-box">
              <p>{{item.rightData2}}</p>
              <p>{{item.rightData3}}分钟丨{{item.rightData4}}学时丨{{item.rightData5}}积分</p>
              <p :class="item.rightData6==1?'colorA':''">{{item.rightData6==1?'学习中':'未学习'}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResourceCard',
  data() {
    return {
      topList:[{value:'',table:'总览'},{value:'1',table:'生物类'},{value:'2',table:'辐射类'},{value:'3',table:'化学'}],
      topIndex:'',
      leftTopList:[
        {
          leftTopData1:'课件名称',
          leftTopData2:'20',
          leftTopData3:'1',
          leftTopData4:'3',
          leftTopData5:'1',
        },
        {
          leftTopData1:'课件名称',
          leftTopData2:'20',
          leftTopData3:'1',
          leftTopData4:'3',
          leftTopData5:'2',
        },
        {
          leftTopData1:'课件名称',
          leftTopData2:'20',
          leftTopData3:'1',
          leftTopData4:'3',
          leftTopData5:'1',
        },
        {
          leftTopData1:'课件名称',
          leftTopData2:'20',
          leftTopData3:'1',
          leftTopData4:'3',
          leftTopData5:'1',
        },
      ],
      leftBottomList:[
        {
          leftBottomData1:'2026-09-01 9:30:33',
          leftBottomData2:'33',
          leftBottomData3:'369',
          leftBottomData4:'3',
          leftBottomData5:'3',
          leftBottomData6:'96',
          leftBottomData7:'33',
        },
        {
          leftBottomData1:'2026-09-01 9:30:33',
          leftBottomData2:'33',
          leftBottomData3:'369',
          leftBottomData4:'3',
          leftBottomData5:'3',
          leftBottomData6:'96',
          leftBottomData7:'33',
        },
        {
          leftBottomData1:'2026-09-01 9:30:33',
          leftBottomData2:'33',
          leftBottomData3:'369',
          leftBottomData4:'3',
          leftBottomData5:'3',
          leftBottomData6:'96',
          leftBottomData7:'33',
        },
      ],
      rightList:[
        {
          rightData1:'',
          rightData2:'视频课件名称',
          rightData3:'20',
          rightData4:'1',
          rightData5:'3',
          rightData6:'1',
        },
        {
          rightData1:'',
          rightData2:'视频课件名称',
          rightData3:'20',
          rightData4:'1',
          rightData5:'3',
          rightData6:'2',
        },
        {
          rightData1:'',
          rightData2:'视频课件名称',
          rightData3:'20',
          rightData4:'1',
          rightData5:'3',
          rightData6:'1',
        },
        {
          rightData1:'',
          rightData2:'视频课件名称',
          rightData3:'20',
          rightData4:'1',
          rightData5:'3',
          rightData6:'1',
        },
        {
          rightData1:'',
          rightData2:'视频课件名称',
          rightData3:'20',
          rightData4:'1',
          rightData5:'3',
          rightData6:'2',
        },
        {
          rightData1:'',
          rightData2:'视频课件名称',
          rightData3:'20',
          rightData4:'1',
          rightData5:'3',
          rightData6:'1',
        },
      ],
    }
  },
  methods:{
    topButton(val){
      if(this.topIndex != val){
        this.$set(this,'topIndex',val);
        this.leftTopGetData();
        this.leftBottomGetData();
        this.rightGetData();
      }
    },
    leftTopGetData(){

    },
    leftBottomGetData(){

    },
    rightGetData(){

    },
  },
}
</script>

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

  .card-title {
    font-size: 16px;
    font-weight: 700;
    line-height:20px;
    color: #333;
    margin:20px 0 20px 20px;
  }

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

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

    .tab-bar {
      display: flex;
      gap: 6px;
      white-space: nowrap;
      width: max-content;
      p{
        height:40px;
        line-height:40px;
        border-radius:6px;
        border:1px solid #666;
        color:#666;
        padding:0 20px;
        min-width: 100px;
        text-align: center;
        cursor: pointer;
      }
      .check-p{
        color:#fff;
        background-color: #0183fa;
        border: 1px solid #0183fa;
      }
    }
  }

  .resource-body {
    height:800px;
    display: flex;
    .left-max-big-box{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding:20px 0 20px 20px;
      .left-top-big-box{
        height:400px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius:10px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        margin-bottom:20px;
        margin-right:20px;
        padding-bottom:20px;
        .for-big-box{
          margin:12px 14px 0 20px;
          background-color: rgba(1, 131, 250, 0.1);
          border-radius:6px;
          padding:18px 20px;
          position: relative;
          cursor: pointer;
          p:nth-child(1){
            font-size:16px;
            font-weight:700;
            color:#0183fa;
            line-height: 24px;
          }
          p:nth-child(2){
            font-size:14px;
            color:#333;
            line-height: 24px;
          }
          p:nth-child(3){
            position: absolute;
            bottom:20px;
            right:20px;
            font-size:14px;
            border-radius:4px;
            line-height: 24px;
            width: 60px;
            text-align: center;
            background-color: #999;
            color:#fff;
          }
          .colorA{
            background-color: #0183fa!important;
            color:#fff!important;
          }
        }
      }
      .left-bottom-big-box{
        height:400px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius:10px;
        margin-right:20px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        padding-bottom:20px;
        .for-big-box{
          margin:12px 14px 0 20px;
          background-color: rgba(1, 131, 250, 0.1);
          border-radius:6px;
          padding:16px 20px;
          position: relative;
          .for-flex-box{
            display: flex;
            color:#0183fa;
            p{
              font-weight:700;
            }
            p:nth-child(1){
              font-size:18px;
              line-height:40px;
              margin-right:5px;
            }
            p:nth-child(2){
              font-size:14px;
              line-height:40px;
            }
          }
          .text-p{
            line-height:30px;
            font-size:14px;
            color:#666;
            font-weight:700;
          }
          .num-p{
            position: absolute;
            right:40px;
            top:35px;
          }
          .num-p ::v-deep .el-progress__text {
            margin-left:0!important;
            font-size:12px!important;
          }
          .num-p ::v-deep svg path:first-child {
            stroke: #cccccc !important; /* 修改为红色 */
          }
        }
      }
    }
    .right-max-big-box{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      width:740px;
      border-radius:10px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
      margin:20px 20px 20px 0;
      .big-content-box-1{
        flex:1;
        .for-big-box{
          margin:12px 0 0 20px;
          display: inline-block;
          width:346px;
          border-radius:6px;
          overflow: hidden;
          position: relative;
          img{
            width:346px;
            height:180px;
            display: block;
            overflow: hidden;
            margin: 0;
            padding: 0;
          }
          .text-box{
            background-color: rgba(1, 131, 250, 0.1);
            p:nth-child(1){
              margin:0 20px;
              line-height:40px;
              color:#0183fa;
              font-size:16px;
              font-weight:700;
            }
            p:nth-child(2){
              margin:0 20px;
              line-height:20px;
              color:#333;
              font-size:14px;
              padding-bottom:10px;
            }
            p:nth-child(3){
              position: absolute;
              bottom:10px;
              right:10px;
              background-color: #999;
              color:#fff;
              font-size:14px;
              border-radius:4px;
              line-height: 24px;
              width: 60px;
              text-align: center;
            }
            .colorA{
              background-color: #0183fa!important;
              color:#fff!important;
            }
          }
        }
      }
    }
    .big-title-box{
      display: flex;
      height:60px;
      padding:0 20px;
      p{
        line-height:60px;
        font-size:16px;
        font-weight: 700;
      }
      p:nth-child(1){
        flex:1;
      }
      p:nth-child(2){
        cursor: pointer;
        color:#0183fa;
      }
    }
    .big-content-box{
      flex:1;
      display: flex;
      flex-direction: column;
      .null-p{
        text-align: center;
        line-height:200px;
        color:#999;
        font-size:14px;
      }
    }
  }
}
</style>
