<!-- 工作台任务卡片 -->
<template>
  <div class="task-card">
    <div class="top-title-box">
      <p>工作台任务卡</p>
    </div>
    <div class="card-max-big-box">
      <div class="year-card-box for-max-big-box">
        <div class="year-card-top-title-box">
          <p>学年数据统计</p>
          <p>按学年统计历年考试通过情况与成绩</p>
          <p v-if="yearType">毕业报告</p>
        </div>
        <div class="bottom-content-box scrollbar-box">
          <div class="bottom-big-box-1" v-for="(item,index) in yearMinList">
            <p>{{item.yearMinListData1}}</p>
            <p>{{item.yearMinListData2==1?'进行中':(item.yearMinListData2==2?'通过丨'+item.yearMinListData3:(item.yearMinListData2==3?'未通过':''))}}</p>
          </div>
        </div>
      </div>
      <div class="study-card-box for-max-big-box">
        <div class="year-card-top-title-box">
          <p>学习任务</p>
          <p>待完成的学习任务</p>
        </div>
        <div class="bottom-content-box scrollbar-box">
          <div class="bottom-big-box-2" v-for="(item,index) in studyMinList">
            <p>{{item.studyMinListData1}}</p>
            <p >{{item.studyMinListData2}}丨{{item.studyMinListData2==1?'待完成':(item.studyMinListData3==2?'进行中':(item.studyMinListData3==3?'已完成':''))}}</p>
          </div>
        </div>
      </div>
      <div class="examination-card-box for-max-big-box">
        <div class="year-card-top-title-box">
          <p>模拟考试</p>
          <p>待完成的考前模拟练习</p>
        </div>
        <div class="bottom-content-box scrollbar-box">
          <div class="bottom-big-box-3" v-for="(item,index) in examinationMinList">
            <p>{{item.examinationMinListData1}}</p>
            <p >最高成绩 {{item.examinationMinListData2}}</p>
          </div>
        </div>
      </div>
      <div class="for-max-big-box" v-for="(item,index) in dataList" :key="index">
        <div class="year-card-top-title-box">
          <p>{{item.minListName}}</p>
          <p>满足前置条件后可参加考试</p>
        </div>
        <div class="bottom-content-box scrollbar-box">
          <div class="bottom-big-box-4" v-if="item.minListType1 == 0">
            <p>学时要求</p>
            <p class="colorA">开始学习</p>
          </div>
          <div class="bottom-big-box-4" v-if="item.minListType2 == 0">
            <p>考前学习</p>
            <p class="colorA">开始学习</p>
          </div>
          <div class="bottom-big-box-4" v-if="item.minListType3 == 0">
            <p>模拟考试</p>
            <p class="colorC" v-if="item.minListType1 == 0||item.minListType2 == 0">待完成学习任务后解锁</p>
            <p class="colorA" v-if="item.minListType1 == 1&&item.minListType2 == 1">开始考试</p>
          </div>
          <div class="bottom-big-box-4">
            <p>考试状态</p>
            <p class="colorC" v-if="item.minListType3 == 0">待通过模拟考试后解锁</p>
            <p class="colorA" v-if="item.minListType3 == 1 && item.minListType4 == 0">开始考试</p>
            <p class="colorB" v-if="item.minListType4 == 2">考试未通过</p>
          </div>
          <div class="bottom-big-box-4" v-if="item.minListType4 == 2">
            <p>参加补考</p>
            <p class="colorA" v-if="item.minListType5 == 0">开始考试</p>
            <p class="colorB" v-if="item.minListType5 == 2">考试未通过</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TaskCard',
  data() {
    return {
      //学年数据
      yearType:true,
      yearMinList:[
        {
          yearMinListData1:'2025-2026',
          yearMinListData2:'1',
          yearMinListData3:'99',
        },
        {
          yearMinListData1:'2025-2026',
          yearMinListData2:'2',
          yearMinListData3:'99',
        },
        {
          yearMinListData1:'2025-2026',
          yearMinListData2:'3',
          yearMinListData3:'99',
        },
      ],
      studyMinList:[
        {
          studyMinListData1:'课程任务名称',
          studyMinListData2:'来源单位',
          studyMinListData3:'1',
        },
        {
          studyMinListData1:'课程任务名称',
          studyMinListData2:'来源单位',
          studyMinListData3:'2',
        },
        {
          studyMinListData1:'课程任务名称',
          studyMinListData2:'来源单位',
          studyMinListData3:'3',
        },
      ],
      examinationMinList:[
        {
          examinationMinListData1:'试卷名称',
          examinationMinListData2:'40',
        },
        {
          examinationMinListData1:'试卷名称2',
          examinationMinListData2:'60',
        },
      ],
      dataList:[
        {
          minListName:'常规考试',
          minListType1:0,
          minListType2:0,
          minListType3:0,
          minListType4:0,
          minListType5:0,
        },
        {
          minListName:'常规考试',
          minListType1:0,
          minListType2:1,
          minListType3:1,
          minListType4:0,
          minListType5:0,
        },
        {
          minListName:'常规考试',
          minListType1:1,
          minListType2:0,
          minListType3:0,
          minListType4:0,
          minListType5:0,
        },
        {
          minListName:'常规考试',
          minListType1:1,
          minListType2:1,
          minListType3:0,
          minListType4:0,
          minListType5:0,
        },
        {
          minListName:'常规考试',
          minListType1:1,
          minListType2:1,
          minListType3:1,
          minListType4:0,
          minListType5:0,
        },
        {
          minListName:'常规考试',
          minListType1:1,
          minListType2:1,
          minListType3:1,
          minListType4:2,
          minListType5:0,
        },
        {
          minListName:'常规考试',
          minListType1:1,
          minListType2:1,
          minListType3:1,
          minListType4:2,
          minListType5:2,
        },
      ],
    }
  }
}
</script>

