<template>
  <div v-loading="isloading">
    <div class="si_head" v-if="Object.keys(userinfo).length">
      <img class="si_img" src="@/assets/portal.png" alt="" />
      <div class="si_content">
        <div>
          <span>姓名:</span><span>{{ userinfo.name }}</span>
        </div>
        <div>
          <span>班级:</span
          ><span>{{
            userinfo.classname ? userinfo.classname : "暂无班级"
          }}</span>
        </div>
        <div>
          <span>账号:</span><span>{{ userinfo.username }}</span>
        </div>
      </div>
    </div>
    <div class="si_course" v-if="Object.keys(userinfo).length">
      <div class="si_course_head">课程概况</div>
      <div class="si_course_content">
        <div class="si_course_box">
          <div>{{ ccount }}</div>
          <div>全部任务</div>
        </div>
        <div class="si_course_box">
          <div>{{ iscount }}</div>
          <div>已完成</div>
        </div>
        <!-- <div class="si_course_box">
          <div>{{ vcount }}</div>
          <div>进行中</div>
        </div> -->
        <div class="si_course_box">
          <div>{{ islearn }}</div>
          <div>待学习</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["userid", "courseid"],
  data() {
    return {
      userinfo: {},
      vcount: 0,
      iscount: 0,
      islearn: 0,
      ccount: 0,
      isloading: false,
    };
  },
  methods: {
    randomNum(minNum, maxNum) {
      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10);
          break;
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
          break;
        default:
          return 0;
          break;
      }
    },
    getInfo() {
      this.isloading = true;
      let params = {
        uid: this.userid,
        cid: this.courseid,
      };
      if (!this.userid) {
        return;
      }
      this.ajax
        .get(this.$store.state.api + "getUserInfo", params)
        .then((res) => {
          this.isloading = false;
          let chapters = JSON.parse(res.data[2][0].chapters);
          var tool = 0;
          for (var i = 0; i < chapters.length; i++) {
            for (
              var j = 0;
              j < chapters[i].chapterInfo[0].taskJson.length;
              j++
            ) {
              // 1、电子白板，3、思维导图，6协同文档，7思维网格 16、作业提交,40.项目-学生互评 41.项目-下拉选择题 42.项目-录音功能
              let _toolsAarry = [
                1, 3, 6, 7, 16, 15, 4, 40, 41, 42, 49, 50, 52, 32, 57,
              ];
              for (
                var k = 0;
                k < chapters[i].chapterInfo[0].taskJson[j].toolChoose.length;
                k++
              ) {
                if (
                  _toolsAarry.indexOf(
                    chapters[i].chapterInfo[0].taskJson[j].toolChoose[k].tool[0]
                  ) != -1
                ) {
                  tool++;
                }
              }
              // tool += chapters[i].chapterInfo[0].taskJson[j].toolChoose.length;
            }
          }
          this.userinfo = res.data[0][0];
          // this.ccount = res.data[1][0].ccount;
          this.ccount = tool;
          this.islearn = tool - parseInt(res.data[1][0].vcount);

          // let count = this.randomNum(0, parseInt(res.data[1][0].vcount));
          this.iscount = res.data[1][0].vcount;
          this.vcount = 0;
        })
        .catch((err) => {
          this.isloading = false;
          console.error(err);
        });
    },
  },
  watch: {
    userid(newValue, oldValue) {
      this.getInfo();
    },
  },
  created() {
    this.getInfo();
  },
};
</script>

<style scoped>
.si_head {
  display: flex;
  align-items: center;
  justify-content: center;
}

.si_img {
  width: 90px;
  height: 90px;
}

.si_content {
  width: calc(100% - 150px);
  margin-left: 15px;
  font-size: 14px;
}

.si_content div + div {
  margin-top: 10px;
}

.si_content div {
  display: flex;
}

.si_content span + span {
  margin-left: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 50px);
}

.si_course {
  width: calc(100% - 60px);
  margin: 0 auto;
  margin-top: 20px;
}

.si_course_head {
  margin-bottom: 10px;
}

.si_course_content {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.si_course_box div:nth-child(1) {
  font-size: 22px;
  text-align: center;
  font-weight: 700;
  color: rgb(47 70 136);
}

.si_course_box div:nth-child(2) {
  font-size: 14px;
  width: 60px;
  border: 1px solid rgb(140, 140, 140);
  text-align: center;
  padding: 1px 0;
  margin-top: 5px;
  color: rgb(67, 67, 67);
}
</style>