<script setup lang="ts">
import { SeamlessScroll } from '@twoke/seamless-scroll'
import { ref } from 'vue'

interface CameraNode {
  id: number
}

const currentNode = ref(1)

/**
 * 判断是否是当前节点
 */
function isCurrent(node: CameraNode) {
  return node.id === currentNode.value
}

/**
 * 选择节点
 */
function checkNode(node: CameraNode) {
  currentNode.value = node.id
  // TODO 切换监控流...
}


</script>

<template>
  <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">
        <SeamlessScroll :duration="1000">
          <div>
            <div v-for="item in 4" class="video-item" @click="checkNode({ id: item })" :class="{ active: isCurrent({ id: item }) }" :key="item">
              {{item}}
            </div>
          </div>
        </SeamlessScroll>
      </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>
</template>

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

.catch-data {
  margin: .45vh 0;

  .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;
    .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>
