<template>
  <a-card :bordered="false" title="课件预览">
    <template slot="extra">
      <h4 style="margin-right: 15px; display:inline-block">{{courseware.classifyName}}</h4>
      <a-button v-if="!!!coursewareId" size="small" @click="goback">返回</a-button>
    </template>

    <div style="width:100%;height:600px;">
      <a-row class="left">
        <a-col :span="14">
          <!-- 这里面对应放视频 -->
          <div v-if="courseware.type == '1'">
            <video-player class="vjs-custom-skin" ref="videoPlayer" :options="playerOptions" :playsinline="true"></video-player>
          </div>

          <p v-if="courseware.type == '2'" class="text">课件名称：《{{coursewareName}}》</p>
          <div v-if="courseware.type == '2'" style="margin-left: 30%;margin-top:15%">
            <a-card class="card">
              <div>
                <a-button type="primary" icon="arrow-down" @click="download" class="down">
                  课件下载
                </a-button>
              </div>
            </a-card>
          </div>
        </a-col>
        <a-divider type="vertical" :dashed="false" />
        <a-divider type="vertical" :dashed="false" />
        <a-col :span="10" style="flex-shrink: 0; background-color: #f0f2f5">
          <div>
            <a-tabs default-active-key="1" @change="callback" style="margin-left: 50px">
              <a-tab-pane key="1" tab="课件" style="font-weight: bold">
                <a-radio-group v-model="value" @change="onChange">
                  <div class="coursewarePath">
                    <p style="font-weight: bold; margin-bottom:30px" v-for="(item,index) in courseware.videoList" :key="index" :class="{ active_color: index == isactive }" @click="play(item.path,index,item.name)">
                      {{item.name}}</p>
                  </div>
                </a-radio-group>
              </a-tab-pane>
              <a-tab-pane key="2" tab="课中检测" force-render>
                <div v-if="question.length == 0">
                  <a-empty description="还没有设置必选题~~" />
                </div>
                <div v-if="question.length != 0">
                  <div style="margin-left: 10px;" v-for="(item,index) in question" :key="index">
                    <h1 style="font-weight: bold;" v-if="question != null && question.length != 0">
                      {{index+1}}.（{{ item.questionTypeName }}）{{ item.questionName }}
                    </h1>

                    <!-- 显示单选题和多选题 -->
                    <div v-if="item.questionType == 1 || item.questionType == 2">
                      <div class="answer">A. {{ item.answerA }}</div>
                      <div class="answer">B. {{ item.answerB }}</div>
                      <div class="answer">C. {{ item.answerC }}</div>
                      <div class="answer">D. {{ item.answerD }}</div>
                      <div v-if="item.answerE" class="answer">E. {{ item.answerE }}</div>
                      <div v-if="item.answerF" class="answer">F. {{ item.answerF }}</div>
                    </div>

                    <!-- 显示简答题 || 判断题内容-->
                    <div v-if="item.questionType == 3 || item.questionType == 4">
                      <div class="answer">正确答案:&nbsp;&nbsp;&nbsp;&nbsp;{{ item.rightAnswers }}</div>
                    </div>

                    <!-- 显示填空题 -->
                    <div>
                      <div class="answer" v-for="(item1, ind) in item.answerList" :key="ind">
                        正确答案{{ ind + 1 }}:&nbsp;&nbsp;&nbsp;&nbsp;{{ item1 }}
                      </div>
                    </div>

                    <div class="info_parent" v-if="question != null && question.length != 0">
                      <div class="info">解析</div>
                      <div class="info_main">
                        {{ item.asnwerParse }}
                      </div>
                    </div>
                    <a-divider :style="{ backgroundColor: '#000' }" />
                  </div>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
        </a-col>
      </a-row>
    </div>
  </a-card>
</template>

<script>
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import { videoPlayer } from 'vue-video-player'
import { coursewareDeatil } from '@/api/course/courseware'
import { testing } from '@/api/course/question/requiredQuestion'

