<template>
  <ContainerBorder title="消防占道抓拍设备" pos="center">
    <div class="catch-data">
    <div class="catch-video">
      <div class="current" style="display: flex; justify-content: center; align-items: center;">
        当前选中的节点：{{currentNode}}
      </div>
      <div class="video-list">
        <vue-seamless-scroll :data="listData" class="wrapper">
          <div>
            <div v-for="item in listData" class="video-item"
            @click="checkNode({ id: item.id })" 
            :class="{ active: isCurrent({ id: item.id }) }">
              {{item.id}}
            </div>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
    <div class="catch-info">
      <span class="catch-time">抓拍时间：2022.04.05 13:20:15</span>
      <span class="catch-address">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点：重庆市渝中区金汤街道81号</span>
    </div>
  </div>
  </ContainerBorder>
</template>

<script>
import {ContainerBorder} from '@/components'
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  components: {
    ContainerBorder,
    vueSeamlessScroll
  },
  data: () => ({
    currentNode: 1,
    listData: [{
      id: 1,
    }, {
      id: 2
    }, {
      id: 3
    }, {
      id: 4
    }]
  }),
  methods: {
    checkNode(node) {
      this.currentNode = node.id
    },
    isCurrent(node) {
      return this.currentNode === node.id
    }
  }
}
</script>

<style lang="less" scoped>
@import url("@/assets/styles/common.less");

.catch-data {
  margin: .45vh 0;
  font-size: 17px;
  color: #fff;

  .catch-video {
  padding: .45vh .25vw;
  display: flex;
  justify-content: space-between;


  .current {
    width: 12vw;
    height: 20.7vh;
    background-color: #00000060;
    background: url("@/assets/images/catch-border.png") no-repeat;
    background-size: 100% 100%;
  }

  

  .video-list {
    width: 7.8vw;
    height: 20.7vh;
    overflow: hidden;
    .wrapper {
      height: 20.7vh;
      overflow: hidden;
    }
    .video-item {
      margin-top: .9vh;
      width: 7.8vw;
      height: 9vh;
      background-image:   linear-gradient(to right, #00000060 , #00000060);
      transition: all .5s linear;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      &:hover {
        .active;
      }
    }
    .active {
        background-image:   linear-gradient(to right, #00000000 , #75faf660);
      }
  }
}

.catch-info {
  flex: 1;
  padding: 0px 0.4vw;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 4.65vh;
  align-items: flex-start;
  .catch-time {
    color: #fff;
    font-size: .7vw;
  }

  .catch-address {
    color: #fff;
    font-size: .7vw;
  }

}

}
</style>
