<template>
  <div>
    <div style="display: flex;justify-content:space-between; padding: 12px 32px 10px 18px;">
      <div style="display: flex;justify-content: flex-start;">
        <span class="title-myqalist">我报名的</span>
        <div style="margin-left:5px">
          <el-select v-model="courseType" class="uc-select" clearable placeholder="类型">
            <el-option label="全部类型" value='1'></el-option>
            <!-- <el-option label="微课" :value="10"></el-option> -->
            <el-option label="录播课" :value="20"></el-option>
            <!-- <el-option label="在线课" value="online-course"></el-option> -->
            <!-- <el-option label="面授课" value="face-course"></el-option>
            <el-option label="学习项目" value="project"></el-option> -->
            <el-option label="线下课" :value="30"></el-option>
            <el-option label="学习项目" :value="40"></el-option>
         </el-select>
        </div>
        <el-select style="margin-left:12px" class="uc-select" v-model="status" clearable placeholder="学习进度">
          <el-option label="所有进度" value='0'></el-option>
          <el-option label="未开始" :value="1"></el-option>
          <el-option label="进行中" :value="2"></el-option>
          <el-option label="已完成" :value="9"></el-option>
          <!-- <el-option label="已停用" :value="3"></el-option> -->
        </el-select>
        <div style="padding-left: 12px;"><el-input class="uc-input" v-model="params.courseName" clearable placeholder="搜索名称"></el-input></div>
        <div style="padding-left: 12px;"><el-button type="primary" class="search-btn" icon="el-icon-search" @click="findStudys(true)">搜索</el-button></div>
        <div style="padding-left: 12px"><el-button type="primary" class="search-btn" icon="el-icon-refresh-right" @click="reset()">重置</el-button></div>
      </div>
    </div>
  <div class="uc-list" v-loading="loading">
    <div class="uc-course" v-for="(item,idx) in couresList" :key="idx">
      <div class="uc-course-img" style="width: 260px;height:144px" @click="jumpRouter(item)">
        <course-image :course="item"></course-image>
        <div class="uc-type">
          <span v-if="item.courseType==10">录播</span>
          <span v-if="item.courseType==20">录播</span>
          <span v-if="item.courseType==30">线下课</span>
          <span v-if="item.courseType==40">学习项目</span>
          </div>
      </div>
      <div class="uc-course-info" @click="jumpRouter(item)">
        <div class="uc-course-name" style="cursor: pointer;">

         <div style="flex:1;">
           <a v-html="$keywordActiveShow(item.courseName,params.courseName)" class="uc-title two-line-ellipsis"></a>
         </div>
        </div>
        <div style="padding-top:6px" class="uc-course-text"><i class="el-icon-time" style="margin-right:4px"></i>报名时间：{{ formatsec(Number(item.startTime)  * 1000 )}}</div>
        <div style="width: 80%;margin-top: 20px;display: flex;">
          <div style="color: #333333;font-size: 14px;">当前进度：</div>
          <div style="width:170px;padding-top: 5px;">
            <el-progress :percentage="item.progress" color="#FFA050"></el-progress>
          </div>
        </div>
      </div>
      <div class="uc-course-btns">
          <div style="text-align: right;">
            <!-- <el-button class="del" @click.stop="delItem(item,idx)" type="text" icon="el-icon-delete" size="mini" title="删除"></el-button> -->
            <el-dropdown trigger="click" style="display: none;">
               <span class="el-dropdown-link">
                   <svg-icon style="margin-right: 0;font-size:26px;" icon-class="spot"></svg-icon>
               </span>
               <el-dropdown-menu slot="dropdown" class="dropdown-box">
                   <el-dropdown-item command="a">
                     <el-button class="del" @click.stop="delItem(item,idx)" type="text" icon="el-icon-delete" size="mini" title="删除"></el-button>
                    </el-dropdown-item>
               </el-dropdown-menu>
           </el-dropdown>
          </div>
          <span  @click.stop="jumpRouter(item)">
            <!-- <el-button style="margin-top:30px" v-if="item.progress==0" type="primary" size="small">开始学习</el-button> -->
            <el-button style="margin-top:30px" v-if="item.progress<100" type="primary" size="small">继续学习</el-button>
            <el-button style="margin-top:30px" v-if="item.progress==100" type="primary" size="small">回顾</el-button>
          </span>
      </div>
    </div>
      <div v-if="couresList.length > 0 " style="text-align: center;margin-top:57px;">
          <el-pagination background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageIndex"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.count">
          </el-pagination>
      </div>
      <div class="list-wu">
        <div v-if="loading"> <span>加载中...</span> </div>
        <div v-else class="home-no-list">
            <div v-if="page.count==0 && !loading">
              <div v-if="isSearch">
                <p class="text" style="color: #333333;margin-top:50px;font-size: 14px">未找到您要搜索的内容</p>
              </div>
              <div v-else >
                 <img  class="img" style="width:360px;height:226px" :src="`${webBaseUrl}/images/homeWu/no-madel.png`" alt="" srcset="">
                  <p class="text" style="color: #333333;margin-top:50px;font-size: 14px">您还没有报名课程哦～</p>
              </div>
            </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 apiManage from '@/api/manage/manage.js';
