<template>
  <div>
    <portal-header current="course"></portal-header>
    <div class="portal-content xcontent">
      <!-- <el-row class="nav">课程列表 >&emsp;课程详情</el-row> -->
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadname">
        <el-breadcrumb-item :to="{ path: '/course' }">课程列表</el-breadcrumb-item>
        <el-breadcrumb-item>课程预览</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-card :body-style="{ padding: '0px', 'min-height': '600px' }">
            <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: 500px;width: 100%;">
                        <course-image :course="courseInfo" class="courseware-img"  ></course-image>
                        <!-- <el-button type="warning"  @click="enroll" class="courseware-enroll-btn">报名后即可开始学习！</el-button> -->
                      </div>
                      <div class="courseware-div" v-else>
                       <div v-if="coursewareInfo.content.contentType == 10" style="position: relative;">
                           <videoPlayer :src="fileBaseUrl+coursewareInfo.content.content" style="width: 100%;"
                            @onPlayerPlaying="onPlayerPlaying"
                            @onPlayerPlay="onPlayerPlay"
                            :initTime="videoPlayingTime"
                            @onPlayerPause="onPlayerPause"
                            @onPlayerEnded="onPlayerEnded">
                        </videoPlayer>
                      </div>
                      <div v-if="coursewareInfo.content.contentType == 20">
                        <div class="con-audio">
                          <div class="con-audio-player">
                            <audioPlayer :url="fileBaseUrl+coursewareInfo.content.content"
                              :name="coursewareInfo.content.contentName"
                                @onPlaying="audioPlaying"
                                @onPlay="audioPlay"
                                @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">
                        <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;" v-html="coursewareInfo.content.content"></div>
                        </div>
                      <div v-if="coursewareInfo.content.contentType == 52">
                        <hyper-link :content="coursewareInfo.content"></hyper-link>
                          <!-- <div class="hyper-link" v-if="!showiframe">
                              <div class="hyper-link-row">课程内容是外部连接，请选择打开方式</div>
                              <div class="hyper-link-row">{{coursewareInfo.content.content}}</div>
                              <div class="hyper-link-row">
                                <el-button @click="showiframe = true" type="warning">本页面打开</el-button>
                                <el-button @click="widthOpen(coursewareInfo.content.content)" type="primary">新窗口打开</el-button>
                              </div>
                          </div>
                          <div v-if="showiframe">
                              <iframe :src="contentData.content" style="width: 100%;border:0px;min-height: 473px;" frameborder="0"></iframe>
                          </div> -->
                      </div>
                    </div>
                  </div>
                  </el-tab-pane>
                  <el-tab-pane label="作业" name="homework">
                    <div>
                      <div v-if="homeworkInfo.has" class="homework-div">
                        <div>
                          <div class="homework-title">作业名称</div>
                          <div class="homework-content">{{homeworkInfo.info.name}}</div>
                        </div>
                        <div>
                          <div class="homework-title">内容</div>
                          <div class="homework-content">{{homeworkInfo.info.content}}</div>
                        </div>
                        <div v-if="homeworkInfo.info.file">
                          <div class="homework-title">附件</div>
                          <div class="homework-content" style="color: blue">
                              <a :href="fileBaseUrl+homeworkInfo.info.file" target="_blank">下载作业附件</a></div>
                        </div>
                        <div>
                          <div class="homework-title">截止时间</div>
                          <div class="homework-content" :style="{color:homeworkInfo.close? 'red':''}">{{homeworkInfo.info.deadTime}}</div>
                        </div>
                        <div v-show="!homeworkInfo.close">
                          <div v-if="homeworkInfo.info.submitMode>1">
                            <div class="homework-title">作业内容</div>
                            <div class="homework-content"><textarea :rows="5" placeholder="请输入作业内容(限255个字)" v-model="homeworkInfo.answer" style="width: 100%"></textarea></div>
                          </div>
                          <div v-if="homeworkInfo.info.submitMode==1 || homeworkInfo.info.submitMode==3">
                              <div class="homework-title">上传作业</div>
                              <div class="homework-content">

                                  <!-- <div v-else >
                                      <el-button type="primary">选择文件并上传</el-button>
                                  </div> -->
                              </div>
                          </div>
                          <!-- <div style="text-align: center;padding-bottom: 10px;">
                              <el-button type="primary" @click="submitHomework()">{{homeworkInfo.records.length>0?'重新提交':'提交'}}</el-button>
                          </div> -->
                        </div>
                        <!-- <div>作业提交记录 -->
                         <!-- <el-table :data="homeworkInfo.records" style="width: 100%">
                            <el-table-column prop="endTime" label="提交时间" align="center"></el-table-column>
                            <el-table-column fixed="right" label="操作" width="100" align="center">
                              <template slot-scope="scope">
                                <el-button type="text" size="small">查看作业</el-button>
                              </template>
                            </el-table-column>
                          </el-table> -->
                        <!-- </div> -->
                      </div>
                      <div v-else style="text-align: center;padding-top: 20px;color: red;">此课程无作业</div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="考试" name="test">
                    <div>
                      <div v-if="examInfo.has" class="test-div">
                        <div v-if="!testStart">
                          <div>
                            <div class="test-info">考试时长：{{examInfo.info.testDuration}}分钟&emsp;&emsp;&emsp;&emsp;及格线：{{examInfo.info.passLine}}%
                              <!-- &emsp;&emsp;&emsp;&emsp;尝试次数：{{examInfo.info.times}} -->
                              </div>
                            <!-- <div class="test-info"> -->
                              <!-- 评分方式：{{examInfo.info.scoringType ===1 ? '最高一次':'最后一次'}} -->
                              <!-- &emsp;&emsp;&emsp;&emsp;及格线：{{examInfo.info.passLine}}%</div> -->
                          </div>
                          <!-- <div v-if="examInfo.allowSubmit" style="text-align: center; margin-bottom: 15px">
                            <el-button type="primary" @click="startTest()">开始考试</el-button>
                          </div> -->
                          <!-- <el-table :data="examInfo.records" style="width: 100%">
                            <el-table-column prop="lastTime" label="完成时间" align="center"></el-table-column>
                            <el-table-column prop="testDuration" label="用时(秒)" width="180" align="center"></el-table-column>
                            <el-table-column prop="score" label="成绩" width="180" align="center"></el-table-column>
                            <el-table-column fixed="right" label="操作" width="100" align="center">
                              <template slot-scope="scope">
                                <el-button @click="showExamAnswer(scope.row)" type="text" size="small">查看试卷</el-button>
                              </template>
                            </el-table-column>
                          </el-table> -->
                        </div>
                        <!-- <div v-else> -->
                          <div>
                            <div class="test-info" style="font-weight: 700;">共{{examInfo.paper && examInfo.paper.items && examInfo.paper.items.length}}题&emsp;&emsp;&emsp;&emsp;</div>
                            <div v-for="(item, index) in examInfo.paper.items" :key="item.id">
                              <!-- <div v-show="show == index"> -->
                                     <div class="test-info">{{index + 1}}.[{{testType(item.type)}}]{{item.content}}</div>
                                   <div class="test-info" v-if="item.type != 102">
                                  <el-radio-group v-model="item.userAnswer">
                                    <el-radio v-for="(it,indcc) in item.options" :key="indcc" :label="it.id">{{numberToLetter(indcc+1)}}.{{it.content}}</el-radio>
                                  </el-radio-group>
                                </div>
                                <div class="test-info" v-else>
                                      <el-checkbox v-for="(it,indcc) in item.options" :key="indcc" v-model="it.isCheck" :label="it.id">{{numberToLetter(indcc+1)}}.{{it.content}}</el-checkbox>
                                </div>
                                  </div>
                                  <!-- <el-button v-if="show == index && show<examInfo.paper.items.length-1" @click="show +=1">下一题</el-button> -->
                              <!-- </div> -->
                          <!-- </div> -->
                          <!-- <div style="text-align: center; margin-bottom: 15px"><el-button type="primary" @click="submitTest()">提交</el-button></div> -->
                        </div>
                      </div>
                      <div v-else style="text-align: center;padding-top: 20px;color: red;">此课程无考试内容</div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="评估" name="assess">
                    <div>
                      <div class="assess-div">
                        <div>
                          <div class="assess-info">课程满意度计算方式：{{assessInfo.info.countType}}；</div>
                          <div class="assess-info">满意度：{{assessInfo.info.countText}}</div>
                          <hr />
                          <div v-if="assessInfo.info.items">
                            <div v-for="(ass,assIdx) in assessInfo.info.items" :key="assIdx">
                              <div class="assess-info">{{assIdx+1}}.{{ass.question}}</div>
                              <div v-if="ass.qType==1" class="assess-info" style="height: 20px">
                                <span style="float: left">{{ass.minText}}</span>
                                <span style="float: right">{{ass.maxText}}</span>
                              </div>
                              <div v-if="ass.qType==1" class="assess-info">
                                <el-radio-group v-model="ass.answer" class="assessRadio1">
                                  <el-radio-button :label="1">1</el-radio-button>
                                  <el-radio-button :label="2">2</el-radio-button>
                                  <el-radio-button :label="3">3</el-radio-button>
                                  <el-radio-button :label="4">4</el-radio-button>
                                  <el-radio-button :label="5">5</el-radio-button>
                                  <el-radio-button :label="6">6</el-radio-button>
                                  <el-radio-button :label="7">7</el-radio-button>
                                  <el-radio-button :label="8">8</el-radio-button>
                                  <el-radio-button :label="9">9</el-radio-button>
                                  <el-radio-button :label="10">10</el-radio-button>
                                </el-radio-group>
                              </div>
                              <div v-if="ass.qType==9" class="assess-info">
                                <textarea :rows="4" v-model="ass.answer" style="width: 100%" placeholder=""></textarea>
                              </div>
                            </div>
                          </div>

                        </div>
                      </div>
                      <!-- <div v-else style="text-align: center;padding-top: 20px;color: red;">此课程无评估</div> -->
                    </div>
                  </el-tab-pane>
                </el-tabs>
                <div style="display: flex;justify-content: space-between;padding: 10px;">
                  <div class="score" style="display: flex;">
                    <el-rate disabled v-model="courseInfo.score" :max="5" :allow-half="true" show-score text-color="#ff9900" score-template="{value}"></el-rate>
                    <div v-if="!scoreInfo.has" style="margin-left:10px;cursor: pointer;">
                      <el-popover :disabled="scoreInfo.has" placement="top" width="300" trigger="hover">
                        <div style="text-align:center;line-height:50px;padding:20px 0px">
                              <el-rate  v-model="scoreInfo.score"></el-rate>
                              <div style="padding-top:30px">
                                <el-button @click="addScore">提交评分</el-button>
                              </div>
                        </div>
                        <el-tag class="ref-score" v-if="enrollStutas > 1 " slot="reference">去评分</el-tag>
                      </el-popover>
                    </div>
                  </div>
                  <div style="display: flex;justify-content: flex-end;cursor: pointer;padding-top: 5px;">
                    <div>
                      <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')"> 赞
                    </div>
                    <div style="margin-left: 15px;">
                      <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')"> 踩
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="6" class="cont">
                <interactBar :readonly="enrollStutas==1" :type="1" :data="courseInfo" :views="false" :comments="false"></interactBar>
                <div class="title">{{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>
                  <!-- <el-tag class="label-item" effect="plain">中心长</el-tag> -->
                </div>
                <div class="label" style="padding-top: 135px;">
                    <el-rate style="display: inline-block;" disabled v-model="courseInfo.score" score-template="{value}" show-score text-color="#ff8e00"></el-rate>
                    <span style="font-size: 14px;color: #f7ba2a;">分</span>
                </div>
                <!-- <div class="keyword"><el-tag class="label-item" effect="plain">质量</el-tag></div> -->
                <!--资源归属是一共有三级，这里只显示三级-->
                <!-- <div class="study-count">资源归属：{{courseInfo.resOwner}}</div> -->
                <!-- <div class="btn-div" style="padding-top: 20px;">
                  <el-button type="primary" v-if="enrollStutas == 1" @click="enroll">立即报名</el-button>
                  <el-button type="primary" v-else>已报名</el-button>
                </div> -->
                <!-- <div class="qr-code" style="padding-top: 50px;">
                  <img :src="`${webBaseUrl}/temp/qr-code.png`" />
                  <div>手机扫码观看</div>
                </div> -->
              </el-col>
                <!-- <img class="detail-img" v-show="!showQrcode" @click="showQrcode = true" src="../../../assets/images/qr.png" alt="" srcset="">
                <div class="qr-code" v-show="showQrcode" style="padding-top: 10px;">
                  <div id="qrcode" ref="qrcode" class="qrcode" ></div>
                  <div>手机扫码观看</div>
                </div> -->
              <!-- 11 -->
            </el-row>
          </el-card>
          <el-row :gutter="10">
            <el-col :span="18">
              <div style="background-color: #FFFFFF;padding: 20px;">
                 <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" :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="square" :size="50"></el-avatar>
                      <div v-else class="uavatar">
                         <div v-if="item.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>
        </el-col>
      </el-row>
    </div>
    <el-dialog :visible.sync="examInfo.detailShow" title="查询答卷详细信息" custom-class="g-dialog">
      <div>
        <!--答卷信息-->
         <div v-for="(ditem,didx) in examInfo.detailItems" :key="didx" class="paper-item">
          <div class="paper-item-q">{{didx +1}}.【{{testType(ditem.type)}}】{{ditem.content}}</div>
          <div class="paper-item-opts" style="padding-left: 20px;">
              <div  v-if="ditem.type==101 || ditem.type==103">
                <el-radio-group v-model="ditem.userAnswer" size="medium">
                  <el-radio v-for="(opt,optIdx) in ditem.options" :key="optIdx" :label="opt.id"><span>{{numberToLetter(optIdx+1)}}.{{opt.content}}</span></el-radio>
                </el-radio-group>
              </div>
             <div v-if="ditem.type==102">
               <!-- <el-checkbox-group v-model="ditem.userAnswer" size="medium"> -->
                  <el-checkbox v-for="(opt,optIdx2) in ditem.options" :key="optIdx2" v-model="opt.isCheck" :label="opt.id">{{numberToLetter(optIdx2+1)}}.{{opt.content}}</el-checkbox>
                <!-- </el-checkbox-group> -->
             </div>
          </div>
          <div class="paper-item-answer">
            <span>正确答案：</span>
            <span style="margin-left: 10px;" v-for="(opt,oidx) in ditem.options" :key="oidx" v-if="opt.answer">{{numberToLetter(oidx+1)}}</span>
            <!-- <span v-for="(opt,oidx) in ditem.options" :key="oidx" v-if="opt.answer && (ditem.type==101 || ditem.type==103)"> {{opt.id != ditem.userAnswer? '回答错误':'回答正确'}}</span> -->
            <span v-if="correctJudgment(ditem)" style="padding-left: 20px;color:green"><i class="el-icon-circle-check"></i>回答正确</span>
            <span v-else style="padding-left: 20px;color:red"><i class="el-icon-circle-close"></i>回答错误</span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer"><el-button type="primary" @click="examInfo.detailShow = false">关 闭</el-button></span>
    </el-dialog>
    <portal-footer></portal-footer>
  </div>
</template>

<script>
import hyperLink from '@/components/Course/hyperLink.vue';
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 apiCourse from "@/api/modules/course.js";
import apiCourseFile from "@/api/modules/courseFile.js";
import apiCoursePortal from "@/api/modules/coursePortal.js";
import apiUser from '@/api/system/user.js';
import {
  formatDate,
  resListMap,
  toScore,
  courseType,
  getType,
  numberToLetter,
  correctJudgment
} from "@/utils/tools.js";
import apicourseStudy from "@/api/modules/courseStudy.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 pdf from "vue-pdf";
import pdfPreview from "@/components/PdfPreview/index.vue";
// import {resOwnerIndexName} from '@/utils/type.js';
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";
export default {
  name: "micro",
  components: {
    portalHeader,
    portalFooter,
    interactBar,
    FileUpload,
    comments,
    pdfPreview,
    videoPlayer,
    audioPlayer,
    courseImage,
    hyperLink
  },
  computed: {
    ...mapGetters(['resOwnerMap','sysTypeMap']),
  },
  data() {
    return {
      tearsex:null,
      showQrcode:false,
      showiframe: false,//用于超连接的
      toScore,
      correctJudgment:correctJudgment,
      detailItems: [],
      show:0,
      studyId: "",
      tags: [],
      numberToLetter: numberToLetter,
      // resOwnerListMap: resOwnerIndexName,
      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
      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项
      coursewareInfo: {
        content: {},
        finish: false,
        studyItemId: ""
      },
      homeworkInfo: {
        has: false,
        content: {},
        info: {},
        studyItemId: "",
        filePath: "",
        answer: "",
        close: false,
        records: [] //作业记录
      },
      examInfo: {
        has: false,
        content: {},
        info: {},
        paper: [],
        studyItemId: "",
        records: [], //考试记录
        allowSubmit: true, //是否允许考试，尝试次数达到后不能再考试
        startTime: "",
        detailShow: false,
        detailItems: []
      },
      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
      },
      isPraise: false,
      isTrample: false,
      bootTabActive:'info',
      commentsTtoal:0,
      isAppendTime:true,
    };
  },
  mounted() {
    
    this.loadResOwners();
    let id = this.$route.query.id;
    this.courseInfo.id = id;
    this.showQrimage();
    let $this = this;
    //页面只支取一次，所以先直接写在这里面
    apiCoursePortal.detail(id,true).then(rs => {
      if (rs.status == 200) {
        console.log(rs,'2')
        this.courseInfo = rs.result.course;
        // this.courseInfo.score = this.toScore(rs.result.course.score);
        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 = "";
            item.sex = null;
            userIds.push(item.teacherId);
            ctoUsers.push({aid:item.teacherId,name:item.teacherName,sex:item.sex});
          })
          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 ($this.coursewareInfo.content.contentType == 40) {
              //需要读取pdf的路径
              if($this.coursewareInfo.content.content!='' && $this.coursewareInfo.content.content.indexOf('.pdf')==-1){
                  apiCourseFile.detail($this.coursewareInfo.content.contentRefId).then(cfrs=>{
                    if(cfrs.status==200){
                       $this.coursewareInfo.content.content=cfrs.result.previewFilePath;
                    }else{
                       $this.$message.error('加载pdf课件文件失败');
                    }
                  });
              }
              //let url = this.fileBaseUrl + r.content;
            }
            // //加载课件的学习情况
          } else if (con.sortIndex == 2) {
            $this.homeworkInfo.content = con;
            $this.homeworkInfo.has = true;
            //查询作业信息，并显示
            $this.loadHomeworkInfo();
          } 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内容
            $this.loadAssessInfo();
          }
        });

      } else {
        this.$message.error(rs.message);
      }
    });
  },
  methods: {
    showQrimage(row){
       this.qrcode = this.webBaseUrl+'/mobile/pages/resource/microDetail?id='+this.courseInfo.id;
        this.$nextTick(() => {
        //this.crateQrcode();
      });
     },
    crateQrcode(){
       this.qr = new QRCode('qrcode', {
        width: 150,
        height: 150, // 高度
        text: this.qrcode // 二维码内容
      });
    },
    ...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++;
    },
    onPlayerPlay(){
      //console.log("开始播放");
    },
    onPlayerPause(){
      //console.log("暂停");
    },
    onPlayerEnded(){
      //console.log("播放结束");
      this.isAppendTime=true;//开启追加学习时间
    },
    onPlayerPlaying(itme){
      this.isAppendTime=false;//禁止追加学习时间
      //console.log("当前播放11"+itme);
      let intTime=parseInt(itme);
      this.videoPlayingTime=intTime;
    },
    audioPlaying(item){
      //console.log("当前播放22"+item);
    },
    audioPlay(){
      //console.log("开始播放");
    },
    audioPause(){
      //console.log("暂停");
    },
    audioEnd(){
      //console.log("播放结束");
    },
    changeTab(tab) {
      let $this = this;
      if (tab.name == "homework") {
        //检查作业是否已过截止时间
        if (this.homeworkInfo.info.deadTime != "") {
          var d = new Date(this.homeworkInfo.info.deadTime);
          var now = new Date();
          if (now.getTime() > d.getTime()) {
            this.homeworkInfo.close = true;
          } else {
            this.homeworkInfo.close = false;
          }
        }
        if (this.homeworkInfo.records.length == 0) {
          let params = {
            studyId: this.studyId,
            contentId: this.homeworkInfo.content.id
          };

        }
      } else if (tab.name == "test") {
        if (this.examInfo.records.length == 0) {
          let params = {
            studyId: this.studyId,
            contentId: this.examInfo.content.id
          };
        }
      } else if (tab.name == "assess") {
        //console.log('加载评估信息');,评估只会有一个，所以主直接取
        let params = {
          studyId: this.studyId,
          contentId: this.assessInfo.content.id
        };
      } else {

      }
    },
    saveStudyInfo() {
      //记录课件学习信息
      if (this.activeName != "courseware") {
        //只有在课件页面停留超过5秒才会记录
        return;
      }
      if (this.coursewareInfo.finish) {
        return;
      }

    },
    startTest() {
      this.examInfo.startTime = new Date();
      this.testStart = true;
    },
    // 提交考试
    submitTest() {

    },
    showExamAnswer(item) {
      //显示试卷的答卷信息
      this.examInfo.detailShow=true;

    },
    testType(type) {
      //此方法移到tools中
      let name = "";
      switch (type) {
        case 101:
          name = "单选";
          break;
        case 102:
          name = "多选";
          break;
        case 103:
          name = "判断";
          break;
      }
      return name;
    },
    //作业上传
    uploadHomeworkFile(res) {
      this.homeworkInfo.filePath = res.result.filePath;
    },
    removeHomeworkFile() {

    },
    submitHomework() {
    },
    loadHomeworkInfo() {
      apiCourse.getHomework(this.homeworkInfo.content.id).then(res => {
        if (res.status == 200) {
          this.homeworkInfo.info = res.result;
        } else if (res.status == 404) {
          //没有找到作业信息
        } else {
          this.$message.error(res.message);
        }
      });
      //
    },
    loadExamInfo() {
      apiCourse.getExam(this.examInfo.content.id).then(res => {
        if (res.status == 200) {
          this.examInfo.info = res.result;
          this.examInfo.paper = JSON.parse(res.result.paperContent);
        } else if (res.status == 404) {
          //没有找到考试信息
        } else {
          this.$message.error(res.message);
        }
      });
    },
    loadAssessInfo() {
      //评估保存失败
      if (
        this.assessInfo.content.content != "" &&
        this.assessInfo.content.content.length > 10
      ) {
        let json = JSON.parse(this.assessInfo.content.content);
        if (json) {
          json.items.forEach(item => {
            if (item.qType == 1) {
              item.answer = 0;
            } else {
              item.answer = "";
            }
          });
        }
        //console.log(json)
        this.assessInfo.info = json;
      }
    },
    enroll() {
      let pamars = {
        courseId: this.courseInfo.id,
        courseName: this.courseInfo.name,
        courseType: this.courseInfo.type,
        signType: 1,
        signInfo: ""
      };
      this.enrollStutas = 2;
    },
    loadScorePraiseAndTrample() {

    },
    addScore() {

    },
    praiseContent() {

    },
    treadContent() {

    },
    loadAuthorInfo(list,ids){ //加载作者信息，头像，机构信息
      if(ids.length==0){
        return;
      }
      apiUser.getByIds(ids).then(res=>{
        if(res.status==200){
          // console.log(res)
          list.forEach((item,index)=>{
            res.result.some(author=>{
              if(author.aid==item.teacherId){
                item.sex = author.sex;
                // this.tearsex = item.sex;
                 console.log(this.tearsex)
                  console.log(author.sex,item.sex,'sexs')

                //  console.log(item.sex)
                if(author.avatar){
                  item.avatar=this.fileBaseUrl + author.avatar;

                }


                return true;
              }else{
                return false;
              }
            })
          });
        }else{
          //console.log('加载课程信息失败:'+res.error);
          //this.$message.error(res.message);
        }
      });
    },
  }
};
</script>

