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

<script>
import videoPlayer from './videoPlayer.vue'
import pptPlayer from './pptPlayer.vue'
export default {
  name: 'Player',
  components: { videoPlayer, pptPlayer },
  props: {
    video: { type: Object },
    pdf: { type: String },
    ppts: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      videoVisible: true,
      pptVisible: false,
      isSkip: false
    }
  },
  computed: {
    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
    }
  }
}
</script>

<style lang="scss" scoped>
.player {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.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>
