<template>
  <view class="main">
    <u-toast ref="uToast"></u-toast>
	<view class="back-icon"  @click="back()">
		<u-icon style="position: absolute;" name="arrow-left"></u-icon>
		<text class="back-icon-title">讲师信息</text>
	</view>
    <u-modal :show="showFlag" :closeOnClickOverlay="true" :showCancelButton="true" @cancel="hideDialog" @confirm="submit" :content="scoreNum>80?'您给讲师打的分数是'+scoreNum+'分， 是否确认提交?':'您给讲师打的分数是'+scoreNum+'分， 低于认证通过的标准80分， 是否确认提交？'"></u-modal>
 <div class="info">
   <div class="info_top">
     <div class="header_img" v-if="lecturersInfo.id">
        <img style="width: 144rpx;height: 144rpx;border-radius: 72rpx;" :src="lecturersInfo.avatar&&imageBaseUrl+lecturersInfo.avatar ||  (lecturersInfo.gender==2?'../../../static/images/lecturer/teacher-girl.png':lecturersInfo.gender==1?'../../../static/images/lecturer/teacher.png':'')"></img>
     </div>
     <div class="base_info">
       <div class="base_info_1">
         <div class="name">{{lecturersInfo.teacherName}}</div>
         <div class="number">{{lecturersInfo.teacherNo}}</div>
       </div>
       <div class="base_info_2">{{lecturersInfo.orgName}}</div>
       <div class="base_info_3">
         <div>{{lecturersInfo.positionName}}</div>
         <!-- <div>{{lecturersInfo.bandCode}}</div> -->
       </div>
     </div>
   </div>
   <div class="info_buttom">
     <span>认证课程名称:</span>{{lecturersInfo.courseName}}
   </div>
 </div>
 <div class="curriculumDevelopment">
   <div class="title">课程开发（35分）</div>
   <div class="topic">
     <div class="substance">
       1.对课程主题理解有深度，在编写/优化课件时，能理论结合实际；<span>（20分）</span>
     </div>
     <div class="fraction">
              <u-number-box v-model="score.one" :disabled="scoreDisabled" min="0" max="20" @change="stepperChange('one')"></u-number-box>
     </div>
   </div>
   <div class="topic" style="border: none">
     <div class="substance">
       2.了解学员，善于将课程内容与学员情况相结合，使用他们熟悉的语言和场景进行讲授，促使学员更快地理解并接受课程内容；<span>（15分）</span>
     </div>
     <div class="fraction">
       <u-number-box v-model="score.two" :disabled="scoreDisabled" min="0" max="15" @change="stepperChange('two')"></u-number-box>
     </div>
   </div>
 </div>
 <div class="curriculumDevelopment">
   <div class="title">课程讲授与互动（45分）</div>
   <div class="topic">
     <div class="substance">
       1.富有教师思维，能够根据成人的学习习惯，运用多种教学手段，使课堂生动活泼，提升课堂效率；
       <span>（15分）</span>
     </div>
     <div class="fraction">
       <u-number-box v-model="score.three" :disabled="scoreDisabled" min="0" max="15" @change="stepperChange('three')"></u-number-box>
     </div>
   </div>
   <div class="topic">
     <div class="substance">
       2.具备所讲授课程的专业知识或实战经验，能够应对学员在课堂上提出的普通问题或挑战性问题；
       <span>（15分）</span>
     </div>
     <div class="fraction">
       <u-number-box v-model="score.four" :disabled="scoreDisabled" min="0" max="15" @change="stepperChange('four')"></u-number-box>
     </div>
   </div>
   <div class="topic">
     <div class="substance">
       3.心态开放，有较强的临场应变技能，能够通过正向引导，化解课堂中的“危机”，推进课程正常进行；
       <span>（10分）</span>
     </div>
     <div class="fraction">
       <u-number-box v-model="score.five" :disabled="scoreDisabled" min="0" max="10" @change="stepperChange('five')"></u-number-box>
     </div>
   </div>
   <div class="topic" style="border: none">
     <div class="substance">
       4.语言正向、积极，富有感染力，传递知识的同时，传递能量；
       <span>（5分）</span>
     </div>
     <div class="fraction">
       <u-number-box v-model="score.six" :disabled="scoreDisabled" min="0" max="5" @change="stepperChange('six')"></u-number-box>
     </div>
   </div>
 </div>
 <div class="curriculumDevelopment">
   <div class="title">仪表与仪态（20分）</div>
   <div class="topic">
     <div class="substance">
       1.着装符合课程主题的要求；（10分）
       <span>（10分）</span>
     </div>
     <div class="fraction">
              <u-number-box v-model="score.seven" :disabled="scoreDisabled" min="0" max="10" @change="stepperChange('seven')"></u-number-box>
     </div>
   </div>
   <div class="topic">
     <div class="substance">
       2.站立行走落落大方，不卑不亢；
       <span>（5分）</span>
     </div>
     <div class="fraction">
              <u-number-box v-model="score.eight" :disabled="scoreDisabled" min="0" max="5" @change="stepperChange('eight')"></u-number-box>
     </div>
   </div>
   <div class="topic" style="border: none;padding-bottom: 100px;margin-bottom: 0px;">
     <div class="substance">
       3.普通话标准，语言文明健康，讲授适度、接地气；
       <span>（5分）</span>
     </div>
     <div class="fraction">
       <u-number-box v-model="score.nine" :disabled="scoreDisabled" min="0" max="5" @change="stepperChange('nine')"></u-number-box>
     </div>
   </div>
 </div>