<style scoped lang="scss">
.couretitle{
  word-break: break-all;
}
.ref-score{
  background: #e4e4e4;
  width: 64px;
  height: 32px;
  border-radius: 17px;
  // opacity: 0.24;
  color: #000;
  font-size: 14px;
  border: none;
}
.portal-content ::v-deep .el-rate__icon{
  font-size: 24px !important;
}

.content{
 img{
   width: 18px;
   vertical-align: middle;
 }
}
.content-text{
 padding-left: 30px;
 min-height: 50px;
 font-size: 14px;
 word-break:break-all;
 color:  #666666;
}
   ::v-deep .el-tabs__item.is-active {
    color: #409EFF;
    font-size: 20px;
  }
  .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;
}
.breadname {
  margin-bottom: 15px;
  font-size: 18px;
}
.paper-item-opts{
   .el-radio {
        display: block;
      }
  .el-checkbox {
       display: block;
      }
}
.detail {
  background-color: #fff;
  padding: 5px 20px 10px 20px;
   .detail-img{
   position: absolute;
   bottom: 0;
   right: 0;
  }
    .qr-code {
      margin-top: 5px;
      margin-bottom: 10px;
      position: absolute;
      bottom: 0;
      right: 46px;
      // img {
      //   width: 120px;
      //   height: 120px;
      // }
      div {
        width: 120px;
        text-align: center;
        font-size: 14px;
      }
    }
  .courseware-div {
    border: 1px solid;
    min-height: 500px;

    // 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: 400px;
      top: 225px;
      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);
          }
        }
        // margin-bottom: 50px;
        // line-height: 20px;
        // .el-link{
        //   font-size: 30px;
        //   color: #70a5f4;
        //   margin: 0 30px;
        // }
      }
      .score {
        display: flex;
        justify-content: center;
        align-items: 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: 25px;
    height: 540px;
    .title {
      font-size: 22px;
      font-weight: 600;
      line-height: 50px;
      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;
    }
    .qr-code {
      margin-top: 5px;
      margin-bottom: 10px;
      img {
        width: 120px;
        height: 120px;
      }
      div {
        width: 120px;
        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;
        }
      }
    }
  }
}
.teacher {
  background-color: #ffffff;
  display: flex;
  border-top: 1px solid #e7e7e7;
  padding: 10px 0px;
  .teacher-avator {
    .uavatar{
      div{
        img{
          width: 50px;
          height: 50px;
        }
      }
    }
  }
  .teacher-info {
    flex: 1;
    .teacher-name {
      padding: 0px 5px 10px 10px;
    }
    .teacher-remark {
      padding: 0px 5px 0 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;
  }
}
</style>
<style scoped>
.assessRadio1 /deep/ .el-radio-button__inner {
  padding-left: 36px;
  padding-right: 36px;
}
</style>
