<template>
  <div class="m-right-block mh576">
    <div class="right-block-bd ng-scope" ui-view="myStudyContent" style="position: relative;">
      <div class="text-xl leading-10 pb-4 text-blue">
        <p>我的课程</p>
      </div>

      <el-row class="mt-4" :gutter="48" v-if="list && list.length > 0">
        <el-col :span="8" v-for="(item) in list" :key="item.course_id">
          <el-card class="mb-6">
            <div class="h-48 overflow-hidden relative">
              <img :src="item.tb" class="image object-cover">
              <el-tag class="absolute right-2 top-2" type="success">
                <i class="el-icon-check text-xl"></i>
              </el-tag>
            </div>
            <div class="flex py-4 px-2 items-center justify-between">
              <span style="width: 250px;overflow: hidden;">{{item.name}}</span>
              <span style="color: #409EFF;width: 80px;" @click="gotoPlay(item.courseId)">进入学习</span>
            </div>
            <div class="py-2 px-6 text-sm flex">
              <div class="w-1/2 text-left">获得: {{item.getXs/10}}学时</div>
              <div class="w-1/2  text-right">年度: {{item.nd||'2022'}}</div>
            </div>
<!--            <div class="py-2 px-6 text-sm">
              获得: {{item.getXs/10}}学时
            </div> -->
            <div class="py-2 px-6 text-sm">
              总共: {{item.totalXs/10}}学时
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div v-else class="flex w-auto h-72 justify-center items-center text-gray-300 text-lg">
        暂无信息
      </div>

      <!-- <ul class="m-course-list clear mt10 classlist" v-if="total>0">
        <li v-for="(item,index) in list" :key="item.course_id" class="pt-sola mt20 pb10">
          <div>
            <span v-if="item.isFinish==1" class="p-ico2 ico-passed"></span>
            <div class="img">
              <img :src="item.tb">

              <div class="hover-block">
                <div class="mask-bg tc"></div>
                <el-button @click="gotoPlay(item.courseId)" class="ui-btn">进入学习</el-button>
              </div>
            </div>

            <div class="tit"><a>{{item.name}}</a></div>
            <div class="info">
               <p class="w1"><span class="p-ico c1"></span> {{item.type}}</p>
               <p class="w2"><span class="p-ico c2"></span>{{item.nd||'2020'}}</p>
               <p class="w1">
                <span class="p-ico c3"></span> 获得<strong style="color: orange;">{{item.getXs/10}}</strong>学时
               </p>
               <p class="w2" >
                 <span class="p-ico c3"></span> 总共 <strong style="color: orange;">{{item.totalXs/10}}</strong>学时
               </p>
            </div>
          </div>
        </li>
      </ul> -->

      <el-pagination v-if="total" 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";
  import { getMediaOptions} from "@/utils/index.js";
  export default {
    name: "Index",
    data() {
      return {
        page: 1,
        size: 6,
        total: 1,
        list: [],
        menus:{},
        info:{},
        options:{},
        media:{},
        playDialog: false,
        listLoading: false
      };
    },
    beforeMount(){
      this.getData()
    },
    methods: {
      handleCurrentChange: function(currentPage) {
        this.page = currentPage;
        this.getData()
      },
      gotoPlay( courseId ){
        this.$router.push({name:'play', params:{courseId}})
      },
      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>
