<template>
  <div>
    <div class="xpage-coures-banner">
        <portal-header current="course" textColor="#fff" :goSearch="1"></portal-header>
        <div class="xcontent">
            <div class="banner-crumbs">
               <router-link to="/course"><span class="crumbs-first">课程列表</span></router-link>
               <span class="crumbs-line">  &gt; </span>
               <span class="crumbs-last">课程详情</span>
            </div>
            <div class="bcourse-title">
               <!-- <span>{{courseInfo.name}}</span> -->
                <!-- <span>{{courseInfo.summary}}</span>  -->
                <!-- <span class="bcourse-score">{{toScore(courseInfo.score)}}分</span> -->
            </div>
        </div>
    </div>
    <div class="portal-content xcontent">
          <el-card :body-style="{ padding: '0px', 'min-height': '500px' }">
            <el-row class="detail">
              <el-col :span="18">
                <el-tabs v-model="activeName" @tab-click="changeTab">
                  <el-tab-pane label="课件" name="courseware">
                    <div>
                      <div class="courseware-div" v-if="enrollStutas == 1" style="max-height: 400px;">
                        <course-image :course="courseInfo" class="courseware-img"></course-image>
                      </div>
                      <div class="courseware-div" v-else>
                       <div v-if="coursewareInfo.content.contentType == 10" style="position: relative;">
                           <videoPlayer id="myVideoPlayer" :src="blobUrl" style="width: 100%;"
                            @onPlayerPlaying="onPlayerPlaying"
                            @onPlayerPlay="onPlayerPlay"
                            :initTime="videoPlayingTime"
                            :isDrag="curriculumData.isDrag"
                            @onPlayerPause="onPlayerPause"
                            @onFullscreen="onFullscreen"
                            @onPlayerEnded="onPlayerEnded">
                        </videoPlayer>
                         <div class="player-box" v-if="playerBoxShow">
                        <div class="player-praise">
                          <div @click="praiseContent" style="cursor: pointer;">
                            <img class="icon-small" v-if="isPraise" :src="require('@/assets/images/icon/praise-active.png')" />
                            <img class="icon-small" v-else :src="require('@/assets/images/icon/zhan.png')" />
                            <div style="color:#fff;cursor: pointer;">赞</div>
                          </div>
                          <div style="margin-left: 15px;cursor: pointer;" @click="treadContent">
                            <img class="icon-small" v-if="isTrample" :src="require('@/assets/images/icon/trample-active.png')" />
                            <img class="icon-small" v-else :src="require('@/assets/images/icon/cai.png')" />
                            <div style="color:#fff;cursor: pointer;">踩</div>
                          </div>
                        </div>
                        <div v-if="!scoreInfo.has" class="player-rate">
                          <el-rate v-model="scoreInfo.score" text-color="#ff9900" score-template="{value}" void-color="#fff" @change="addScore"></el-rate>
                        </div>
                        <div v-if="scoreInfo.has" style="padding-top: 5px;display: flex;">
                          <div class="player-rate" style="padding-left: 35px;">
                            <el-rate disabled v-model="courseInfo.score" :allow-half="true" ></el-rate>
                          </div>
                          <span class="score-text" style="margin-top:35px">
                            <span style="color:#ffb30f;">{{ toScore(courseInfo.score) }}</span>
                            <span style="font-size: 12px;color: #fff">分</span>
                          </span>
                       </div>
                      </div>
                      </div>
                      <div v-if="coursewareInfo.content.contentType == 20">
                        <div class="con-audio">
                          <div class="con-audio-player">
                            <audioPlayer :url="fileBaseUrl+curriculumData.url"
                              :name="coursewareInfo.content.contentName"
                                @onPlaying="audioPlaying"
                                @onPlay="audioPlay"
                                :isDrag="curriculumData.isDrag"
                                @onPause="audioPause"
                                @onPlayEnd="audioEnd">
                            </audioPlayer>
                          </div>
                        </div>
                      </div>
                      <div v-if="coursewareInfo.content.contentType == 30">
                        <img :src="fileBaseUrl+coursewareInfo.content.content" alt="图片">
                      </div>
                      <div v-if="coursewareInfo.content.contentType == 40">
                        <div style="padding: 10px;color: #ed0000;  " v-if="curCFile.converStatus < 2 && !coursewareInfo.content.content">
                          <div>此课程内容无法预览，请联系管理员</div>
                        </div>
                          <div style="padding: 10px;color: #ed0000; " v-if="curCFile.converStatus == 3 && !coursewareInfo.content.content">
                              此课程内容无法预览，请联系管理员
                          </div>
                        <pdfPreview :autoScroll="true" v-if="coursewareInfo.content.contentType == 40" :filePath="fileBaseUrl+coursewareInfo.content.content"></pdfPreview>
                      </div>
                      <div v-if="coursewareInfo.content.contentType == 41">
                        <div class="couretitle" style="padding: 20px;text-align: left;" v-html="coursewareInfo.content.content"></div>
                        </div>
                      <div v-if="coursewareInfo.content.contentType == 52">
                          <div class="hyper-link" v-if="conLink.openType==2">
                              <div class="hyper-link-row">课程内容是外部连接</div>
                              <div class="hyper-link-row">{{conLink.url}}</div>
                          </div>
                          <div v-if="conLink.openType==1">
                              <iframe :src="conLink.url" style="width: 100%;border:0px;min-height: 473px;border:0px" border="0" frameborder="0"></iframe>
                          </div>
                      </div>
                    </div>
                  </div>
                  </el-tab-pane>
                  <el-tab-pane v-if="homeworkInfo.has" :disabled="enrollStutas == 1" label="作业" name="homework">
                    <homework v-if="studyId!=''" :studyId="studyId" :content="homeworkInfo.content" ></homework>
                  </el-tab-pane>
                  <el-tab-pane v-if="examInfo.has" :disabled="enrollStutas == 1" label="考试" name="test">
                    <exam v-if="studyId!=''" :studyId="studyId" :content="examInfo.content"></exam>
                  </el-tab-pane>
                  <el-tab-pane v-if="assessInfo.has" :disabled="enrollStutas == 1" label="评估" name="assess">
                    <assess v-if="studyId!=''" :studyId="studyId" :content="assessInfo.content"></assess>
                  </el-tab-pane>
                </el-tabs>
                <div style="display: flex;justify-content: space-between;padding: 10px;align-items: center;">
                  <div class="score">
                    <div v-if="enrollStutas == 1 && !scoreInfo.has">
                      <div v-if="courseInfo.score">
                          <el-rate disabled v-model="courseInfo.score"></el-rate>
                          <span class="score-text">{{toScore(courseInfo.score)}}<span style="font-size: 14px;">分</span></span>
                      </div>
                      <div v-else class="score-no">未评分</div>
                    </div>

                   <div v-if="enrollStutas == 2" style="display: flex;justify-content: center; align-items: center;">
                      <div v-if="!scoreInfo.has" style="margin-left:10px;cursor: pointer;padding-top: 15px;">
                                <el-rate  v-model="scoreInfo.score"  @change="addScore"></el-rate>
                      </div>
                      <div v-else style="padding-top: 10px;display: flex;margin-left: 10px">
                        <div style="padding-top: 5px;">
                        <el-rate disabled v-model="courseInfo.score" :allow-half="true" ></el-rate>
                        </div>
                        <div><span class="score-text">{{toScore(courseInfo.score)}}</span><span style="font-size: 14px;">分</span></div>
                      </div>
                   </div>
                  </div>
                  <div style="display: flex;align-items: center;padding-top: 15px;">
                    <div @click="praiseContent" style="cursor: pointer;">
                      <el-tooltip class="item" effect="light" :content="isPraise?'取消点赞':'点赞'" placement="top-start" :visible-arrow="false" popper-class="text-tooltip">
                        <img class="icon-small" v-if="isPraise" :src="require('@/assets/images/icon/praise-active.png')">
                        <img class="icon-small" v-else :src="require('@/assets/images/icon/praise.png')">
                      </el-tooltip>
                      <span style="margin-left: 5px;color: #666666;font-size: 18px;">{{courseInfo.praises}}</span>
                    </div>
                    <div style="margin-left: 15px;cursor: pointer;" @click="treadContent">
                      <el-tooltip class="item" effect="light" :content="isTrample?'取消踩':'踩'" placement="top-start" :visible-arrow="false" popper-class="text-tooltip">
                        <img class="icon-small" v-if="isTrample" :src="require('@/assets/images/icon/trample-active.png')">
                        <img class="icon-small" v-else :src="require('@/assets/images/icon/trample.png')">
                      </el-tooltip>
                        <span style="margin-left: 5px;color: #666666;font-size: 18px;">{{courseInfo.trampleCount}}</span>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="6" class="cont">
                <interactBar :readonly="enrollStutas==1" :type="1" :data="courseInfo" :views="false" :praises="false" :comments="false"></interactBar>
                <div class="title title-index">{{courseInfo.name}}</div>
                <div class="study-count"><span class="num">{{courseInfo.studys}}人学习</span></div>
                <div class="label"><el-tag class="label-item" effect="plain">录播课</el-tag></div>
                <div class="label" v-if="tags.length >0">
                  <el-tag class="label-item" effect="plain" v-for="(item, index) in tags" :key="index">{{item}}</el-tag>
                </div>
                <div v-if="enrollStutas != 2" class="score"  style="padding-top: 135px;justify-content: flex-start;">
                    <div v-if="courseInfo.score">
                    <el-rate disabled v-model="courseInfo.score"></el-rate>
                    <span class="score-text">{{toScore(courseInfo.score)}}<span style="font-size: 14px;">分</span></span>
                    </div>
                    <div v-else class="score-no">未评分</div>
                </div>
                  <img class="detail-img" v-show="!showQrcode && (courseInfo.device == 2 || courseInfo.device == 3)" @click="showQrcode = true" src="../../../assets/images/qr.png" alt="" srcset="">
                  <div class="qr-code" v-show="showQrcode && ((courseInfo.device == 2 || courseInfo.device == 3))" style="padding-top: 10px;">
                    <div id="qrcode" ref="qrcode" class="qrcode" @click="showQrcode = false"></div>
                  </div>
              </el-col>
            </el-row>
          </el-card>
          <el-row :gutter="10">
            <el-col :span="18">
              <div class="el-tab-pane-boxContent" style="background-color: #FFFFFF;padding: 20px;margin-top: 10px;">
                 <el-tabs v-model="bootTabActive">
                    <el-tab-pane label="课程介绍" name="info">
                      <div class="content"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 目标人群</div>
                      <div class="content-text" >{{courseInfo.forUsers}}</div>
                      <div class="content"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 课程价值</div>
                      <div class="content-text">{{courseInfo.value}}</div>
                      <div class="content"><img src="@/assets/images/icon/remark-iocn.png" alt="" srcset=""> 详细介绍</div>
                      <div class="content-text" v-html="courseInfo.summary"></div>
                    </el-tab-pane>
                    <el-tab-pane :label="'评论('+commentsTtoal+')'" name="commnets">
                      <comments v-if="courseInfo.id!=''"
                        :readonly="enrollStutas==1"
                        :showTop="false"
                        @writeTotal="showCommentsTotal"
                        @success="addCommentSuccess"
                        @delSuccess="delCommentSuccess"
                        :obj-type="1"
                        :to-users="toUsers"
                        :obj-id="courseInfo.id"
                        :obj-title="courseInfo.name">
                      </comments>
                    </el-tab-pane>
                  </el-tabs>
                </div>
            </el-col>
            <el-col :span="6">
              <el-card :body-style="{ padding: '0px' }" class="teachers">
                <div class="top">授课讲师</div>
                <div>
                  <div class="teacher" v-for="(item, idx) in teachers" :key="idx" >
                    <div class="teacher-avator">
                      <el-avatar v-if="item.avatar !== ''" :src="item.avatar" shape="circle" :size="50"></el-avatar>
                       <div class="teacher-text" v-else>
                         <div v-if="sex === 1 "><img src="../../../../public/images/Avatarman.png" alt=""></div>
                         <div v-else><img src="../../../../public/images/Avatarwoman.png" alt=""></div>
                      </div>
                    </div>
                    <div class="teacher-info">
                      <div class="teacher-name">{{ item.teacherName }}</div>
                      <div class="teacher-remark" v-html="item.remark"></div>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        
    </div>
    <portal-footer></portal-footer>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';
