<script>
import {mapGetters} from "vuex";
import courseImage from "@/components/Course/courseImage.vue";
import {getCertificationProcess, getReviewResult, pageList} from "@/api/modules/lecturer"
export default {
  name: "index",
  components: {courseImage},
  data(){
    return{
      fileBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
      params: { teacherNo:'',courseName:'', pageNo: 1, pageSize: 10,  },
      total:'',
      // reviewResult 0-通过，1-未通过，2-进行中 3-已报名
      couresList:[
      ]
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted() {
    this.getList();
  },
  methods:{
    jumpRouter(teacherId){
      this.$router.push({
        path:'/need/draft',
        query:{teacherId:teacherId}
      })
    },
    // 列表
    getList(){
      this.params.teacherNo=this.userInfo.userNo
      pageList(this.params).then(res=>{
        this.couresList=res.data.page.records
        this.total=res.data.page.total
      })
    },
    // 搜索
    searchList(){
      this.params.pageNo = 1;
      this.getList();
    },
    // 重置
    closePageFind(){
      this.params.courseName = '';
      this.params.pageNo = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.params.pageNo = val;
      this.getList();
    },
    // 根据认证状态跳转页面
    getView(item){
      getCertificationProcess({teacherId:item.teacherId}).then(res=>{
        var data = res.data
        if(data.secondResult==0){
          if (data.endStatus==0){
            this.$router.push({
              path:'/need/twofinals',
              query:{teacherId:item.teacherId}
            })
          }else if (data.offlineTutoring==0){
            this.$router.push({
              path:'/need/twocoachingsuccess',
              query:{teacherId:item.teacherId}
            })
          }else if (data.offlineTutoring==1){
            this.$router.push({
              path:'/need/twocoaching',
              query:{teacherId:item.teacherId}
            })
          }
        }else if (data.secondResult==1){
          if (data.endStatus==0){
            this.$router.push({
              path:'/need/finalsuccess',
              query:{teacherId:item.teacherId}
            })
          }else if (data.offlineTutoring==0 && data.endStatus==1){
            this.$router.push({
              path:'/need/final',
              query:{teacherId:item.teacherId}
            })
          }else if (data.offlineTutoring==1 && data.onlineLearning==0){
            this.$router.push({
              path:'/need/coaching',
              query:{teacherId:item.teacherId}
            })
          }else if (data.onlineLearning==2 || data.onlineLearning==1){
            this.$router.push({
              path:'/need/onlinelearning',
              query:{teacherId:item.teacherId}
            })
          }
        }
      })
    },
    //查看认证记录
    getRecording(item){
      getCertificationProcess({teacherId:item.teacherId}).then(res=>{
        var data = res.data
        if (data.secondResult==0){
          this.$router.push({
            path:'/need/twofinals',
            query:{teacherId:item.teacherId}
          })
        }else {
          this.$router.push({
            path:'/need/finalsuccess',
            query:{teacherId:item.teacherId}
          })
        }
      })
    },
    //控制跳转
    getJump(item){
      if (item.reviewResult==1 || item.reviewResult==0){
        this.getRecording(item)
      }else if (item.reviewResult==2){
        this.getView(item)
      }else if (item.reviewResult==3){
        this.jumpRouter(item.teacherId)
      }
    }
  }
}
</script>

<template>
  <div>
    <div style="display: flex;justify-content:space-between;position: relative;">
      <div style="display: flex;justify-content: flex-start;  padding: 12px 32px 10px 12px;">
        <div style="margin-left:10px"><el-input v-model="params.courseName" placeholder="请输入认证课程名称" clearable ></el-input></div>
        <div style="padding-left: 10px;"><el-button type="primary" icon="el-icon-search" @click="searchList">搜索</el-button></div>
        <div style="padding: 0px 5px;"><el-button icon="el-icon-refresh-right" type="primary" @click="closePageFind">重置</el-button></div>
      </div>
    </div>
    <div v-if="this.couresList.length!=0">
      <div class="uc-course" v-for="(item, idx) in couresList" :key="idx" @click="getJump(item)">
        <div class="uc-course-img" style="width: 212px;height:119px">
           <img :src="item.cover">
        </div>
        <div class="uc-course-info">
          <div class="uc-course-name">
            <span class="ytg" v-if="item.reviewResult == 0">【已通过】</span>
            <span class="wtg" v-if="item.reviewResult == 1">【未通过】</span>
            <span class="jxz" v-if="item.reviewResult == 2">【认证中】</span>
            <span class="ybm" v-if="item.reviewResult == 3">【已报名】</span>
            <span style="font-size:18px;color:#333">{{ item.draftStatus==1?item.examineName:item.courseName }}</span>
          </div>
          <div class="summary-item">
            <div>{{ item.draftStatus==1?item.description:item.courseIntroduction  }}</div>
          </div>
          <div class="uc-course-text">
            {{ item.reviewResult==3||item.reviewResult==2?'报名时间':'认证时间' }}：{{ item.reviewResult==3||item.reviewResult==2?item.createTime:item.reviewTime }}
            <span type="text" style="margin-left:10px;font-size:14px;cursor: pointer;color:#b6b6b6" v-if="item.reviewResult==1||item.reviewResult==0">查看认证记录</span>
            <span type="text" style="margin-left:10px;font-size:14px;cursor: pointer;color:#3da8f0" v-if="item.reviewResult==3">填写信息</span>
            <span type="text" style="margin-left:10px;font-size:14px;cursor: pointer;color:#3da8f0" v-if="item.reviewResult==2">查看</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="this.couresList.length==0">
      <div>
        <div class="zan-wu">暂无数据</div>
      </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="params.pageNo"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<style scoped lang="scss">
.list-wu{
  text-align: center;
  margin: 40px;
  color: #333;
}
.ytg {
  color: #2ab28b;
  font-size: 18px;
}
.wtg {
  color: #fd0000;
  font-size: 18px;
}
.jxz {
  font-size: 18px;
  color: #1378f6;
}

.ybm {
  font-size: 18px;
  color: #1378f6;
}

.Create-coures {
  position: absolute;
  right: 32px;
}
.uc-badge {
  margin-top: 10px;
  margin-right: 40px;
}
.uc-course {
  cursor: pointer;
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #e8e8e8;
  padding: 20px 0px 15px 0px;
  margin: 0 32px 0 22px;
  ::v-deep .uc-course-img {
    width: 212px;
    img {
      width: 212px;height:119px;
      border: 1px solid #f4f4f5;
    }
  }
  .uc-course-info {
    flex: 1;
    line-height: 28px;
    padding: 0px 10px;
    .summary-item {
      padding-top: 10px;
      height: 40px;
      line-height: 15px;
      color: #7d7d7d;
      font-size: 14px;
      overflow: hidden;
      width: 90%;
      word-break:break-all;
      display: -webkit-box;
      // overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .uc-course-name {
      font-size: 16px;
      display: -webkit-box;
      white-space:pre-wrap;
      // word-wrap: break-word;
      overflow: hidden;
      text-overflow:ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      word-break:break-all;
      // font-weight: 700;
    }
    .uc-course-text {
      color: #666;
      margin-top: 28px;
    }
  }
  .uc-course-btns {

    text-align: right;
    .btn1 {
      height: 44px;
      padding: 10px 15px;
    }
    .btn2 {
      height: 44px;
      padding: 10px 15px;
    }
    .btn {
      height: 44px;
      padding: 10px 15px;
    }
  }
}
</style>
