<template>
  <div class="ppt-player">
    <template v-if="ppts.length">
      <div class="ppt-player-preview">
        <img :src="pptUrl" v-if="pptUrl" />
      </div>
      <div class="ppt-player-controls">
        <div class="ppt-player-controls__page">
          <template v-if="currentIndex >= 0">
            <i class="el-icon-arrow-left" @click="prev"></i>
          </template>
          <template v-if="currentIndex + 1 < ppts.length">
            <i class="el-icon-arrow-right" @click="next"></i>
          </template>
        </div>
        <div class="ppt-player-controls__pages">
          <span class="is-active">{{currentIndex + 1}}</span>
          /
          <span>{{ppts.length}}</span>页
        </div>
        <div class="ppt-player-controls__tools">
          <el-tooltip content="PPT同步视频播放">
            <i :class="['el-icon-self-xuexiao', (isSync ? 'active' : '')]" @click="onToggleSync"></i>
          </el-tooltip>
          <el-tooltip content="放大PPT">
            <i class="el-icon-self-quanping" @click="fullscreen"></i>
          </el-tooltip>
          <el-tooltip content="切换视频到当前PPT页">
            <i class="el-icon-self-shipin" @click="setVideoTime"></i>
          </el-tooltip>
          <el-tooltip content="关闭PPT">
            <i class="el-icon-self-guanbi" @click="$emit('close')"></i>
          </el-tooltip>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'ppt-player',
  props: {
    ppts: { type: Array },
    index: { type: Number, default: 0 }
  },
  data() {
    return {
      currentIndex: this.index,
      isSync: true,
      isFullscreen: false
    }
  },
  watch: {
    index: {
      handler(value) {
        if (this.isSync) {
          this.currentIndex = value
        }
      }
    }
  },
  computed: {
    pptUrl() {
      return this.ppts[this.currentIndex]
        ? this.ppts[this.currentIndex].ppt_url
        : ''
    }
  },
  methods: {
    gotoIndex(index) {
      this.currentIndex = index
    },
    getIndex(index) {
      return Math.min(this.ppts.length - 1, Math.max(0, index))
    },
    prev() {
      this.currentIndex = this.getIndex(this.currentIndex - 1)
      this.isSync = false
    },
    next(e) {
      this.currentIndex = this.getIndex(this.currentIndex + 1)
      this.isSync = false
    },
    onToggleSync(e) {
      this.isSync = !this.isSync
    },
    setVideoTime(e) {
      this.isSync = true
      this.$emit('videoSyncTime', this.ppts[this.currentIndex].ppt_point)
    },
    // 全屏
    fullscreen() {
      this.isFullscreen = !this.isFullscreen
      this.$emit('fullscreen', this.isFullscreen)
    }
  }
}
</script>

<style lang="scss" scoped>
.ppt-player {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #000;
}
.ppt-player-preview {
  height: 100%;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.ppt-player-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  line-height: 44px;
  padding: 0 14px;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
}
.ppt-player-controls__page {
  width: 90px;
  color: #fff;
  i {
    padding: 0 10px;
    font-size: 18px;
    cursor: pointer;
  }
}
.ppt-player-controls__pages {
  flex: 1;
  color: #fff;
  text-align: center;
}
.ppt-player-controls__pages .is-active {
  color: #d29f29;
}
.ppt-player-controls__tools {
  float: right;
}
.ppt-player-controls__tools i {
  color: #fff;
  margin: 0 10px;
  cursor: pointer;
}
.ppt-player-controls__tools i.active,
.ppt-player-controls__tools i:hover {
  color: #d29f29;
}
.ppt-player-controls__tools .icon-rotate {
  font-size: 1.125em;
}
</style>
