<template >
  <div class="video-module">
    <div class="video-list" @click.stop="handleSectionClick($event)">
      <VueSeamlessScroll 
        :data="videoList"
        :class-option="classOption"
        class="warp"
      >
        <ul class="content-item">
          <li :class="['row']" :data-id="item.name" v-for="item in videoList">{{item.name}}</li>
        </ul>
      </VueSeamlessScroll>
    </div>
    <div class="video">
      <div>
        {{activeName}}
      </div>
    </div>
  </div>
</template>

<script>
import VueSeamlessScroll from 'vue-seamless-scroll'

export default {
  name: 'VideoModule',
  components: {
    VueSeamlessScroll
  },  
  data() {
    return {
      videoList: [
        {
          name: '视频1',
        },
        {
          name: '视频2',
        },
        {
          name: '视频3',
        },
        {
          name: '视频4',
        },
        {
          name: '视频5',
        },
        {
          name: '视频6',
        }
      ],
      classOption: {
        singleHeight: 32
      },
      activeName: '视频1'
    }
  },
  methods: {
    handleSectionClick(e) {
      // this.activeName = item.name
      // console.log('')
      let target = e.target;
      if(target.nodeName == "LI") {
        this.onVideoItemHandler(target.dataset.id);
      }
    },
    onVideoItemHandler(name) {
      this.activeName = name
      console.log('onVideoItemHandler')
    }
  }
}
</script>

<style scoped lang='less'>
.video-module {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;

  .warp {
    height: 160px;
    width: 60px;
    color: #fff;
    overflow: hidden;
    ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      .row {
        background-color: #07306650;
        height: 30px;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin:1px 0px;
        line-height: 30px;
        cursor: pointer;
      }
      .active {
        background-color: #073066;
      }
    }
  }

  .video {
    width: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #00000060;
  }
}
</style>
