<template>
  <ul class="lecture-list">
    <li
      v-for="(item, index) in ppts"
      :key="item.id"
      @click="onClick(index)"
      :class="{'is-active': index === activeIndex}"
    >
      <img :src="item.ppt_url" />
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    // 当前选择的PPT
    pptIndex: { type: Number, default: 0 },
    ppts: { type: Array, default: () => [] }
  },
  data() {
    return {
      activeIndex: this.pptIndex
    }
  },
  watch: {
    pptIndex(index) {
      this.activeIndex = index
    }
  },
  methods: {
    // 点击PPT
    onClick(index) {
      this.activeIndex = index
      this.$emit('change-ppt', index)
    }
  }
}
</script>

<style lang="scss" scoped>
.lecture-list {
  padding: 0 16px;
  li {
    padding: 8px 16px;
    cursor: pointer;
    &.is-active {
      background: #888;
    }
    img {
      width: 100%;
    }
  }
}
</style>