export default {
  components: { videoPlayer },
  props: {
    coursewareId: {
      type: Number,
    }
  },
  watch: {
  },
  data() {
    return {
      images:[],
      type: 1,
      isactive: 0,
      queryParam: { coursewareId: this.$route.query.coursewareId || this.coursewareId },
      courseware: [], //课件详情
      question: [], //课中检测
      coursewareName: '',
      path: '', //课件下载路径
      value: 'a',
      playerOptions: {
        // width: 800,
        height: '650',
        fluid: false,
        autoplay: false, //进入时是否开始自动播放
        muted: true,
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0], //设置倍速
        sources: [
          //类型： Array 一组对象，它们反映了本机元素具有一系列子元素的能力。这应该是带有src和type属性的对象数组
          // {
          //   type: 'video/mp4',
          //   src: this.videoPath,
          // },
        ],
        // poster: 'https://pica.zhimg.com/v2-c79ec963f532b2ad2749d5c71353c0d0_1440w.jpg?source=172ae18b', //封面图片
      },
    }
  },
  created() {
    console.log('porp - coursewareId :',this.coursewareId)
    let parameter = {}
    coursewareDeatil(Object.assign(parameter, this.queryParam)).then((res) => {
      //课件内容
      this.courseware = res.data
      if (this.courseware.videoList.length > 0) {
        //视频截取的封面图
        if (this.courseware.image != '' || this.courseware.image) {
          this.images = this.courseware.image.split(",");
          this.playerOptions.poster = this.images[0];
        }
        //课件视频展现
        if (this.courseware.type == '1') this.play(this.courseware.videoList[0].path, 0)

        //文本下载
        if (this.courseware.type == '2') {
          this.coursewareName = this.courseware.videoList[0].name
          this.path = this.courseware.videoList[0].path
        }
      }

      //课中检测必选题
      testing(Object.assign(parameter, this.queryParam)).then((res1) => {
        this.question = res1.data
      })
    })
  },
  methods: {
    //返回
    goback() {
      this.$router.push({ path: '/course/CoursewareList', query: { id: this.$route.query.courseId } })
    },

    //选择播放的文件/下载的文件
    play(path, index, name) {
      this.isactive = index

      if (this.courseware.type == '2') {
        this.coursewareName = name
        this.path = path
      } else {
        // 加载视频
        this.playerOptions.sources = []
        this.playerOptions.sources.push({ type: 'video/mp4', src: path })
        console.log("index",index);
        console.log("images",this.images);
        this.playerOptions.poster = this.images[index]
        
      }
    },

    //下载课件
    download() {
      window.location.href = this.path //文件下载
    },

    //控制显示视频还是课中检测
    callback(key) {
      console.log(key)
    },
    onChange(e) {
      console.log(`checked = ${e.target.value}`)
    },
  },
}
</script>
<style lang="less" scoped>
.vjs-custom-skin {
  width: 100%;
}

.coursewarePath {
  margin: 20px 0 0 0;
  cursor: pointer;
}

.active_color {
  color: rgba(63, 191, 241, 0.685);
  font-weight: bold;
  display: inline-block;
}
.left {
  height: 100%;
  background-color: #f0f2f5;
}
.text {
  margin-top: 40px;
  font-weight: bold;
  font-size: 25px;
  display: inline-block;
}
.answer {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 13px;
}
.info_parent {
  margin-top: 10px;
  height: auto;
}
.info {
  width: 50px;
  height: 20px;
  line-height: 15px;
  text-align: center;
  font-size: 13px;
  border: 1px solid #000;
  background-color: white;
}
.info_main {
  width: calc(100% - 50px - 20px);
  margin-left: 20px;
  font-size: 13px;
  margin-left: 70px;
  margin-top: -20px;
}
.text {
  font-size: 15px;
  white-space: pre-wrap;
  word-break: normal;
  word-wrap: break-word;
  text-align: center;
  margin-left: 20px;
}
.card {
  width: 300px;
  height: 200px;
  position: relative;
  width: 350px;
  height: 160px;
}
.down {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 3px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
