<template>
<div class="play-ppt" ref="wrap">
  <template v-if="ppts.length">
    <div class="play-preview" ref="preview">
      <template v-if="ppts[state.index] && ppts[state.index].ppt_url">
        <img :src="ppts[state.index].ppt_url" class="play-ppt-img" style='vertical-align: middle' />
      </template>
    </div>
    <div class="play-controls cl">
      <div style="float: left;">
        <template v-if="state.index >= 0">
          <a href="#" @click="prev" style='margin: 0 20px 0 0; color: #fff;'><i class="el-icon-arrow-left"></i></a>
        </template>
        <template v-if="state.index + 1 < ppts.length">
          <a href="#" @click="next"><i class="el-icon-arrow-right" style="color: #fff;"></i></a>
        </template>
      </div>
      <div class="play-page">
        <span class="play-now">{{state.index + 1}}</span>
        /
        <span class="play-total">{{ppts.length}}</span>页
      </div>
      <div class="play-amazing">
        <i :class="['el-icon-self-xuexiao', (state.sync ? 'active' : '')]" @click="onToggleSync"></i>
        <i class="el-icon-self-quanping" @click="() => { this.$emit('onPptOnly') }"></i>
        <i class="el-icon-self-shipin" @click="onSetVideoTime"></i>
        <i class="el-icon-self-guanbi" @click="() => { this.$emit('onClose') }"></i>
      </div>
    </div>
  </template>
</div>
</template>

<script>
/**
 * ppt播放框
 *  如果同步显示，则同步props.currentIndex到state.index，否则，仅使用state.index
 */
export default {
  props: {
    ppts: { type: Array, require: false },
    currentIndex: { type: Number, require: false, default: 0 }
  },
  data () {
    return {
      state: {
        index: this.currentIndex, // ppt展示序号
        sync: true // 视频播放时，同步调整ppt展示
      }
    }
  },
  watch: {
    currentIndex: {
      handler () {
        if (this.state.sync) {
          this.state.index = this.currentIndex
        }
      }
    }
  },
  methods: {
    gotoIndex (index) {
      this.state.index = index
    },
    getIndex (index) {
      return Math.min(this.ppts.length - 1, Math.max(0, index))
    },
    prev (e) {
      this.state.index = this.getIndex(this.state.index - 1)
      this.state.sync = false
    },
    next (e) {
      this.state.index = this.getIndex(this.state.index + 1)
      this.state.sync = false
    },
    onToggleSync (e) {
      this.state.sync = !this.state.sync
      this.state.index = this.state.sync ? this.currentIndex : this.state.index
    },
    onSetVideoTime (e) {
      this.$emit('onVideoSyncTime', this.ppts[this.state.index].ppt_point)
    },
    setSize (w, h) {
      this.$refs.wrap.style.width = w + 'px'
      this.$refs.wrap.style.height = h + 'px'
      this.$refs.preview.style.lineHeight = (h - 44) + 'px'
    }
  }
}
</script>
