<template>
  <a-card :bordered="false">
    <div class="video-box">
      <div class="video-title">建筑施工安全培训第一期课程学习</div>
      <div class="video-main">
        <video-player
          class="vjs-custom-skin"
          ref="videoPlayer"
          :options="playerOptions"
          :playsinline="true"
          @ended="onPlayerEnded($event)"
        ></video-player>
      </div>
    </div>
    <div class="video-info">
      <a-tabs :default-active-key="activeTab" @change="tabChange">
        <a-tab-pane key="1" tab="课程目录">
          <div class="tab-box">
            <CourseCatalogue></CourseCatalogue>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="模拟测试">
          <div class="tab-box">
            <SimulationTest></SimulationTest>
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" tab="作业"> Content of Tab Pane 3 </a-tab-pane>
        <a-tab-pane key="4" tab="学习统计"> Content of Tab Pane 3 </a-tab-pane>
      </a-tabs>
    </div>
    <!-- 课中考试 -->
    <ExamDialog ref="examDialog"></ExamDialog>
  </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 CourseCatalogue from './CourseCatalogue.vue'
import SimulationTest from './SimulationTest.vue'
import ExamDialog from './ExamDialog.vue'

export default {
  components: { CourseCatalogue, SimulationTest, ExamDialog, videoPlayer },
  data() {
    return {
      activeTab: '1',
      playerOptions: {
        height: '360',
        autoplay: false,
        muted: false,
        language: 'zh-CN',
        sources: [
          {
            type: 'video/mp4',
            src: 'http://vjs.zencdn.net/v/oceans.mp4',
          },
        ],
        controlBar: {
          /* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
          children: [
            { name: 'playToggle' }, // 播放按钮
            { name: 'currentTimeDisplay' }, // 当前已播放时间
            { name: 'progressControl' }, // 播放进度条
            // { name: 'durationDisplay' }, // 总时间
            {
              name: 'volumePanel', // 音量控制
              inline: false, // 不使用水平方式
            },
            { name: 'FullscreenToggle' }, // 全屏
          ],
        },
        poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg',
      },
    }
  },
  methods: {
    tabChange(key) {
      console.log('key', key)
      // this.$refs.videoPlayer.player.play() // 播放
      // this.$refs.videoPlayer.player.pause() // 暂停
      // this.$refs.videoPlayer.player.src('src') // 重置进度条复制代码
    },
    // 当视频播放完毕的回调处理
    onPlayerEnded() {
      this.$refs.examDialog.show()
    },
  },
}
</script>

<style lang="less" scoped>
.video-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.video-info {
  margin-top: 15px;
}

::v-deep .ant-tabs-nav-scroll {
  text-align: center;
}
.tab-box {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}
</style>
