<!-- 用户信息卡片 -->
<template>
  <div class="user-info-card">
    <div class="top-title-box">
      <p>用户信息卡</p>
      <p>当前推荐资料类型：{{textName}}</p>
    </div>
    <div class="user-info-max-box">
      <div class="left-max-box">
        <div class="left-min-box">
          <p>姓名</p>
          <p>{{userInfo.data1}}</p>
        </div>
        <div class="left-min-box">
          <p>学工号</p>
          <p>{{userInfo.data2}}</p>
        </div>
        <div class="left-min-box">
          <p>类型</p>
          <p>{{userInfo.data3}}</p>
        </div>
        <div class="left-min-box">
          <p>所属单位</p>
          <p>{{userInfo.data4}}</p>
        </div>
        <div class="left-min-box">
          <p>实验室信息</p>
          <p>{{userInfo.data5?userInfo.data5:'暂无绑定实验室'}}</p>
          <p @click="bindingSubButton()">去绑定</p>
        </div>
      </div>
      <div class="center-max-box">
        <div class="center-title-box scrollbar-x-box">
          <p :class="index == checkUserIndex?'check-title-p':''"
             @click="checkTitleButton(index)"
            v-for="(item,index) in userInfo.data6" :key="index">{{item.dataName}}</p>
        </div>
        <div class="center-data-box">
          <div class="progress-max-box" v-if="checkUserInfo.dataMax">
            <el-progress
              :stroke-width="12" :format="format"
              :percentage="checkUserInfo.dataNum">
            </el-progress>
            <div class="progress-min-box">
              <p>{{checkUserInfo.dataText}}</p>
              <p>{{checkUserInfo.dataMin}} / {{checkUserInfo.dataMax}} 学时</p>
            </div>
          </div>
          <div class="center-bottom-box">
            <div class="center-bottom-min-box">
              <p>{{checkUserInfo.dataMax>0?'学时完成度':'学时要求'}}</p>
              <p>{{checkUserInfo.dataMax>0?checkUserInfo.dataNum+'%':'无'}}</p>
            </div>
            <div class="center-bottom-min-box">
              <p>目标考试</p>
              <p>{{checkUserInfo.dataTarget}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="right-max-box">
        <p class="right-title-p">当前学年任务状态</p>
        <div class="right-big-box">
          <p>考试状态</p>
          <p :class="userInfo.data7==0?'':(userInfo.data7==1?'color-a':(userInfo.data7==2?'color-b':''))">
            {{userInfo.data7==0?'暂无':(userInfo.data7==1?'已通过':(userInfo.data7==2?'未通过':''))}}
          </p>
        </div>
        <div class="right-big-box">
          <p>证书状态</p>
          <p :class="userInfo.data8==0?'':(userInfo.data8==1?'color-a':(userInfo.data8==2?'color-b':''))">
            {{userInfo.data8==0?'暂无':(userInfo.data8==1?'已通过':(userInfo.data8==2?'未通过':''))}}
          </p>
        </div>
        <div class="right-big-box">
          <p>审批状态</p>
          <p :class="userInfo.data9==0?'':(userInfo.data9==1?'color-a':(userInfo.data9==2?'color-b':''))">
            {{userInfo.data9==0?'待绑定':(userInfo.data9==1?'已通过':(userInfo.data9==2?'未通过':''))}}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserInfoCard',
  data() {
    return {
      textName:'应知应会通识',
      userInfo: {
        data1:'Name',
        data2:'20261001',
        data3:'硕士研究生',
        data4:'学院Name',
        data5:'',
        data6:[
          {
            dataName:'2025 - 2026',
            dataText:'当前学年学时完成进度',
            dataMin:0,
            dataMax:0,
            dataNum:75,
            dataTarget:'分级考试',
          },
          {
            dataName:'| 级实验室',
            dataText:'当前学年学时完成进度',
            dataMin:6,
            dataMax:10,
            dataNum:75,
            dataTarget:'应知应会考试',
          },
          {
            dataName:'| 级实验室',
            dataText:'当前学年学时完成进度',
            dataMin:6,
            dataMax:10,
            dataNum:75,
            dataTarget:'应知应会考试',
          },
        ],
        data7:0,
        data8:1,
        data9:2,
      },
      checkUserInfo: {
        dataName:'2025 - 2026',
        dataText:'当前学年学时完成进度',
        dataMin:0,
        dataMax:0,
        dataNum:75,
        dataTarget:'分级考试',
      },
      checkUserIndex:0,
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    //切换选项卡
    checkTitleButton(index){
      if(this.checkUserIndex != index){
        this.$set(this,'checkUserIndex',index);
        this.$set(this,'checkUserInfo',JSON.parse(JSON.stringify(this.userInfo.data6[index])));
      }
    },
    //绑定实验室按钮
    bindingSubButton(){

    },
    //进度条去除描述
    format(percentage) {
      return '';
    }
  },
}
</script>

<style scoped lang="scss">
.user-info-card {
  background: #fff;
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  .top-title-box{
    display: flex;
    p{
      flex:1;
      line-height:20px;
    }
    p:nth-child(1){
      font-size:16px;
      font-weight:700;
    }
    p:nth-child(2){
      text-align: right;
      font-size:14px;
      font-weight:700;
    }
  }
  .user-info-max-box{
    display: flex;
    margin-top:20px;
    .left-max-box{
      width:460px;
      height:290px;
      border-radius:6px;
      border:1px solid #dedede;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
      padding:20px 20px 0 20px;
      .left-min-box:nth-child(odd){
        margin-right:20px;
      }
      .left-min-box{
        display: inline-block;
        overflow:hidden;
        width:198px;
        margin-bottom:15px;
        p{
          line-height:30px;
        }
        p:nth-child(1){
          font-size:14px;
          color:#666;
        }
        p:nth-child(2){
          font-size:16px;
          font-weight:700;
          display:block;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }
        p:nth-child(3){
          font-size:16px;
          font-weight:700;
          color: #0183fa;
          cursor: pointer;
        }
      }
    }
    .center-max-box{
      width:430px;
      height:290px;
      border-radius:6px;
      border:1px solid #dedede;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
      padding:20px;
      margin:0 20px;
      .center-title-box{
        height:50px;
        p{
          display: inline-block;
          border:1px solid #999;
          color:#999;
          border-radius:6px;
          padding: 0 15px;
          height:32px;
          line-height:30px;
          margin-right:10px;
          cursor: pointer;
        }
        .check-title-p{
          color:#fff;
          border:1px solid #0183fa;
          background-color: #0183fa;
        }
      }
      .center-data-box{
        .progress-max-box ::v-deep .el-progress-bar{
          padding:0;
        }
        .progress-max-box{
          height:90px;
          margin-top:20px;
          .progress-min-box{
            display: flex;
            p{
              font-size:16px;
              font-weight:700;
              line-height:60px;
            }
            p:nth-child(1){
              flex:1;
            }
          }
        }
        .center-bottom-box{
          display: flex;
          .center-bottom-min-box:nth-child(1){
            margin-right:10px;
          }
          .center-bottom-min-box{
            background-color: rgba(1,131,250,0.1);
            padding:10px 20px;
            border-radius:6px;
            width:188px;
            p{
              line-height: 30px;
            }
          }
        }
      }
    }
    .right-max-box{
      flex:1;
      height:290px;
      border-radius:6px;
      border:1px solid #dedede;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
      padding:20px;
      .right-title-p{
        font-size:16px;
        font-weight:700;
        line-height:30px;
        padding-left:20px;
        margin-bottom:30px;
      }
      .right-big-box{
        background-color: #E9E9E9;
        border-radius:6px;
        margin-bottom:10px;
        display: flex;
        height: 40px;
        padding:0 20px;
        p:nth-child(1){
          flex:1;
          line-height:40px;
        }
        p:nth-child(2){
          width:80px;
          height:30px;
          line-height:30px;
          margin:5px 20px 0 0;
          text-align: center;
          border-radius:15px;
          background-color: #EBF0F5;
        }
        .color-a{
          background-color: #E6F5F0 !important;;
          color:#4D9775 !important;
        }
        .color-b{
          background-color: #EBCACE !important;;
          color:#E15263 !important;;
        }
      }
    }
  }
}
</style>