import studyImage from '@/components/Course/studyImage.vue';
import courseImage from "@/components/Course/courseImage.vue";
import {formatsec} from '@/utils/datetime.js'
export default {
  name: 'ucStudyCourses',
  components: { studyItem,studyImage,courseImage },
  data() {
    return {
      courseType: '',
      status: '',
      formatsec:formatsec,
      isSearch:false,
      loading: true,
      fileUrl:process.env.VUE_APP_FILE_BASE_URL,
      page: {
        pageIndex: 1,//第几页
        pageSize: 10, // 每页多少条
        count: 0
      },
      dataList: [],//总数据
      isNextPage: false,
      isListOne: true,
      params: { courseName: '', courseType: '',status:''},
      couresList: [],//显示的数据
    };
  },
  mounted() {
      this.findStudys(true);
  },
  methods: {
    delItem(item,itemIdx){
      this.$confirm('您确定要删除所选课程吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() =>{
            if(item.source==1){ //老系统删除
               //this.$message({ type: 'error', message: '此类型的报名删除还无对接接口'});
               apiBoeCourse.newDelLearning(item.courseId).then(res=>{
                  if(res.status==200){
                    this.$message({ type: 'success',center: true, message: '课程删除成功!' });
                    this.couresList.splice(itemIdx,1);
                  } else {
                    this.$message({ type: 'error', message: res.message });
                  }
               });
            }else if(item.source==2){ //本地删除
                apiCourseStudy.deleteSignUp(item.id,item.courseId).then(res =>{
                  if(res.status==200){
                    this.$message({ type: 'success', message: '删除成功!' });
                    this.couresList.splice(itemIdx,1);
                  } else {
                     this.$message({ type: 'error', message: res.message });
                  }
                })
            }else if(item.source==3){ //管理端删除
               var reqData={ pid:item.courseId, student:item.accountId  }
               apiManage.userDeleteStudy(reqData).then(res=>{
                  if(res.code==200){
                    this.$message({ type: 'success', message: '删除成功!' });
                    this.couresList.splice(itemIdx,1);
                  }else{
                    this.$message({ type: 'error', message: '删除失败!' });
                  }
               })
            }else{
               this.$message({ type: 'error', message: '此报名未关联源，请与管理员联系'});
            }

      })
  },
  findStudys(flag){ //新的
      if(flag){
        this.page.pageIndex=1;
      }
      this.isSearch=false;
      let reqData={
        courseName:this.params.courseName,
        courseType:this.courseType,
        status:this.status,
        progress:'',
        pageIndex:this.page.pageIndex,
        pageSize:this.page.pageSize
      }
      if(reqData.courseName || reqData.courseType || reqData.status){
        this.isSearch=true;
      }
      this.loading=true;
      apiCourseStudy.myStudysFromES(reqData).then(res=>{
        if(res.status==200){
            this.couresList=res.result.list;
            this.page.count=res.result.count;
        }else{
          this.$message({ type: 'error', message: res.message });
        }
        this.loading=false;
      })
  },

    jumpRouter(item) {
      if(item.source==1){
        location.href=`${this.webBaseUrl}/course/boeframe?id=${item.courseId}&type=${item.courseType}`
      }else if(item.source==2){
        this.$router.push({path:'/course/studyindex',query:{id:item.courseId}})
      }else if(item.source==3){
        //管理端跳转,只有30，没有40了
        //let params=encodeURIComponent('routerId='+courseId);
        //this.$router.push('/forward?to=/fe-student/pathdetails&params='+params);
        let manageApi=process.env.VUE_APP_MANAGER_API_PATH;
        let uparams=encodeURIComponent('courseId='+item.courseId);
        this.$router.push('/forward?to='+manageApi+'/stu/project/redirectDetail&params='+uparams);
      } else {
          console.log('未识别的来源 '+item.source);
      }
    },
    reset(){
       this.params.courseName = '',
       this.params.courseType = '',
       this.params.status = '';
       this.page.pageIndex = 1;
       this.couresList = this.dataList;
       this.courseType = '';
       this.status = '';
       this.findStudys();
    },
    handleSizeChange(val) {
        this.page.pageSize = val;
        this.page.pageIndex = 1;
        this.findStudys();
    },
    handleCurrentChange(val) {
      this.page.pageIndex = val;
      this.findStudys();
    },
  }
};
</script>

