<template>
  <div class="m-right-block fr mh576">

    <div class="right-block-bd ng-scope" ui-view="myStudyContent" style="position: relative;">
      <div class="panel-tit clear">
        <p class="fl">学时证明</p>
      </div>

      <ul class="m-course-list clear mt10 ng-scope" v-if="total>0">
        <li v-for="item in list" :key="item.courseId" class="ng-scope" @click="gotoPlay(item.courseId)">

          <div class="course-bd">
            <div class="course-img"><img :src="item.tb" alt=" ">
              <div class="year-label ng-binding" ng-bind="item.year">{{item.nd}}</div>
            </div>

            <a href="javascript:void(0)" class="course-name ng-binding">
              {{item.name}}
            </a>
            <div class="course-info clear">
              <div class="w1 fl ng-binding" style="width:60%" ng-bind="item.subject"></div>
              <div class="fr"><span class="txt-gr ng-binding" ng-bind="item.credit">{{item.xs}}</span>学时</div>
            </div>
          </div>
        </li>
      </ul>

      <el-pagination class="m-pages" @current-change="handleCurrentChange" :current-page="page" :page-size="size"
        layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {
    httpServer
  } from "@/components/httpServer/httpServer.js";
  export default {
    name: "Index",
    data() {
      return {
        page: 1,
        size: 12,
        total: 1,
        list: [],
        listLoading: false
      };
    },
    beforeMount() {
      this.getData()
    },
    methods: {
      handleCurrentChange: function(currentPage) {
        this.page = currentPage;
        this.getData()
      },
      gotoPlay( courseId ){
        const { href } = this.$router.resolve({
            name: "播放视频",
            path: '/play/'+ courseId
        });
        window.open(href, '_blank');
      },
      getData() {
        let {
          page,
          size
        } = this
        let param = {
          from: (page - 1) * size,
          size
        }
        httpServer('course.getUserCourseList', param).then(({
          data,
          code
        }) => {
          this.list = data.list || 0;
          this.total = data.total || 0;
        })
      },
    }
  }
</script>

<style>
  @import url("./index.css");
  @import url("../../../assets/css/course.css");
  @import url("../../../assets/css/m-screen.css");
</style>