import { mapGetters,mapActions} from 'vuex';
import portalHeader from "@/components/PortalHeader.vue";
import comments from "@/components/Portal/comments.vue";
import portalFooter from "@/components/PortalFooter.vue";
import interactBar from "@/components/Portal/interactBar.vue";
import apiCourseFile from "@/api/modules/courseFile.js";
import apiCoursePortal from "@/api/modules/coursePortal.js";
import apiUser from '@/api/system/user.js';
import exam from '@/components/Course/exam';
import homework from '@/components/Course/homework';
import assess from '@/components/Course/assess';
import {toScore,courseType, getType, numberToLetter, correctJudgment,userAvatarText} from "@/utils/tools.js";
import apicourseStudy from "@/api/modules/courseStudy.js";
import apiVideoStudy from "@/api/modules/videoStudy.js";
import apiCourseGrade from "@/api/modules/courseGrade.js";
import apiPraises from "@/api/modules/praises.js";
import apiTrample from "@/api/modules/trample.js";
import FileUpload from "@/components/FileUpload/index.vue";
import pdfPreview from "@/components/PdfPreview/index.vue";
import { setTimeout } from "timers";
import videoPlayer from '@/components/VideoPlayer/index.vue';
import audioPlayer from '@/components/AudioPlayer/index.vue';
import courseImage from "@/components/Course/courseImage.vue";
import studyUtil from '@/utils/study.js';
import {encrypt} from '@/utils/jsencrypt.js';
import cookies from 'vue-cookies'
export default {
  name: "micro",
  components: {
    portalHeader,
    portalFooter,
    interactBar,
    FileUpload,
    comments,
    pdfPreview,
    videoPlayer,
    audioPlayer,
    courseImage,
    homework,
    exam,
    assess
  },
  computed: {
    ...mapGetters(['resOwnerMap','sysTypeMap','userInfo']),
  },
  data() {
    return {
      curCFile:{},
      sex:null,
      playerBoxShow:false,
      userAvatarText,
      showQrcode:false,
      qrcode: '',
      showiframe: false,//用于超连接的
      toScore,
      correctJudgment:correctJudgment,
      show:0,
      studyId: "",
      tags: [],
      numberToLetter: numberToLetter,
      fileBaseUrl: this.$Constants.fileBaseUrl,
      blobUrl:'',//播放的文件地址，新添加，采用blob方式
      getType: getType,
      courseType,
      activeName: "courseware",
      courseInfo: {
        id: "",
        type: 10,
        name: "",
        favorites: 0,
        comments: 0,
        shares: 0,
        praises: 0,
        views: 0
      },
      toUsers:[],//可以@的用户列表
      teachers: [],
      totalContent: 4, //微课默认是4项
      conLink:{openType:1,url:''},//对于超连接的内容
      curriculumData:{url:'',isDrag:true,completeSetup:1,setupTage:0,second:0},// 课件内容
      coursewareInfo: {
        content: {},
        finish: false,
        process:0,
        status:1,
        studyItemId: ""
      },
      homeworkInfo: {
        has: false,
        content: {},
        info: {},
        studyItemId: "",
        filePath: ""
      },
      examInfo: {
        has: false,
        content: {},
        info: {},
        paper: [],
        studyItemId: ""
      },
      assessInfo: {
        has: false,
        allowSubmit: true,
        content: {},
        info: {},
        studyItemId: ""
      },
      enrollStutas: 1, // 1 :未报名，2:已报名
      dialogVisible: false,
      testStart: false,
      courseRate: 5,
      videoPlayingTime:0,//当前视频的耿入的时间点
      appendStartTime: null, //记录追加的开始时间
      scoreInfo: {
        score: 5,
        has: false
      },
      interactRuning:false,
      isPraise: false,
      isTrample: false,
      bootTabActive:'info',
      commentsTtoal:0,
      appendHandle:null,//追加时长时间对象
      isAppendTime:false,//是否追加学习时长
      appentId:'',//当前追加的学习时长的id
      appentInterval:30000,//追加学习时间的间隔 30秒加一次
    };
  },
  mounted() {
    let id = this.$route.query.id;
    this.courseInfo.id = id;
    this.showQrimage();
    this.$watermark.set(this.userInfo.name+this.userInfo.loginName);
    this.loadResOwners();
    let $this = this;
    //页面只支取一次，所以先直接写在这里面
    apiCoursePortal.detail(id,false).then(rs => {
      if (rs.status == 200) {
        this.courseInfo = rs.result.course;
        if(rs.result.course.tags != '') this.tags = rs.result.course.tags.split(",");
        this.teachers = rs.result.teachers;
        if(rs.result.teachers && rs.result.teachers.length > 0){
          let userIds=[];
          let ctoUsers=[];
          rs.result.teachers.forEach(item=>{
            item.avatar = "";
            userIds.push(item.teacherId);
            ctoUsers.push({aid:item.teacherId,name:item.teacherName,});
          })
          this.toUsers=ctoUsers;
          this.loadAuthorInfo(rs.result.teachers,userIds)
        }
        this.totalContent = rs.result.contents.length; //计算总内容数
        if (!rs.result.course.resOwner3) {
          this.courseInfo.resOwner = this.resOwnerName(
            rs.result.course.resOwner2
          );
        } else {
          this.courseInfo.resOwner = this.resOwnerName(
            rs.result.course.resOwner3
          );
        }
        rs.result.contents.forEach(con => {
          if (con.sortIndex == 1) {
            $this.coursewareInfo.content = con;
            if(con.contentType == 10 || con.contentType == 20) {
                if(con.content.startsWith('\{')){
                 this.curriculumData=JSON.parse(con.content);
              }else{
                 this.curriculumData.url=con.content;
              }
              //对url进行加密处理
              $this.createPlayUrl(con.contentRefId,this.curriculumData.url);
            } else if (con.contentType == 40) {
              //需要读取pdf的路径
              apiCourseFile.detail($this.coursewareInfo.content.contentRefId).then(cfrs=>{
                if(cfrs.status==200){
                  $this.curCFile = cfrs.result;
                  if(cfrs.result.previewFilePath){
                     $this.coursewareInfo.content.content=cfrs.result.previewFilePath;
                     $this.curCFile=2;
                  }else if(cfrs.result.filePath.indexOf('.pdf')>-1){
                     $this.coursewareInfo.content.content=cfrs.result.filePath;
                     $this.curCFile=2;
                  }
                }else{
                   $this.$message.error('加载pdf课件文件失败');
                }
              });
            }else if(con.contentType ==52){
              if(con.content.startsWith('\{')){
                 this.conLink=JSON.parse(con.content);
              }else{
                 this.conLink.url=con.content;
                 this.conLink.openType=1;
              }
              if(this.conLink.openType==2){
                //直接设置完成状态
                this.widthOpen(this.conLink.url);
              }
            }
            // //加载课件的学习情况
          } else if (con.sortIndex == 2) {
            $this.homeworkInfo.content = con;
            $this.homeworkInfo.has = true;
            //查询作业信息，并显示
          } else if (con.sortIndex == 3) {
            $this.examInfo.has = true;
            $this.examInfo.content = con;
            //查询考试信息并显示
            //$this.loadExamInfo();
          } else if (con.sortIndex == 4) {
            $this.assessInfo.has = true;
            $this.assessInfo.content = con;
            //转化文本为json内容
          }
        });
        //study info
        this.loadStudyInfo();
      } else {
        if(rs.status==204){ //无查看此课程的权限
           this.courseInfo.name=rs.result.course.name;
        }
        this.$message.error(rs.message);
      }
    });
  },
  methods: {
     createPlayUrl(fid,u){
       let nowDate=new Date();
       let ctime=parseInt(nowDate.getTime()/1000);
       let beforeUrl=parseInt(nowDate.getTime()/1000)+'/'+fid;
       let urlSign=encodeURIComponent(encrypt(beforeUrl));
       cookies.set('PLAYSIGN_TIME', ctime);//写客户端的cookie保存
       //以下判断是为了区分本地环境和服务器环境
       if(process.env.NODE_ENV == 'development'){
         this.blobUrl=process.env.VUE_APP_FILE_BASE_URL+u;
       }else{
         this.blobUrl=process.env.VUE_APP_BASE_API+'/xboe/m/course/cware/resource?sign='+urlSign;
       }
     },
     showQrimage(row){
       let urlPre=window.location.protocol+'//'+window.location.host;
      // https://u.boe.com/mobile/pages/resource/microDetail?id=963456709515939840
      // this.qrcode = this.webBaseUrl+'/mobile/pages/resource/microDetail?id='+this.courseInfo.id;
        urlPre='https://u.boe.com/m?returnUrl=https://u.boe.com/mobile/pages/login/loading?returnUrl=';
        this.qrcode =urlPre+ '/pages/resource/microDetail?id='+this.courseInfo.id;
        this.$nextTick(() => {
        this.crateQrcode();
      });
     },
    crateQrcode(){
       this.qr = new QRCode('qrcode', {
        width: 150,
        height: 150, // 高度
        text: this.qrcode // 二维码内容
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f'
        // foreground: '#ff0'
      });
      this.qr._el.title = '';
    },
    ...mapActions({
      getResOwnerTree:'resOwner/getResOwnerTree',
      loadResOwners:'resOwner/loadResOwners',
      getSysTypeTree:'sysType/getSysTypeTree',
      loadSysTypes:'sysType/loadSysTypes'
    }),
    resOwnerName(code){
      if(code==''){return '';}
      return this.resOwnerMap.get(code);
    },
    widthOpen(url) {
      window.open(this.webBaseUrl+url,'_blank');
    },
    showCommentsTotal(total){
      this.commentsTtoal=total;
    },
    addCommentSuccess(comm){
      this.commentsTtoal++;
    },
    delCommentSuccess() {
      this.commentsTtoal--;
    },
    saveStudyItem(){ //先保存学习的内容,针对于音视频的内容
      if(this.coursewareInfo.finish || this.coursewareInfo.studyItemId) {
        return;//已记录学习记录的不再保存
      }
      let params = {
        studyId: this.studyId, //学习id,
        courseId: this.courseInfo.id, //课程id,
        contentId: this.coursewareInfo.content.id, //内容id,
        contentType:this.coursewareInfo.content.contentType, //内容id,
        contentName: this.coursewareInfo.content.contentName, //内容名称
        progress: 0,
        lastStudyTime:0,
        status:2,
        studyDuration:0,
        contentTotal: this.totalContent
      };
      apiVideoStudy.saveStudyItem(params).then(res=>{
          if(res.status == 200){
            this.coursewareInfo.studyItemId=res.result.id;
            this.coursewareInfo.finish = false;
            this.coursewareInfo.status = 2;
            this.coursewareInfo.progress = 1;
          }else{
            console.log("记录学习失败:" + res.message + "，" + res.error);
          }
      });
    },
    finishStudyItem(){ //设置完成学习的内容,针对于音视频的内容
        let params={
          itemId:this.coursewareInfo.studyItemId,
          studyId:this.studyId,
          courseId:this.courseInfo.id,
          cnum:this.totalContent
        }
        apiVideoStudy.finishStudyItem(params).then(res=>{
            if(res.status == 200){
              this.coursewareInfo.finish = true;
              this.coursewareInfo.status = 9;
              this.coursewareInfo.progress = 100;
            }else{
              console.log("记录完成学习失败:" + res.message + "，" + res.error);
            }
        });
    },
    onFullscreen(full){
      let divId='videowatermark';
      var div = document.getElementById('myVideoPlayer')
      if(full){
      	var div3 = document.createElement("div");
        div3.id =divId;
        div3.setAttribute("class", "fullmark");
      	div3.innerHTML='';
        //从父组件传过来的水印内容
        //div3.innerText =this.userInfo.name+this.userInfo.code;
      	for(var i=0;i<8;i++){
      		div3.innerHTML+='<div style="color:#ffffff;width: 40%;height: 155px;padding-left:60px;padding-top:50px; display: flex;justify-content: center; transform: rotate(-36deg);font-size:20px;">'+this.userInfo.name+this.userInfo.loginName+'</div>';
      	}
        div3.style.cssText = "position:absolute;pointer-events: none; width: 100%;height: 100%;top:0;left:0;bottom: 0;right: 0; display: flex;justify-content: center;flex-wrap: wrap;overflow: hidden; opacity:0.3;padding-top:10px";
      	div.appendChild(div3);
      }else{
      	var markDiv=div.querySelector("#"+divId);
        //console.log(markDiv,'markDiv');
      	if(markDiv){
      		div.removeChild(markDiv);
      	}
      }
    },
    onPlayerPlay(){
      this.playerBoxShow = false;
      //console.log("开始播放");
      this.isAppendTime=false;
      //视频类的内容，开始播放时才会记录完成情况
      //2022-05-24修改，判断播放的
      let $this=this;
      //完成类型 completeSetup 0表默认，打开后5秒算学完，1表按进度，2表按时间
      //完成值（非默认情况下起作用） setupTage
      if(!$this.coursewareInfo.finish){
        let completeType=this.curriculumData.completeSetup;
        if(completeType==0){
          //默认5秒后学习完成.
          setTimeout(() => {$this.saveStudyInfo();}, 5000);
        }else{
          //先记录进行中的学习内容
          this.saveStudyItem();
        }
      }
    },
    onPlayerPause(){
      //console.log("暂停");
    },
    onPlayerEnded(){
       //this.onFullscreen(false);//退出全屏
       this.playerBoxShow = true;
       this.isAppendTime=true;//开始追加学习时间
       //this.saveStudyDuration();//保存添加学习时长
       if(!this.coursewareInfo.finish){
         this.finishStudyItem();
       }
    },
    onPlayerPlaying(itme){
      this.isAppendTime=false;//禁止追加学习时间
      this.appendStartTime=null;
      //console.log("当前播放11"+itme);
      let intTime=parseInt(itme);
      //console.log(intTime,'intTime');
      this.videoPlayingTime=intTime;
      //判断是否完成
      let completeType=this.curriculumData.completeSetup;
      let completeSecond=this.curriculumData.second;
      if(!completeSecond){
        completeSecond=5;//如果没有就采用默认的时间了
      }
      if(completeType>0 && !this.coursewareInfo.finish){ //因为1按进度，2按时长都是计算时间，所以这里直接大于0处理
          if(completeType==1){
            let finishPercent=this.curriculumData.setupTage;
            let videDuration=this.coursewareInfo.content.duration;
            let percent =intTime*100/videDuration;
            if(percent>=finishPercent){
                this.finishStudyItem();
            }
          }else if(completeType==2){
            if(intTime>completeSecond){
               this.finishStudyItem();
            }
          }
      }
      //以下是每10秒记录一次学习时长
      let saveTime=Math.floor(intTime%10);
      if(intTime>10 && saveTime==0 && this.coursewareInfo.studyItemId!=''){
        //记录播放时间
        //console.log('记录播放时间:'+intTime);
        let postData={
          itemId:this.coursewareInfo.studyItemId,
          videoTime:intTime
        }
        apicourseStudy.studyVideoTime(postData).then(rs=>{
           if(rs.status!=200){
             console.log('记录播放时间错误');
           }
        })
      }

    },
    audioPlaying(item,currentTime){
      let intTime=parseInt(currentTime);//秒
      //判断是否完成
      let completeType=this.curriculumData.completeSetup;
      let completeSecond=this.curriculumData.second;
      if(!completeSecond){
        completeSecond=5;//如果没有就采用默认的时间了
      }
      if(completeType>0 && !this.coursewareInfo.finish){ //因为1按进度，2按时长都是计算时间，所以这里直接大于0处理
          if(completeType==1){
            let finishPercent=this.curriculumData.setupTage;
            let videDuration=this.coursewareInfo.content.duration;
            let percent =intTime*100/videDuration;
            if(percent>=finishPercent){
                this.finishStudyItem();
            }
          }else if(completeType==2){
            if(intTime>=completeSecond){
               this.finishStudyItem();
            }
          }

      }
      //以下是每5秒记录一次学习时长
      let saveTime=Math.floor(intTime%10);
      if(intTime>10 && saveTime==0 && this.coursewareInfo.studyItemId!=''){
        //记录播放时间
        //console.log('记录播放时间:'+intTime);
        let postData={
          itemId:this.coursewareInfo.studyItemId,
          videoTime:intTime
        }
        apicourseStudy.studyVideoTime(postData).then(rs=>{
           if(rs.status!=200){
             console.log('记录播放时间错误');
           }
        })
      }
    },
    audioPlay(){
      //console.log("开始播放");
      let $this=this;
      if (!$this.coursewareInfo.finish) {
        let completeType=this.curriculumData.completeSetup;
        //console.log(completeType,"completeType");
        if(completeType==0){
          //默认5秒后学习完成.
          setTimeout(() => {$this.saveStudyInfo();}, 5000);
        }else{
          //先记录进行中的学习内容
          this.saveStudyItem();
        }
      }
    },
    audioPause(){
      //console.log("暂停");
    },
    audioEnd(){
      // this.playerBoxShow = true;
      if(!this.coursewareInfo.finish){
        this.finishStudyItem();
      }
    },
    changeTab(tab){
      this.playerBoxShow = false;
      this.saveStudyDuration();//保存一次学习时长，在切换时
      let $this = this;
      if (tab.name == "homework") {

      } else if (tab.name == "test") {

      } else if (tab.name == "assess") {
        // //console.log('加载评估信息');,评估只会有一个，所以主直接取
        // let params = {
        //   studyId: this.studyId,
        //   contentId: this.assessInfo.content.id
        // };
        // apicourseStudy.myAssessList(params).then(res => {
        //   if (res.status == 200) {
        //     if (res.result.length > 0) {
        //       this.assessInfo.allowSubmit = false;
        //       this.assessInfo.info = JSON.parse(res.result[0].asContent);
        //     }
        //   } else {
        //     this.$message.error(res.message);
        //   }
        // });
      } else {
        //在课件页面，记录开始时间
        //对于视频类的，是在点击开始播放后执行的
        if(this.coursewareInfo.content.contentType>10){
          this.isAppendTime=true;
          this.appendStudyTime(false);
          if(!this.coursewareInfo.finish){
             setTimeout(() => {$this.saveStudyInfo();}, 5000);
          }
        }else{
          this.isAppendTime=false;
        }
      }
    },
    saveStudyInfo() {
      //记录课件学习信息
      if (this.activeName != "courseware") {
        //只有在课件页面停留超过5秒才会记录
        return;
      }
      if (this.coursewareInfo.finish) {
        return;
      }
      let params = {
        studyId: this.studyId, //学习id,
        courseId: this.coursewareInfo.content.courseId, //课程id,
        contentId: this.coursewareInfo.content.id, //内容id,
        contentType:this.coursewareInfo.content.contentType, //内容id,
        contentName: this.coursewareInfo.content.contentName, //内容名称
        progress: 100,
        status:9,
        contentTotal: this.totalContent
      };
      apicourseStudy.studyContent(params).then(res => {
        if (res.status == 200) {
          this.coursewareInfo.studyItemId=res.result;
          this.coursewareInfo.finish = true; //课件内容已学习，记录状态
        } else {
          console.log("记录学习失败:" + res.message + "，" + res.error);
        }
      });
    },
    saveStudyDuration(){
       let duration=studyUtil.getStudyDuration();
       if(duration>0){
           let postData = {
             id:this.appentId,
             studyId: this.studyId,
             courseId: this.courseInfo.id,
             contentId: this.coursewareInfo.content.id,
             studyInfo:
               this.courseInfo.name +
               "-" +
               this.coursewareInfo.content.contentName,
             duration: duration
           };
           apicourseStudy.appendStudyTime(postData).then(rs => {
             if (rs.status == 200){
               this.appentId=rs.result;
               studyUtil.clearStudyDuration();//清除本地存储
             } else {
               console.log(rs.message);
             }
           });
       }
    },
    appendStudyTime(flag) {
      if(this.studyId==''){
        return;
      }

      if(!this.isAppendTime){
        //如果不追加时间，把追加开始时间设置为null
        this.appendStartTime=null;
        return;
      }

      if(this.appendHandle!=null){
        window.clearTimeout(this.appendHandle);
      }

      //首先从本地读取
      let duration=studyUtil.getStudyDuration();
      //追加学习时间
      let $this = this;
      if(this.appendStartTime == null) {
        this.appendStartTime = new Date();
        this.appendHandle=setTimeout(function() {$this.appendStudyTime();}, $this.appentInterval);
        if(duration>0 && flag){
          this.saveStudyDuration();
        }
        return;
      }
      //当前进行的时间
      let now = new Date();
      let m = now.getTime() - this.appendStartTime.getTime(); //相差的毫秒数
      let sen = parseInt(m / 1000); //计算秒数
      duration=duration+sen;
      if(flag){
         //这个时候才进行存储 ，否则只能是存储在本地
         if(duration>0){
            let postData = {
              id:this.appentId,
              studyId: this.studyId,
              courseId: this.courseInfo.id,
              contentId: this.coursewareInfo.content.id,
              studyInfo:
                this.courseInfo.name +
                "-" +
                this.coursewareInfo.content.contentName,
              duration: sen
            };
            apicourseStudy.appendStudyTime(postData).then(rs => {
              if (rs.status == 200){
                $this.appentId=rs.result;
                $this.appendStartTime = new Date(); //重置开始时间
                studyUtil.clearStudyDuration();//清除本地存储
              } else {
                console.log(rs.message);
              }
            });
         }

      }else{
        $this.appendStartTime = new Date(); //重置开始时间
        studyUtil.setStudyDuration(duration);//添加到本地存储中
      }
      this.appendHandle=setTimeout(function() {$this.appendStudyTime();},$this.appentInterval);
    },
    loadStudyInfo() {
      //获取学习信息
      let $this = this;
      this.loadScorePraiseAndTrample();
      apicourseStudy.studyInfo(this.courseInfo.id).then(res => {
        if (res.status == 200) {
          res.result.signup ? (this.enrollStutas = 2) : (this.enrollStutas = 1);
          if(res.result.signup) {
            //this.bootTabActive = 'commnets';//系统自动报名，这里不进行切换了
            this.studyId = res.result.studyId; //设置学习id
            //需要判断此内容是否已学习完成，如果已学习完成，不需要再请不说了
            res.result.contents.forEach(con => {
              if (con.contentId == $this.coursewareInfo.content.id) {
                  $this.coursewareInfo.studyItemId=con.id;
                  $this.coursewareInfo.status=con.status;
                  $this.coursewareInfo.progress=con.progress;
                  if(con.contentType==10 || con.contentType==20){
                    if(con.progress==100 || con.status==9){
                      $this.coursewareInfo.finish = true;
                    }else{
                      $this.coursewareInfo.finish = false;
                    }
                  }else{
                    $this.coursewareInfo.finish = true; //课件已学习
                  }
                  if(con.lastStudyTime){
                    //如果上次课件已经播放完成，此处应该是$this.coursewareInfo.content.duration
                    //也就是从头开开始
                    $this.videoPlayingTime=con.lastStudyTime;
                  }
                //console.log()
              }else if (con.contentId == $this.homeworkInfo.content.id) {
                  $this.homeworkInfo.studyItemId = con.id;
              }else if (con.contentId ==$this.examInfo.content.id) {
                  $this.examInfo.studyItemId = con.id;
              }else if (con.contentId == $this.assessInfo.content.id) {
                  $this.assessInfo.studyItemId = con.id;
              }
            });
            //存储上一次学习时长，主要用于上次未存储的学习时长
            this.saveStudyDuration();
            if(!$this.coursewareInfo.finish && $this.coursewareInfo.content.contentType>20) {
              //未完居，并且类型不是视频的，直接设计5秒后学习完成
                setTimeout(() => {$this.saveStudyInfo();}, 5000); //5秒后记录学习
                //开始记录学习时长
                $this.isAppendTime=true;
                $this.appendStudyTime(false);
            }
          }else{
            //signup 没有报名的情况下，直接报名
            this.submitEnroll();
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    submitEnroll() { //提交报名
      let pamars = {
        courseId: this.courseInfo.id,
        courseName: this.courseInfo.name,
        courseType: this.courseInfo.type,
        signType: 1,
        signInfo: ""
      };
      let $this = this;
      apicourseStudy.signup(pamars).then(res => {
        if (res.status == 200) {
          //this.$message({ type: "success", message: "报名成功" });
          this.enrollStutas = 2;
          this.studyId=res.result.studyId;//设置学习的ID
          //this.loadStudyInfo();
          if($this.coursewareInfo.content.contentType>20){
              this.isAppendTime=true;
              this.appendStudyTime(false); //报名成功记录开始时间
              //报名成功后，就直接记录课件学习情况，5秒后
              setTimeout(() => {$this.saveStudyInfo();}, 5000);
          }else{
             //对于视频类的处理，用户手动点击播放，不做处理
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    loadScorePraiseAndTrample() {
      //加载是否打过分
      //if(this.enrollStutas>1){
        apiCourseGrade.has(this.courseInfo.id).then(rs => {
          if (rs.status == 200 && rs.result) {
            this.scoreInfo.has = true;
          }
        });
      //}
      apiPraises.has(1, this.courseInfo.id).then(rs => {
        if (rs.status == 200 && rs.result) {
          this.isPraise = true;
        }
      });
      apiTrample.has(this.courseInfo.id).then(rs => {
        if (rs.status == 200 && rs.result) {
          this.isTrample = true;
        }
      });
    },
    addScore() {
      let that = this;
      let postData = {
        courseId: this.courseInfo.id,
        studyId: this.studyId,
        score: this.scoreInfo.score
      };
      if (this.scoreInfo.score > 0) {
        apiCourseGrade.grade(postData).then(rs => {
          if (rs.status == 200) {
            this.$message.success("打分成功，谢谢您的打分");
            that.scoreInfo.has = true;
            that.courseInfo.score = rs.result;
          } else {
            this.$message.error("打分处理失败，请稍后再试");
          }
        });
      }
    },
    praiseContent() {
      if(this.enrollStutas==1){
        this.$message.error("报名学习之后才可以点赞");
        return;
      }
      if(this.isTrample){
        this.$message.error("您已踩过了，不能再赞了");
        return;
      }
      if(this.interactRuning){
				return;
			}
			this.interactRuning=true;
      let postData = {
        objType: 1,
        objId: this.courseInfo.id,
        title: this.courseInfo.name
      };
      if(this.isPraise){
         apiPraises.remove(1,this.courseInfo.id).then(res=>{
           this.interactRuning=false;
           if (res.status == 200){
             if(this.courseInfo.praises>0){
               this.courseInfo.praises--;
             }
             this.$message.info("已取消点赞");
             this.isPraise = false;
           } else {
             this.$message.error("取消点赞失败,请稍后再试");
           }
          });
      }else{
        apiPraises.save(postData).then(rs => {
          this.interactRuning=false;
          if (rs.status == 200) {
            this.courseInfo.praises++;
            this.$message.success("点赞成功");
            this.isPraise = true;
          } else {
            this.$message.error("点赞失败,请稍后再试");
          }
        });
      }

    },
    treadContent() {
      if(this.enrollStutas==1){
        this.$message.error("只有报名学习后才可以踩");
        return;
      }
      if(this.isPraise){
        this.$message.error("您已赞过了，不能再踩了");
        return;
      }
      if(this.interactRuning){
					return;
			}
			this.interactRuning=true;
      if(this.isTrample){
        apiTrample.remove(this.courseInfo.id).then(rs => {
          this.interactRuning=false;
          if (rs.status == 200) {
            if(this.courseInfo.trampleCount>0){
              this.courseInfo.trampleCount--;
            }
            this.$message.info("已取消踩");
            this.isTrample = false;
          } else {
            this.$message.error("取消失败,请稍后再试");
          }
        });
      }else{
        apiTrample.trample(this.courseInfo.id).then(rs => {
          this.interactRuning=false;
          if (rs.status == 200) {
            this.courseInfo.trampleCount++;
            this.$message.success("已踩");
            this.isTrample = true;
          } else {
            this.$message.error("踩失败,请稍后再试");
          }
        });
      }

    },
    loadAuthorInfo(list,ids){ //加载作者信息，头像，机构信息
      if(ids.length==0){
        return;
      }
      apiUser.getByIds(ids).then(res=>{
        if(res.status==200){
          list.forEach((item,index)=>{
            res.result.some(author=>{
              if(author.aid==item.teacherId){
                if(author.avatar){
                  item.avatar=this.fileBaseUrl + author.avatar;
                }
                this.sex = author.sex
                return true;
              }else{
                return false;
              }
            })
          });
        }else{
          //console.log('加载课程信息失败:'+res.error);
          //this.$message.error(res.message);
        }
      });
    },
  }
};
</script>

<style scoped lang="scss" scoped>
.couretitle{
  word-break: break-all;
}
::v-deep .teacher .teacher-avator .teacher-text {
  background: none;
  border: none;
}
.player-box{
  position: absolute;
  width: 300px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 187px;
  background: rgba(74, 74, 74,.5);
  border-radius: 33px;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  .player-praise{
    margin-top: 25px;
    display: flex;
    // justify-items: center;
    justify-content: center;
  }
  .player-rate{
    margin-top: 39px;
  }
}
::v-deep .el-tabs__nav-wrap::after {
    background-color: #fff;
}
::v-deep .el-tabs__nav-wrap::after {
    background-color: #fff;
}
.qrcode{
    display: inline-block;
    img {
        width: 200px;
        height: 200px;
        background-color: #fff; //设置白色背景色
        padding: 6px; // 利用padding的特性，挤出白边
        box-sizing: border-box;
    }
}
.ref-score{

}
.portal-content ::v-deep .el-rate__icon{
  font-size: 24px !important;
}
::v-deep .el-tag {
    background-color: #ecf5ff;
    border-color: #409EFF;
    display: inline-block;
    height: 28px;
    padding: 0 10px;
    line-height: 28px;
    font-size: 12px;
    color: #3e7fff;
    border-width: 1px;
    border-style: solid;
    border-radius: 0px;
    box-sizing: border-box;
    white-space: nowrap;
}
.content{
  padding: 10px 0;
    font-size: 18px;
    color: #343434;
 img{
   width: 18px;
 }
}
.content-text{
  margin: 10px 0;
  font-size: 14px;
  text-indent: 2em;
  color: #666666;
  word-break:break-all;
}
   ::v-deep .el-tabs__item.is-active {
    color: #409EFF;
    font-size: 18px;
  }
  .icon-small{
    width: 20px;
    height: 20px;
    line-height: 20px;
    // vertical-align: middle;
  }
  .con-audio{
    padding: 50px;
    text-align: center;
    .con-audio-title{
      font-size: 16px;
      font-weight: 700;
    }
    .con-audio-player{
      padding: 20px 100px;
    }
  }
  .hyper-link{
    padding-left:20px;
    text-align: center;
    padding-top: 100px;
    .hyper-link-row{
      padding: 20px;
    }
  }
.red{
  background: red;
   background-image: linear-gradient(to bottom right, rgb(245, 30, 30) , rgb(241, 227, 21));
}
.paper-item-answer{
  line-height: 30px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}
.paper-item-opts{
   .el-radio {
        display: block;
      }
  .el-checkbox {
       display: block;
      }
}
.detail {
  background-color: #fff;
  padding: 5px 20px 10px 20px;
  position: relative;
    .detail-img{
  cursor: pointer;
   position: absolute;
   bottom: 0;
   right: 0;
  }
  .courseware-div {
    border: 1px solid #f0f0f0;
    min-height: 400px;

    // width: 876px;
    // font-size: 30px;
    text-align: center;
    // line-height: 100px;
    position: relative;
    .courseware-img {
      vertical-align: middle;
      width: 100%;
      height: 100%;
    }
    .courseware-enroll-btn {
      position: absolute;
      width: 270px;
      height: 68px;
      font-size: 22px;
      left: 230px;
      top: 165px;
      opacity: 0.3;
      background: #000000;
      border-radius: 21px;
    }
    .video-div {
      position: absolute;
      z-index: 999999999;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(101, 101, 101, 0.9);
      .good {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 200px;
        div {
          line-height: 1;
          margin: 0 15px;
          .svg-icon {
            width: 30px;
            height: 30px;
          }
        }
        div:nth-of-type(2) {
          .svg-icon {
            transform: scaleX(-1);
            transform: rotate(180deg);
          }
        }
      }
    }
  }
  .score {
        display: flex;
        justify-content: center;
        align-items: center;

        .el-rate {
          display: inline-block;

        }
        .score-text{
          font-size: 28px;
          color: #FFB30F ;
          font-family: "Arial";
          margin-left: 23px;
        }
        .score-no{
          color: #FFB30F;
          padding: 5px 0;
          background: #efefef;
          border-radius: 20px;
          width: 65px;
          font-size: 12px;
          font-weight: 600;
          text-align: center;
        }
      }
  .homework-div {
    border: 1px solid #bcbcbc;
    min-height: 500px;
    padding: 20px;
    font-size: 14px;
    .homework-title {
      font-weight: 600;
      margin-bottom: 10px;
    }
    .homework-content {
      color: #666;
      margin-bottom: 10px;
    }
  }
  .test-div {
    border: 1px solid #bcbcbc;
    min-height: 500px;
    padding: 20px;
    font-size: 16px;

    .test-info {
      margin-bottom: 10px;
      .el-radio {
        display: block;
      }
    }
  }
  .assess-div {
    border: 1px solid #bcbcbc;
    min-height: 500px;
    padding: 20px;
    font-size: 14px;
    .assess-info {
      margin-bottom: 10px;
    }
  }
  .cont {
    padding: 10px 25px 25px 25px;
    height: 540px;
    .title {
      font-size: 20px;
      font-weight: 600;
      line-height: 36px;
      word-break:break-all;
    }
    .course-info-tools-btns {
      ::v-deep .interact-bar-btns {
        justify-content: flex-start !important;
      }
      .course-info-tools-btn {
        margin: 0 15px 0 0;
      }
      margin-bottom: 15px;
    }
    .label {
      margin-bottom: 15px;
      .label-item {
        margin-right: 5px;
        margin-bottom: 5px;
      }
    }
    .keyword {
      margin-bottom: 15px;
      .label-item {
        margin-right: 5px;
      }
    }
    .study-count {
      padding: 20px 0;
      .num {
        color:  #444444;
        font-size: 16px;

      }
      margin-bottom: 15px;
    }
    .btn-div {
      margin-top: 30px;
      .btn{
        border-radius: 0px;
        font-size: 16px;
      }
    }
    .qr-code {
      cursor: pointer;
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 4px;
      div {
        text-align: center;
        font-size: 14px;
      }
    }
    .view-summary {
      position: absolute;
      margin-bottom: 10px;
      margin-left: 18px;
    }
  }
}
.summary-div {
  .summary-content {
    font-size: 14px;
    line-height: 25px;
  }
}
.info {
  background-color: #fff;
  margin-top: 20px;
  padding: 0 10px;
  .content {
    color: #666;
    line-height: 25px;
    text-indent: 2em;
    padding: 5px 10px;
  }
  .pinglun-div {
    background-color: #fff;
    padding: 0px 20px 10px 20px;
    .title {
      font-size: 16px;
      font-weight: 600;
      line-height: 50px;
      border-bottom: 1px solid #dfdfdf;
      .tip {
        color: #666;
        font-size: 12px;
        margin: 0 10px;
      }
    }
    .submit-div {
      margin: 15px 0;
    }
    .bottom {
      text-align: right;
    }

    .data {
      margin-top: 10px;
      background-color: #fff;
      padding: 5px 20px 10px 20px;
      .data-item {
        border-bottom: 1px solid #dfdfdf;
        margin-top: 10px;
        .top {
          font-size: 18px;
          font-weight: 600;
          span {
            font-size: 14px;
            color: #666;
            font-weight: normal;
          }
        }
        .text {
          margin: 15px 0 5px 0;
          padding-left: 40px;
          line-height: 35px;
        }
        .huifu {
          padding-left: 40px;
          padding-bottom: 10px;
          border-bottom: 1px solid #dfdfdf;
        }
        .result-div {
          padding-left: 40px;
          padding-top: 10px;
          .top {
            font-size: 16px;
          }
        }
        .up-div {
          padding: 0 15px;
          .up-btn {
            padding: 8px 20px;
            color: #000;
          }
        }
        img {
          margin-right: 10px;
          width: 30px;
          border: 1px solid #eee;
          border-radius: 50%;
          vertical-align: middle;
        }
      }
    }
  }
}
::v-deep .el-tabs__header{
	.el-tabs__item{
		font-size: 15px;
	}
	.is-active{
		font-size: 16px;
		font-weight: 600;
	}
}
.teacher {
  background-color: #ffffff;
  display: flex;
  border-top: 1px solid #e7e7e7;
  padding: 10px 0px;
  // .teacher-avator {

  // }
  .teacher-info {
    flex: 1;
    .teacher-name {
      padding: 0px 5px 10px 10px;
    }
    .teacher-remark {
      padding: 0px 5px 0px 10px;
      font-size: 12px;
      color: #797979;
    }
  }
}
.teachers {
  background-color: #fff;
  margin-top: 10px;
  padding: 5px 15px 5px 10px;
  .top {
    font-size: 16px;
    font-weight: 600;
    line-height: 50px;
  }
   div{
      img{
        width: 68px;
        height: 68px;
      }
    }
}
</style>
<style scoped>
.assessRadio1 /deep/ .el-radio-button__inner {
  padding-left: 36px;
  padding-right: 36px;
}

</style>