<style scoped lang="scss">
.title-myqalist{
  font-size: 18px;
  color: #333333;
  font-weight: 600;
  line-height: 35px;
  margin-right: 30px;
}
.uc-title{
  word-break:break-all;
  float: left;
}
.two-line-ellipsis{
 //  display: -webkit-box;
  // white-space:pre-wrap;
  overflow: hidden;
  line-height: 30px;
  text-overflow:ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  box-sizing: border-box;
}
 .del{
      color: #8590A6;
      // margin-left: 70%;
      font-size: 14px;
    }
.uc-list{
  padding-left: 22px;
  margin-top: 30px;
}
.uc-course-type1{
  width: 58px;
  height: 26px;
  font-size: 14px;
  line-height: 26px;
  text-align: center;
}
.uc-course-type2{
  width: 58px;
  height: 26px;
  font-size: 14px;
  line-height: 26px;
  text-align: center;
}
.uc-course-type3 {
    padding: 3px 15px;
    background: #08a890;
    color: #fff;
    font-size: 14px;
    border-radius: 2px
  }
  .uc-course-type4 {
    width: 58px;
    height: 26px;
    padding: 3px 15px;
    background: #75aefe;
    color: #fff;
    font-size: 14px;
    border-radius: 2px
  }
.list-wu{
  text-align: center;
  font-size: 20px;
  margin-top: 70px;
  color: #ccc;
}
  .is-more{
    margin-top: 10px;
    text-align: center;
    height: 50px;
    span{
      padding: 10px 20px;
      border: 1px solid #ccc;
      border-radius: 20px
    }
  }
.uc-badge {
  margin-top: 10px;
  margin-right: 40px;
}
.uc-course {
  display: flex;
  justify-content: space-around;
  // border-bottom: 1px solid #E8E8E8;
  margin-right: 32px;
  padding: 20px 0px 25px  0px ;
  cursor: pointer;
  .uc-course-img {
    position: relative;
    width: 260px;
   ::v-deep img {
      // width: 200px;
      // border: 1px solid #f4f4f5;
      border-radius: 8px;
    }
    .uc-type{
      position: absolute;
      top: 0;
      right:0;
      width: 60px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      background: #F99000;
      border-radius: 2px 4px 2px 16px;
      color: #fff;
      font-size: 12px;
      font-weight: 600;
    }
  }
  .uc-course-info {
    flex: 1;
    margin-top: -3px;
    line-height: 28px;
    padding: 0px 25px;
    .uc-course-name {
      display: flex;
      span{
        width: 58px;
        height: 26px;
        margin-right: 8px;
      }
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
    .uc-course-text {
      color: #666;
      font-size: 14px;
      margin-top: 19px;
    }
  }
  .uc-course-btns {
    // width: 150px;

  }
}
</style>