<div class="foot" >
   <view class="fraction">您的评分：<span>{{scoreNum}}分</span></view>
   <view class="submit" v-if="!lecturersInfo.scores" @click="showDialog()">提交</view>
 </div>
  </view>
</template>
<script>
	import config from '@/config/index.js'
    import apiLecturerCert from "@/api/lecturer/certification.js";
    export default {
            data() {
                    return {
							imageBaseUrl: config.fileUrl,
                            showFlag: false,
                            lecturersInfo: {},
                            score:{
                              "one": 0,
                              "two": 0,
                              "three": 0,
                              "four": 0,
                              "five": 0,
                              "six": 0,
                              "seven": 0,
                              "eight": 0,
                              "nine": 0
                            },
							scoreDisabled: false,
                            scoreNum: 0,
							reviewId: ''
                    }
            },
            onPullDownRefresh() {
                    
            },
            onReachBottom() {
                    
            },
            onLoad(options) {
                    this.teacherId = options.teacherId
					this.reviewId = options.reviewId
                    this.info(options.teacherId)
            },
            methods:{
				   back(){
						   uni.navigateBack();     
				   },
                    showDialog(){
                            if(this.scoreNum<=0){
                                    this.$refs.uToast.show({message:"请先进行评份",type:'error'});
                                    return;
                            }
                            this.showFlag=true
                    },
                    hideDialog(){
                            this.showFlag=false
                    },
                    stepperChange(name){
                            setTimeout(()=>{
                                    this.scoreNum = this.score.one + this.score.two + this.score.three + this.score.four + this.score.five + this.score.six + this.score.seven + this.score.eight + this.score.nine
                            },50)
                    },
                    info(teacherId){
                            apiLecturerCert.lecturerCertificationInfo({
                                    teacherId: teacherId
                            }).then(res => {
								console.log('res::',res)
                                    if (res.code == 200 && res.data) {
										
                                            this.lecturersInfo = res.data || {}
											//this.lecturersInfo.scores="" //"1,2,3,1,2,3,1,2,3"
											if(this.lecturersInfo.scores&&this.lecturersInfo.scores.length>1){
												this.scoreDisabled = true
												var arr = this.lecturersInfo.scores.split(',')
												var key = 0
												for (var name in this.score) {
													this.score[name] = Number(arr[key])
													key++
												}
												this.stepperChange()
											}
                                    } else {
											this.lecturersInfo = {}
                                            this.$refs.uToast.show({message:res.msg,type:'error'});
                                    }
                            });
                            this.showFlag=false
                    },
                    submit(){
						var scores = []
						for (var key in this.score) {
							scores.push(this.score[key])
						}
						// return
						apiLecturerCert.lecturerCertificationSave({
								teacherId: parseInt(this.teacherId),
								score: this.scoreNum,
								scores: String(scores)
						}).then(res => {
								// 评分完成回列表
								if (res.code == 200) {
									uni.navigateTo({
											url:'/pages/lecturer/certification/list?reviewId='+this.reviewId
									})
								} else {
										this.$refs.uToast.show({message:res.msg,type:'error'});
								}
						});
						this.showFlag=false
                    }
            }
    }
