<script>
import {
  addTeacher,
  getCertificationProcess,
  getProgress,
  getReviewResult,
  getTeacherInfo, secondExamine
} from "@/api/modules/lecturer";

export default {
  name: "TwoAthentication",
  data(){
    return{
      teacherId:'',
      form:{
        teacherName:'',
        teacherNo:'',
        orgName:''
      },
      progressData:{},
      fileBaseUrl:process.env.VUE_APP_BOE_MOBILE_URL,
      disabled:false,
      statusInfo:'',
      result:'',
      newTeacherId:'',
      pid:'',
      statusInfo1:''
    }
  },
  mounted() {
    //读取路由参数
    this.teacherId=this.$route.query.teacherId
    //获取教师基本信息
    this.baseInfo()
    // this.getReviewResult()
  },
  methods:{
    //前往二次认证
    getoFactor(){
      secondExamine({teacherId:this.teacherId}).then(res=>{
        this.newTeacherId=res.data.replace(/[^0-9]/ig,'')
      })
    },
    //获取认证结果
    getReviewResult(){
      getReviewResult({teacherId:this.pid}).then(res=>{
        this.result=res.data
      })
    },
    //获取教师认证状态
    getStatus(){
      getCertificationProcess({teacherId:this.teacherId}).then(res=>{
        this.statusInfo=res.data
      })
      getCertificationProcess({teacherId:this.pid}).then(res=>{
        this.statusInfo1=res.data
      })
    },
    baseInfo(){
      getTeacherInfo({teacherId:this.teacherId}).then(res=>{
        /*
        * teacherName:教师姓名 teacherNo:教师工号 orgName:组织 positionName:岗位 bandCode:职级 courseName:认证课程名称 courseContent课程内容分类
        * courseIntroduction:课程简介
        * */
        this.form.teacherName=res.data[0].teacherName
        this.form.teacherNo=res.data[0].teacherNo
        this.form.orgName=res.data[0].orgName
        this.form.positionName=res.data[0].positionName
        this.form.bandCode=res.data[0].bandCode
        this.form.courseName=res.data[0].courseName
        this.form.courseContent=res.data[0].courseContent
        this.form.courseIntroduction=res.data[0].courseIntroduction
        this.form.coursewareName=res.data[0].examineCourseware.coursewareName
        this.pid=res.data[0].pid
        //获取学习进度
        this.getReviewResult()
        this.addTeacher()
        this.getStatus()
      })
    },
    addTeacher(){
      addTeacher({pageNo:1,pageSize:10,keyword:this.form.teacherNo}).then(res=>{
        this.getProgress(res.data[0].id)
      })
    },
    getProgress(id){
      getProgress({teacherId:id}).then(res=>{
        this.progressData=res.data
        res.data.forEach((item,index)=>{
          if (item.progress!=100){
            this.disabled=true
            return
          }
        })
      })
    },
    format(percentage) {
      return percentage === 100 ? '满' : `${percentage}%`;
    },
    getJump(){
      this.$router.push({
        path:'/need/twocoaching',
        query:{teacherId:this.teacherId}
      })
    },
    toCaseData(courseId){
      this.$router.push("/course/studyindex?id=" + courseId);
    }

  }
}
</script>

<template>
  <div>
    <div class="title">基本信息</div>
    <el-container>
      <div class="form-table">
        <el-form label-width="140px">
          <div>
            <el-col :span="10">
              <el-form-item label="姓名：">
                {{form.teacherName}}
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="4">
              <el-form-item label="工号：">
                {{form.teacherNo}}
              </el-form-item>
            </el-col>
          </div>
          <el-form-item label="组织：">
            {{form.orgName}}
          </el-form-item>
          <div>
            <el-col :span="10">
              <el-form-item label="岗位：">
                {{form.positionName}}
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="4">
              <el-form-item label="职级：">
                {{form.bandCode}}
              </el-form-item>
            </el-col>
          </div>
          <el-form-item label="认证课程名称："  prop="courseName">
            {{form.courseName}}
          </el-form-item>
          <el-form-item label="课程内容分类：" prop="courseContent">
            {{form.courseContent}}
          </el-form-item>
          <el-form-item label="课程简介：" prop="courseIntroduction">
            {{form.courseIntroduction}}
          </el-form-item>
          <el-form-item label="初稿课件：" prop="courseIntroduction">
            {{form.coursewareName}} <span style="color: #1378f6;display: inline-block;margin-left: 16px">查看</span>
          </el-form-item>
        </el-form>
      </div>
    </el-container>
    <div class="title" style="margin-top: 20px">线上课程</div>
    <div class="progress">
      <div v-for="(item,index) in progressData" :key="item">
        <div class="progress-item" @click="toCaseData(item.courseId)">
          <div class="uc-course-img" style="width: 212px;height:119px">
            <img style="width: 100%;" v-if="item.courseImage!=''" :src="item.courseImage">
            <img style="width: 100%;" v-else :src="fileBaseUrl+'/pc/images/bgimg/course.png'">
          </div>
          <div class="courseName">{{item.courseName}}</div>
          <div class="smallTitle">当前进度</div>
          <el-progress :percentage="item.progress" :format="format"></el-progress>
        </div>
      </div>
    </div>
    <div>
      <div class="title" style="margin-top: 20px">认证结果</div>
      <div v-if="statusInfo1.reviewResult==2" class="score" style="color: #797979">请您耐心等待线下认证安排！</div>
      <div v-if="statusInfo1.reviewResult==0" class="score" style="color: #4b7900;">恭喜您，您的认证分数为{{ result.avgScore }}分，已经通过认证！</div>
      <div v-if="statusInfo1.reviewResult==1" class="score" style="color: #ff0000">很遗憾，您的认证分数为{{ result.avgScore }}分，没有通过认证！</div>
    </div>
    <div>
      <div class="title" style="margin-top: 20px">线下辅导</div>
      <div class="tip">提示：您的线上课程已经学习完毕，快去进行下一步吧！</div>
    </div>
    <el-button type="primary" style="margin-top: 20px;margin-left: 80px" @click="getJump()">下一步</el-button>
  </div>
</template>

<style scoped lang="scss">
.title{
  font-size: 16px;
  font-weight: 800;
  width: 850px;
  border-bottom: 1px solid rgba(215, 215, 215, 0.66);
  padding: 2px 2px 20px 2px;
}
.form-table{
  width: 850px;
  margin-top: 20px;
}
.progress{
  display: flex;
  align-items: center;
  .progress-item{
    margin-top: 10px;
    margin-right: 10px;
    cursor: pointer;
  }
}
.progress>div{
  max-width: 250px;
  margin-right: 20px;
}
.courseName{
  font-weight: 650;
  color: #333333;
  font-size: 14px;
  margin-top: 12px;
}
.smallTitle{
  color:#134054;
  font-size:12px;
  margin-top: 7px;
}
::v-deep .el-form-item__content{
  font-weight: 500;
}
::v-deep .el-form-item{
  margin-bottom: 0px;
}
.tip{
  color: #7d7c7c;
  font-size: 14px;
  margin-top: 20px;
}
.score{
  margin-top: 28px;
  font-size: 20px;

}
.twoFactorAuthentication{
  width: 344px;
  height: 135px;
  padding: 2px 2px 2px 2px;
  border: 1px solid #d7d7d7;
  background-color: #ffffff;
  box-sizing: border-box;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.remind {
  margin-bottom: 20px;
  box-sizing: border-box;
  color: #797979;
}
</style>
