<template>
  <div class="study-index" v-loading="loading">
    <Remark>
      1.学员个人中心首页，当前简单，后续会美化<br/>
      2.<br/>
      3.<br/>
    </Remark>
    <!-- <div style="display: flex;justify-content:space-between; padding: 10px;">
      <div style="display: flex;justify-content: flex-start;">
        <div><el-input v-model="params.name" placeholder="查询名称"></el-input></div>
        <div style="padding-left: 10px;">
          <el-select v-model="params.type" clearable placeholder="请选择">
            <el-option label="微课" value="1"></el-option>
            <el-option label="在线课" value="2"></el-option>
         </el-select>
        </div>
        <div style="padding-left: 10px;">
          <el-button type="primary" icon="el-icon-search">查询</el-button>
        </div>
      </div>
      <div>
        <el-badge :value="2" class="uc-badge">
          <el-button >未开始</el-button>
        </el-badge>
        <el-badge :value="3" class="uc-badge">
          <el-button >学习中</el-button>
        </el-badge>
        <el-badge :value="1" class="uc-badge" type="primary">
          <el-button >已完成</el-button>
        </el-badge>
      </div>
    </div> -->
    <!--课程列表内容-->
    <div>
      <!-- <div v-if="lastStudy.itemId && lastStudy.itemId!=''">
        <p class="title"><i class="el-icon-caret-right"></i> 上次学习</p>
        <div>
          <div>
            <span>【{{getCourseType(lastStudy.courseType)}}】 {{lastStudy.courseName}}, </span>
            <span style="margin: 0px 10px;"> {{lastStudy.lastTime}}  </span>
            <span> {{lastStudy.contentName}}  </span>
            <span style="margin: 0px 10px;">
                <el-link type="primary" :href="continueStudy(lastStudy)" target="_blank">继续学习</el-link>
            </span>
          </div>
        </div>
      </div> -->
    </div>
     <div>
      <div>
        <!-- <p class="title">
          <router-link to="/uc/study/courses"><i class="el-icon-caret-right"></i> 正在学习</router-link>
          <span v-if="couresList.length>5" class="more"><router-link to="/uc/study/courses">更多&nbsp;></router-link></span>
        </p> -->
        <div>
          <!-- <div v-if="couresList.length>0" style="">

          </div> -->
          <!-- <div v-else style="text-align: center;padding: 20px;color: #ffaa00;">目前您没有正在学习的课程</div> -->
        </div>
      </div>
    </div>

      <div>
      <div>
        <!-- <p class="title">
          <router-link to="/uc/study/task"><i class="el-icon-caret-right"></i> 正在进行的任务</router-link>
          <span v-if="taskList.length>5" class="more"><router-link to="/uc/study/task">更多&nbsp;></router-link></span>
        </p> -->
        <div>
          <!-- <div v-if="taskList.length>0">

           </div> -->
           <!-- <div v-else style="text-align: center;padding: 20px;color: #ffaa00; ">目前您没有正在进行的任务</div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import studyItem from '@/components/Course/studyItem.vue'
  import apicourseStudy  from '@/api/modules/courseStudy.js';
  import apiBoeCourse from '@/api/boe/course.js';
  import {resListMap, resOwnerListMap,courseType,getType} from '@/utils/tools.js';
  import apiBoe  from '@/api/boe/boeApiAjax.js';
  import axios from 'axios'
  import { mapGetters,mapActions} from 'vuex';
  export default {
    name: 'ucStudyIndex',
    components:{studyItem},
    data(){
        return {
          loading:false,
          lastTabName:'course',
          getCourseType:courseType,
          lastStudy:{
            aname: "",
            contentId: "",
            contentName: "",
            contentType: 0,
            courseId: "",
            courseName: "",
            courseType: "",
            coverImg: "",
            itemId: "",
            lastStudyTime: 0,
            lastTime: "",
            progress: 100,
            score: "",
            studyDuration: "",
            studyId: "",
          },
          params:{
            pageIndex: 1,//第几页
            pageSize: 5,
            isFinish:false,
          },
          couresList:[],
          couresCount:0,
          taskList:[]
        }
    },
    beforeCreate() {
      this.loading = true;
      let params={
          // keyword:this.keyword,
          page:1,
          size:10,
          // cmtask_status:this.cmtask_status,
          // cmtask_name:this.cmtask_name,
        }
      apiBoeCourse.cmtaskList(params).then(res=>{
        if(res.status==200){
           this.total = res.result.count
           this.couresList = res.result.list;
           this.loading = false;
           if(res.result.count > 0) {
              this.$router.push('/uc/study/task')
           } else {
             if(this.$route.query.study == '1') {
                this.$router.push('/uc/study/task')
             } else {
                this.$router.push('/uc/study/courses')
             }
           }
         }else{
            this.$router.push('/uc/study/courses')
         }
          // this.pageData.list = res.result.list;
      }).catch(err=>{
        this.$router.push('/uc/study/courses');
      })
    },
    created() {
      //this.$router.push('/uc/study/courses');
      // this.searchData();
      // this.getLastStudy();
      // this.loadRemoteTask();
      // this.loadResOwners();
      // this.loadSysTypes();

    },
    methods:{
      continueStudy(item){
        if(item.courseType==10){
          return '../course/micro?id='+item.courseId
        }else{
          return '../course/studyindex?id='+item.courseId
        }
      },
      ...mapActions({
        getResOwnerTree:'resOwner/getResOwnerTree',
        loadResOwners:'resOwner/loadResOwners',
        getSysTypeTree:'sysType/getSysTypeTree',
        loadSysTypes:'sysType/loadSysTypes'
      }),
      getLastStudy() {
        apicourseStudy.lastStudy().then(res=>{
        if(res.status === 200) {
          this.lastStudy=res.result;
        } else {
          this.$message.error(res.message);
        }
      })
      },
      loadRemoteTask(){
         //调用远程接口
         // let url="http://u.boe.com/api/b1/system/cmtask/cmtask-list";
         // let jsonData={
         //   cmtask_status:'',
         //   cmtask_name:'',
         //   page:1,
         //   size:10
         // }
         // axios.post(url,jsonData).then(rs=>{
         //   console.log(rs)
         // })
         // apiBoe.postJson(url,jsonData).then(rs=>{
         //   if(rs.status==200){

         //   }
         // })
      },
     searchData() {
      apicourseStudy.myStudyList(this.params).then(res=>{
        if(res.status === 200) {
           this.couresList =res.result.list;
           this.couresCount = res.result.count;
        } else {
          this.$message.error(res.message);
        }
      })
    },
      lastTabChange(tab,event){
        console.log(tab.name);
      }
    }
  }
</script>

<style scoped lang="scss">
.study-index{
  .title{
    padding: 6px 10px;
    font-size: 16px;
    font-weight: 700;
    color: #707070;
    border-bottom: 1px solid #dedede;
  }
   .more {
      float: right;
      margin-top: 7px;
      color: #666666;
      font-size: 14px;
    }
}

  .uc-badge{
    margin-top: 10px;
    margin-right: 40px;
  }
  .uc-course{
    display: flex;
    justify-content: space-around;
    border: 1px solid #F0F0F0;
    padding: 10px;
    .uc-course-img{
      width: 200px;
      img{
        width: 200px;
        border: 1px solid #F4F4F5;
      }
    }
    .uc-course-info{
      flex: 1;
      line-height: 28px;
      padding: 0px 10px;
      .uc-course-name{
        font-size: 18px;
        font-weight: 700;
      }
      .uc-course-text{
        color: #747474;
      }
    }
    .uc-course-btns{
      width: 150px;
    }
  }
</style>