</script>
<style scoped lang="scss">
.back-icon{
       background: #ffffff;
       background-position: 0 0;
       position: relative;
       height: 40px;
       display: flex;
       align-items: center;
}
.back-icon-title{
       flex: 1;
       text-align: center;
}
.main {
  background: #F9F9F9;
  overflow:hidden ;
  .info {
 text-align: left;
 background: #fff;
 padding: 20px 16px 16px 16px;

 .info_top {
	display: flex;
	margin-left: 9px;
	align-items: center;
	min-height: 87px;;
   .header_img {
     img {
       width: 144rpx;
       height: 144rpx;
       border-radius: 50%;
     }
   }

   .base_info {
     margin-left: 20px;
     margin-top: 3px;

     .base_info_1 {
       display: flex;
       align-items: center;
       .name {
         font-weight: 600;
         font-size: 16px;
         color: #333333;
         line-height: 22px;
         text-align: left;
         font-style: normal;
       }

       .number {
         margin-left: 9px;
         font-weight: 400;
         font-size: 14px;
         color: #333333;
         line-height: 20px;
         text-align: left;
         font-style: normal;
       }
     }
     .base_info_2 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		margin: 5px 0 0;
		font-size: 14px;
		color: #333333;
		line-height: 16px;
		text-align: left;
		font-style: normal;
     }
     .base_info_3 {
       display: flex;
       align-items: center;
       margin-top: 5px;
	   font-size: 14px;
     }
     .base_info_3:first-child {
       margin-right: 20px;
     }
   }
 }
 .info_buttom {
   margin-top: 10px;
   font-weight: 400;
   font-size: 14px;
   color: #333333;
   line-height: 20px;
   text-align: left;
   font-style: normal;
   span{
		width: 102px;
		display: inline-block;
   }
 }
 }  
	.curriculumDevelopment {
		background: #fff;
		margin-top: 10px;
		padding: 0 16px;
		.title {
		padding-top: 18px;
		font-weight: 500;
		font-size: 16px;
		color: #333333;
		line-height: 22px;
		text-align: left;
		font-style: normal;
		margin-bottom: 15px;
		}
		.topic {
		padding-bottom: 20px;
		border-bottom: 1px solid rgba(83, 83, 83, 0.06);
		margin-bottom: 17px;
		.substance {
		 font-weight: 400;
		 font-size: 14px;
		 color: #666666;
		 line-height: 20px;
		 text-align: justify;
		 font-style: normal;
		 span {
		   color: #409EFF;
		 }
		}
		.fraction {
		 margin-top: 4px;
		 display: flex;
		 justify-content: flex-end;
		}
	}
}
 .foot {
 height: 81px;
 background: #F8F8F8;
 border-radius: 16px 16px 0px 0px;
 display: flex;
 justify-content: space-evenly;
 align-items: center;
    position: fixed;
    bottom: 0px;
    width: 100vw;
 .fraction{
   font-weight: 500;
   font-size: 16px;
   color: #333333;
   line-height: 22px;
   text-align: left;
   font-style: normal;
   span{
     color: #409EFF;
   }
 }
 .submit{
   width: 180px;
   height: 44px;
   background: #409EFF;
   box-shadow: 0px 2px 7px 1px rgba(104,102,102,0.08);
   border-radius: 22px;
   color: #FFFFFF;
   font-size: 16px;
   font-weight: 500;
   line-height: 44px;
      text-align: center;
 }
  }
 :deep(.a-popup--center){
 width: 288px;
 height: 150px;
 background: #FFFFFF;
 border-radius: 14px;
 .content{
   width: 196px;
   height: 44px;
   font-weight: 600;
   font-size: 16px;
   color: #333333;
   line-height: 22px;
   text-align: center;
   font-style: normal;
   margin-top: 31px;
   margin-left: 46px;
 }
 .buttons{
   position:absolute;
   bottom: 0;
   left: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
   .qx{
     border-right: 1px solid rgba(153,153,153,0.18);
     font-weight: 400;
     font-size: 16px;
     color: #333333;
     line-height: 22px;
     font-style: normal;
   }
   .qr{
     font-weight: 400;
     font-size: 16px;
     color: #387DF7;
     line-height: 22px;
     font-style: normal;
   }
   div{
     width: 144px;
     height: 47px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-top: 1px solid rgba(153,153,153,0.18);
   }
 }

  }
}
</style>