<style scoped lang="scss">
.task-card {
  background: #fff;
  border-radius: 6px;
  padding: 16px 0 0 0;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  .top-title-box{
    display: flex;
    flex-direction: column;
    padding-left:20px;
    p{
      flex:1;
      line-height:20px;
    }
    p:nth-child(1){
      font-size:16px;
      font-weight:700;
    }
    p:nth-child(2){
      font-size:14px;
    }
    p:nth-child(3){
      font-size:14px;
    }
  }
  .card-max-big-box{
    margin-top:20px;
    .year-card-box{

    }
    .study-card-box{

    }
    .examination-card-box{

    }
    .for-max-big-box{
      display: inline-block;
      width:360px;
      height:240px;
      margin: 0 0 20px 20px;
      border-radius:6px;
      border:1px solid #dedede;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      .year-card-top-title-box{
        padding:20px 20px 0 20px;
        position: relative;
        height:64px;
        p:nth-child(1){
          font-size:15px;
          font-weight:700;
          line-height:20px;
        }
        p:nth-child(2){
          font-size:14px;
          line-height:20px;
          margin-top:4px;

        }
        p:nth-child(3){
          cursor: pointer;
          font-size:14px;
          line-height:30px;
          background-color: #0183fa;
          color:#fff;
          border-radius:6px;
          position: absolute;
          top:10px;
          right:10px;
          padding:0 10px;
        }
      }
      .bottom-content-box{
        height:168px;
        margin-top:6px;
        padding:8px 14px 0 20px;
        .bottom-big-box-1{
          display: flex;
          background-color: rgba(1, 131, 250, 0.1);
          border-radius:6px;
          padding:12px 14px;
          margin-bottom:12px;
          height:68px;
          p{
            font-size:14px;
            line-height:44px;
          }
          p:nth-child(1){
            flex:1;
            font-size:15px;
            font-weight:700;
          }
          p:nth-child(2){
            width:80px;
            text-align: center;
          }
        }
        .bottom-big-box-2{
          background-color: rgba(1, 131, 250, 0.1);
          border-radius:6px;
          padding:12px 14px;
          margin-bottom:12px;
          height:68px;
          p{
            font-size:14px;
            line-height:22px;
          }
          p:nth-child(1){
            font-size:15px;
            font-weight:700;
          }
        }
        .bottom-big-box-3{
          background-color: rgba(1, 131, 250, 0.1);
          border-radius:6px;
          padding:12px 14px;
          margin-bottom:12px;
          height:68px;
          p{
            font-size:14px;
            line-height:22px;
          }
          p:nth-child(1){
            font-size:15px;
            font-weight:700;
          }
        }
        .bottom-big-box-4{
          background-color: rgba(1, 131, 250, 0.1);
          border-radius:6px;
          padding:12px 14px;
          margin-bottom:12px;
          height:68px;
          display: flex;
          p{
            font-size:14px;
            line-height:44px;
          }
          p:nth-child(1){

          }
          p:nth-child(2){
            flex: 1;
            text-align: right;
          }
          .colorA{
            color:#0183fa;
            cursor: pointer;
          }
          .colorB{
            color:#D9001B;
          }
          .colorC{
            color:#999;
          }
        }
      }
    }
  }
}
</style>
