<template>
  <div>
    <div class="basicBox">
      <div class="allPer">
        <div class="allPerTop">
          <div class="perItem">
            <div>登录时长</div>
            <div>
              <el-tooltip
                effect="light"
                :content="data.loginTime"
                placement="top"
              >
                <div>{{ data.loginTime }}</div>
              </el-tooltip>
            </div>
          </div>
          <div class="perItem">
            <div>学习时长</div>
            <div>
              <el-tooltip
                effect="light"
                :content="data.studyTime"
                placement="top"
              >
                <div>{{ data.studyTime }}</div>
              </el-tooltip>
            </div>
          </div>
          <div class="perItem">
            <div>工具提交率</div>
            <div>
              <el-tooltip
                effect="light"
                :content="data.toolSubRate"
                placement="top"
              >
                <div>
                  {{ data.toolSubRate }}
                </div>
              </el-tooltip>
            </div>
          </div>
          <div class="perItem">
            <div>课堂平均得分</div>
            <div>
              <el-tooltip
                effect="light"
                :content="data.courseaScore"
                placement="top"
              >
                <div>
                  {{ data.courseaScore }}
                </div>
              </el-tooltip>
            </div>
          </div>
          <div class="perItem">
            <div>课堂平均得分班级排名</div>
            <div>
              <el-tooltip
                effect="light"
                :content="'第' + data.classIndex + '名'"
                placement="top"
              >
                <div>
                  {{ "第" + data.classIndex + "名" }}
                </div>
              </el-tooltip>
            </div>
          </div>
        </div>
        <!-- <div class="allPerBoottom">
          <div class="avaImg">
            <img src="../../../../assets/icon/myReport/courseStar.png" alt="" />

            <div class="sName">
              <el-tooltip effect="light" :content="data.sName" placement="top">
                <div>{{ data.sName }}</div>
              </el-tooltip>
            </div>
          </div>
          <div>课堂智慧星</div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["overPData"],
  data() {
    return {
      data: {},
    };
  },
  watch: {
    overPData: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.data = newValue;
        this.$forceUpdate();
      },
    },
  },
  mounted() {},
};
</script>

<style scoped>
.basicBox {
  height: 100%;
}
.allPer {
  width: 95%;
  margin: 0 auto;
}
.allPerTop {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 90%;
  margin: 0 auto;
  flex-wrap: wrap;
}
.perItem {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0 15px;
}
.perItem > div:nth-child(1) {
  font-size: 14px;
}
.perItem > div:nth-child(2) {
  border-radius: 50%;
  border: 1px solid #91ccff;
}
.perItem > div:nth-child(2) > div {
  width: 70px;
  height: 70px;
  background: #6ba9df;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 70px;
  margin: 2px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  padding: 5px;
  font-size: 12px;
}
.allPerTop > div:nth-child(2) > div:nth-child(2) {
  border: 1px solid #f9cb7d;
}
.allPerTop > div:nth-child(2) > div:nth-child(2) > div {
  background: #f9c56c;
}
.allPerTop > div:nth-child(3) > div:nth-child(2) {
  border: 1px solid #d19d9a;
}
.allPerTop > div:nth-child(3) > div:nth-child(2) > div {
  background: #e78686;
}
.allPerTop > div:nth-child(4) > div:nth-child(2) > div {
  background: #89dcbe;
}
.avaImg {
  width: 65px;
  height: 64px;
  margin-bottom: 5px;
  position: relative;
}

.avaImg > img {
  width: 100%;
  height: 100%;
}
.allPerBoottom {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  margin: 10px 0 0 0;
}
.allPerBoottom > div:nth-child(2) {
  font-size: 18px;
  color: #9f9f9f;
  margin-top: 1px;
}
.avaImg > .sName {
  position: absolute;
  width: 65px;
  height: 20px;
  color: #fff;
  background: #ffd257;
  text-align: center;
  line-height: 20px;
  bottom: -5px;
  left: -5px;
  border-radius: 10px;
  font-size: 14px;
  padding: 0 5px;
  cursor: pointer;
}
.avaImg > .sName > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
</style>