<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: number
  holeType: string
}>()

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

const focus = computed(() => {
  if(props.holeType === 'new') {
    // （新洞/老洞）新洞目前还没有实现，需后续补功能
    return ''
  }
  return getFocus(props.direction)
})

// 新洞摄像头，暂时性写死，后续需要废弃重写 start
const NEWCAMERAS = [
  [
    { cameraIndexCode: '33068100001310432117', pileNumber: 'K214+475' },
    { cameraIndexCode: '33068100001310172957', pileNumber: 'K214+590' },
    { cameraIndexCode: '33068100001310342185', pileNumber: 'K214+710' },
    { cameraIndexCode: '33068100001310583584', pileNumber: 'K214+870' },
    { cameraIndexCode: '33068100001310898523', pileNumber: 'K215+020' }
  ],
  [
    { cameraIndexCode: '33068100001310763166', pileNumber: 'K214+200' },
    { cameraIndexCode: '33068100001310703492', pileNumber: 'K214+400' },
    { cameraIndexCode: '33068100001310818999', pileNumber: 'K214+450' },
    { cameraIndexCode: '33068100001310534239', pileNumber: 'K214+550' },
    { cameraIndexCode: '33068100001310053767', pileNumber: 'K214+765' },
  ]
]
// 新洞摄像头，暂时性写死，后续需要废弃重写 end

const cameras = computed(() => {
  if (props.holeType === 'new') {
    // （新洞/老洞）新洞目前还没有实现，需后续补功能
    // return getRealCameras(props.direction)
    return NEWCAMERAS[props.direction]
  }
  return getRealCameras(props.direction)
})

const goSetFocus = (x) => {
  if(props.holeType === 'new') {
    // （新洞/老洞）新洞目前还没有实现，需后续补功能
    return
  }
  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: 0.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>
