<template>
  <ks-page-scroll-container
    :page="page"
    :page-count="pageCount"
    @page-change="getMyRoomList"
    class="app"
  >
    <div class="my-exam">
      <router-link class="my-exam__aa" to="/user/myClassroom">我的班级</router-link>
      <router-link class="my-exam__a" to="/user/myCourse">我的课程</router-link>
      <router-link class="my-exam__a" to="/user/myExam">练习中心</router-link>
    </div>
    <div style="padding:0 14px">
      <div
        class="mylist"
        v-for="(item,index) in list"
        :key="item.id"
        @click="getMyClassroomDetail(index,item.get_viewurl)"
      >
        <div class="mylist-content">
          <div class="mylist-content__title">{{item.title}}</div>
          <div class="mylist-content__statistical">
            已学习
            <span class="mylist-content__statistical__span">{{item.has_coursecount}}</span>
            门/共{{item.coursecount}}门
          </div>
          <van-progress
            class="mylist-content__progress"
            :show-pivot="false"
            color="#f44"
            :percentage="parseInt(item.has_learnpercent*100)"
          />
        </div>
      </div>
      <!-- 无数据提示 -->
      <Nodata v-if="showNodata"/>
    </div>
  </ks-page-scroll-container>
</template>
<script>
import { GetMyRoomList } from "@/api/user";
export default {
  name: "MyClassroom",
  data() {
    return {
      list: [],
      page: 1,
      pageCount: null,
      showNodata: false,
    };
  },
  methods: {
    getMyRoomList(p = 1) {
      //获取班级列表
      this.show2 = true;
      if (p == 1) {
        this.list = [];
      }
      GetMyRoomList({
        page: p,
        pagesize: 10
      }).then(res => {
        if(res.result){
          this.list = this.list.concat(res.data);
          this.list.has_learnpercent = Number(this.list.has_learnpercent);
          this.pageCount = res.pagecount;
          this.page = p;
          this.showNodata = false
        }else{
          this.list = []
          this.showNodata = true
        }
        
      });
    },
    getMyClassroomDetail(index, url) {
      localStorage.classroomDetail = JSON.stringify(this.list[index]);
      window.location.href = url
    }
  },
  created() {
    this.getMyRoomList();
  },
  activated() {
    document.title = "我的班级";
  }
};
</script>
<style scoped>
.middlep {
  background-color: #fff;
  width: 100%;
  height: 180px;
  margin-top: 6px;
  border-radius: 10px;
}
.my-exam {
  height: 44px;
  line-height: 44px;
  background-color: #fff;
}
.my-exam__a {
  font-size: 16px;
  margin: 0 10px 0 20px;
  line-height: 40px;
  color: rgba(51, 51, 51, 1);
  margin-top: 14.5px;
}
.my-exam__aa {
  font-size: 16px;
  margin: 0 10px 0 20px;
  color: rgba(251, 110, 82, 1);
}
.mylist {
  margin-top: 10px;
  background-color: #fff;
  width: 100%;
  height: 100px;
  border-radius: 5px;
}
.mylist-content {
  padding: 15px;
}
.mylist-content__title {
  font-size: 15px;
  float: left;
  font-weight: bold;
}
.mylist-content__vtitle {
  font-size: 13px;
  float: right;
  margin-top: 2.7px;
}
.mylist-content__statistical {
  margin-top: 30px;
  clear: both;
  font-size: 13px;
  color: rgba(153, 153, 153, 1);
}
.mylist-content__progress {
  margin-top: 10px;
}
.mylist-content__statistical__span {
  color: #f45050;
  font-size: 13px;
}
.van-progress {
  height: 5px;
  position: relative;
  border-radius: 5px;
  background: #fddcdc;
}

</style>


