<template>
<div class="tab-pane">
  <ul class="lecture-list">
    <template v-for="(item, index) in ppt.imgUrls">
      <li v-bind:key="index" @click="onClickPpt" :data-index="index" :class="[(index === ppt.selectIndex ? 'on' : '')]">
        <img :src="item" alt=""/>
      </li>
    </template>
  </ul>
</div>
</template>

<script>
export default {
  props: {
    ppt: { type: Object, require: false }
  },
  methods: {
    // 根据播放时间同步展示ppt
    // @param time 播放时间
    setIndexByPoint (time) {
      const ppts = this.ppt.imgUrls || []
      const len = ppts.length
      let i = 0
      for (; i < len; i++) {
        if (time < this.ppt.timeArr[i]) {
          break
        }
      }
      if (this.ppt.selectIndex !== i - 1) {
        this.ppt.selectIndex = i - 1
      }
    },
    // 点击ppt跳转对应的播放时间
    // 点击某个ppt
    onClickPpt (e) {
      const toIndex = e.currentTarget.dataset.index - 0
      if (this.ppt.selectIndex === toIndex) { return }

      this.ppt.selectIndex = toIndex
      this.$emit('handleClickPpt', toIndex)
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-pane {
  display: block;
  height: 100%;
  overflow: auto;
  /* 讲义列表样式 */
  .lecture-list {
    padding: 8px 16px;
    li {
      padding: 8px 16px;
      cursor: pointer;
      list-style: none;
      &.on {
        background: #888;
      }
      img {
        width: 100%;
      }
    }
  }
}
</style>
