<template>
  <div class="player" v-if="chatperResources">
    <div class="player-main">
      <div class="player-column" v-show="videoVisible">
        <!-- 视频 -->
        <video-player
          :isSkip="isSkip"
          :video="chatperResources.video"
          @timeupdate="onTimeupdate"
          ref="videoPlayer"
        ></video-player>
      </div>
      <div class="player-column" v-if="pptVisible">
        <!-- ppt -->
        <ppt-player
          :ppts="chatperResources.ppts"
          @close="pptVisible = false"
          @fullscreen="onPPTFullscreen"
        ></ppt-player>
      </div>
    </div>
    <div class="player-footer">
      <em class="player-button player-button-download" v-if="chapter.pdf">
        <a :href="chapter.pdf" download target="_blank">下载PPT</a>
      </em>
      <em :class="pptClass" @click="togglePPTVisible" v-if="chatperResources.ppts.length">同步显示PPT</em>
      <em :class="skipClass" @click="toggleSkip">始终跳过片头</em>
    </div>
  </div>
</template>

<script>
// api
import * as api from '../../api/index'
// components
import videoPlayer from './videoPlayer.vue'
import pptPlayer from './pptPlayer.vue'

export default {
  name: 'ChapterPlayer',
  components: { videoPlayer, pptPlayer },
  props: {
    // 当前章节
    chapter: { type: Object },
    // PPT当前选中的索引
    pptIndex: { type: Number, default: 0 }
  },
  data() {
    return {
      videoVisible: true,
      pptVisible: false,
      isSkip: false,
      chatperResources: null
    }
  },
  watch: {
    pptIndex(index) {
      this.updateVideoCurrentTime(index)
    }
  },
  computed: {
    // 视频资源ID
    resourceId() {
      return this.chapter.resource_id
    },
    /**
     * 视频提供者
     * @return 1是CC加密; 2是非加密; 3是阿里云
     */
    videoProvider() {
      const video = this.chapter.video || {}
      return video.video_provider || 3
    },
    pptClass() {
      return {
        'player-button': true,
        'player-button-ppt': !this.pptVisible,
        'player-button-ppt__active': this.pptVisible
      }
    },
    skipClass() {
      return {
        'player-button': true,
        'player-button-skip': !this.isSkip,
        'player-button-skip__active': this.isSkip
      }
    }
  },
  methods: {
    // 同步显示PPT
    togglePPTVisible() {
      this.videoVisible = true
      this.pptVisible = !this.pptVisible
    },
    // 始终跳过片头
    toggleSkip() {
      this.isSkip = !this.isSkip
    },
    // PPT全屏
    onPPTFullscreen(value) {
      this.videoVisible = !value
    },
    // 当前播放时间更新
    onTimeupdate(time) {
      const ppts = this.chatperResources.ppts || []
      let index = this.chatperResources.ppts.findIndex(
        item => item.ppt_point > time
      )
      index = index !== -1 ? index - 1 : ppts.length - 1
      this.$emit('change-ppt', index)
    },
    // 更新视频当前播放时间
    updateVideoCurrentTime() {
      const player = this.$refs.videoPlayer.player
      const ppt = this.chatperResources.ppts[this.pptIndex]
      ppt && player.seek(ppt.ppt_point) // 增加2秒
    },
    // 获取章节视频详情
    getChapterVideo() {
      // 视频播放类型 1是CC加密; 2是非加密; 3是阿里云
      if (this.videoProvider === 3) {
        api.getChapterVideoAliyun(this.resourceId).then(response => {
          this.chatperResources = response
          Array.isArray(response.ppts) && this.$emit('pptupdate', response.ppts)
        })
      } else {
        api.getChapterVideo(this.resourceId).then(response => {
          this.chatperResources = response
          Array.isArray(response.ppts) && this.$emit('pptupdate', response.ppts)
        })
      }
    }
  },
  beforeMount() {
    this.getChapterVideo()
  }
}
</script>

<style lang="scss" scoped>
.player {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #3f3f3f;
}
.player-main {
  display: flex;
  flex: 1;
}
.player-column {
  flex: 1;
  height: 100%;
}
.player-footer {
  display: flex;
  align-items: center;
  height: 54px;
  padding: 0 20px;
  font-size: 14px;
  color: #a0a0a0;
  a {
    color: #a0a0a0;
    text-decoration: none;
  }
  em {
    margin-right: 40px;
    cursor: pointer;
  }
}
.player-button {
  display: inline-block;
  color: #a0a0a0;
  padding-left: 25px;
  font-size: 14px;
  line-height: 18px;
  margin: 0 20px;
  background: url(../../assets/play-icons.png) no-repeat 0 0;
  cursor: pointer;
}
.player-button-download {
  background-position: 0 -240px;
}
.player-button-ppt {
  background-position: 0 -240px;
}
.player-button-ppt__active {
  background-position: 0 -280px;
  color: #b19241;
}
.player-button-skip {
  background-position: 0 -160px;
}
.player-button-skip__active {
  background-position: 0 -200px;
  color: #b19241;
}
</style>
