<template>

<div class="cameras">
  
  <div
    v-for="(item, x) in cameras"
    :key="item.code" 
    :class="['video-x', { focus: x === focus }]"
    @click="goSetFocus(x)"
  >
    <div class="view">
      <VideoPlayer v-bind="{
        vcode: item.cameraIndexCode,
        pileNumber: item.pileNumber
      }" />
    </div>

    <div @click="openVideo(item)" class="full-screen"></div>

    <div class="text-bar">
      <div class="pole-num">{{ item.pileNumber }}</div>
      <div class="avg-speed"></div>
    </div>
  </div>

</div>

</template>

<script lang='ts' setup>

import VideoPlayer from '@/views/components/VideoPlayer/index.vue'

import { defineProps, getCurrentInstance, defineExpose } from 'vue'
import { useTunnelStoreWithOut } from '@/store/modules/tunnel'
import { getFocus, getRealCameras, setFocus } from '@/flash/Home'

const props = defineProps<{
  direction
}>()

const tunnelStore = useTunnelStoreWithOut()
const app = getCurrentInstance()


const focus = computed(() => {
  return getFocus(props.direction)
})

const cameras = computed(() => {
  return getRealCameras(props.direction)
})

const goSetFocus = (x) => {
  setFocus(x, props.direction)
}

const openVideo = (item) => {
  app?.proxy?.$openVideo(item)
}

const outSideClick = (e) => {

  const videos = document.querySelectorAll('.cameras .video-x')
  const cameras = document.querySelectorAll('.x-camera')

  const inside = [...videos, ...cameras].some(item => {
    return item === e.target || item.contains(e.target)
  })

  if (!inside) {
    goSetFocus(null, props.direction)
  }

}

// 切换摄像头
const cameraChange = (xcamera) => { 

  if (focus.value === null) {
    return
  }

  const { cameras } = tunnelStore[['getUpTunnel', 'getDownTunnel'][props.direction]]
  const x = cameras.findIndex(item => item.id === xcamera.id)
  cameraSelected.value[props.direction].splice(focus.value, 1, x)
  
}

onMounted(() => {
  document.addEventListener('click', outSideClick)
})

onUnmounted(() => {
  document.removeEventListener('click', outSideClick)
})



defineExpose({
  cameraChange
})

</script>

<style lang='scss' scoped>

$base-url: '@/assets/images/section/';

.cameras {
  margin: 20px 95px 0;
  display: flex;
  justify-content: space-between;
  .video-x {
    width: 250px;
    height: 174px;
    position: relative;
    cursor: pointer;
    &.focus {
      transition-property: all;
      transition-duration: .3s;
      border: 1px solid #00ddff;
      box-shadow: 0 0 12px #00ddff;
      overflow: hidden;
      box-sizing: border-box;
    }
    .view {
      height: 152px;
      border: 1px solid #8EB8D1;
      border-bottom: none;
      box-sizing: border-box;
      border-bottom: none;
      border-radius: 6px 6px 0 0;
      background: #000000;
      overflow: hidden;
    }
    .text-bar {
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 600;
      color: rgba(240, 245, 255, 0.95);
      background: #35669C;
      padding: 0 8px;
      border-radius: 0 0 6px 6px;
    }
  }
  .full-screen{
    width: 16px;
    height: 16px;
    background: url($base-url + 'full-screen.png') no-repeat;
    background-size: cover;
    position: absolute;
    right: 6px;
    bottom: 30px;
    transition-property: all;
    transition-duration: 0.2s;
    z-index: 4;
    &:hover {
      cursor: pointer;
      box-shadow: 0 0 10px #aeaeae;
    }
  }
}

</style>