<template>

<div class="cameras">

  <div
    v-for="(item, x) in nowCameras"
    :key="x"
    :class="['x-camera', { 'focus': focus === x }]"
  >

    <div class="view">
      <VideoPlayer
        @click="() => videoFocus(x)"
        v-bind="{
          frameW: 583,
          frameH: 317,
          vcode: item.cameraIndexCode,
          pileNumber: item.pileNumber
        }"
      />
    </div>

    <div class="tips">
      <Timer symbols="/" />
      <div class="text">全息断面 {{ item.section }}</div>
    </div>
    <div class="footer">
      <div class="pile">{{ item.pileNumber }}</div>
      <!-- <div class="speed">平均车速：80km/h</div> -->
    </div>

    <div class="ctrls">
      <div class="btns">
        <div @click="cameraChange(item, x, 'prev')" :class="['circle-btn', { disabled: !item.hasPrev }]">上一路</div>
        <div @click="cameraChange(item, x, 'next')" :class="['circle-btn', { disabled: !item.hasNext }]">下一路</div>
      </div>
    </div>

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

  </div>

</div>

</template>

<script lang='ts' setup>

import Timer from '@/components/Timer/index.vue'
import { ref, getCurrentInstance } from 'vue'
import { useTunnelStoreWithOut } from '@/store/modules/tunnel'
import VideoPlayer from '@/views/components/VideoPlayer/index.vue'

const props = defineProps<{
  commons
}>()

const tunnelStore = useTunnelStoreWithOut()
const nowCameras = ref<any[]>([])
const focus = ref<number | null>(null)
const app = getCurrentInstance()

// 当前隧道
const tunnel = computed(() => {
  return [
    tunnelStore.getUpTunnel,
    tunnelStore.getDownTunnel
  ][props.commons.direction]
})


// 所有摄像头
const allCameras = computed(() => {


  if (!tunnel.value) {
    return []
  }
  
  let arr = tunnel.value.cameras.map(item => {
    return { ...item }
  })

  !props.commons.direction && arr.reverse()

  return arr.map((item, x) => {
    return {
      ...item, 
      realx: x,
      hasNext: x < tunnel.value.cameras.length - 1,
      hasPrev: x > 0
    }
  })

})

// 段面摄像头
const cameras = computed(() => {

  if (!allCameras.value.length) {
    return []
  }

  // 上行
  if (!props.commons.direction) {

    let x = allCameras.value.findLastIndex(item => item.section === props.commons.sectionAct + 1)

    if (x === -1) {
      x = allCameras.value.length - 1
    }

    if (x - 2 < 0) {
      x = 2
    }

    return allCameras.value.slice(x - 2, x + 1).reverse()

  }
  
  // 下行
  if(props.commons.direction){

    let x = allCameras.value.findIndex(item => item.section === props.commons.sectionAct + 1)

    if (x + 3 > allCameras.value.length - 1 || x === -1) {
      x = allCameras.value.length - 4
    }

    return allCameras.value.slice(x, x + 3)

  }

})

// 聚集视频画面
const videoFocus = (x) => {
  focus.value = x
}

watch(
  () => cameras.value,
  e => {
    console.log('cameras: ', e)
    nowCameras.value = e
    focus.value = null
  }, {
    immediate: true
  }
)

// 摄像头切换
const cameraChange = (camera, x, type) => {
  if (type === 'prev') {
    nowCameras.value.splice(x, 1, allCameras.value[camera.realx - 1])
  } else {
    nowCameras.value.splice(x, 1, allCameras.value[camera.realx + 1])
  }
}

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

defineExpose({
  cameraSet (e) {
    if (focus.value === null || !nowCameras.value) return
    const nowCamera = allCameras.value.find(item => item.id === e.id)
    nowCameras.value.splice(focus.value, 1, nowCamera)
  }
})

const outSideClick = (e) => {

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

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

  if (!inside) {
    focus.value = null
  }

}

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

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

</script>

<style lang='scss' scoped>

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

.cameras {
  margin: 72px 48px 40px;
  display: flex;
  justify-content: space-between;

  .full-screen {
    width: 20px;
    height: 20px;
    background: url($base-url + 'full-screen.png') no-repeat;
    background-size: cover;
    position: absolute;
    right: 8px;
    bottom: 40px;
    transition-property: all;
    transition-duration: 0.2s;
    z-index: 3;
    
    &:hover {
      cursor: pointer;
      box-shadow: 0 0 10px #aeaeae;
    }
  }

  .x-camera {
    width: 583px;
    height: 317px;
    background: black;
    position: relative;
    .view {
      position: relative;
      width: 583px;
      height: 317px;
    }
    &.focus {
      transition-property: all;
      transition-duration: .3s;
      border: 1px solid #00ddff;
      box-shadow: 0 0 12px #00ddff;
      overflow: hidden;
      box-sizing: border-box;
    }
    .tips {
      position: absolute;
      left: 10px;
      top: 10px;
      z-index: 2;
      color: white;
      font-size: 14px;
      text-align: left;
    }
    .ctrls {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: absolute;
      left: 0;
      bottom: 40px;
      padding: 0 12px;
      box-sizing: border-box;
      z-index: 3;
      .btns {
        display: flex;
      }
      .circle-btn {
        background: rgba(32, 58, 96, 0.5);
        border: 1px solid #00DDFF;
        width: 66px;
        height: 24px; 
        font-size: 14px;   
        color: #00DDFF; 
        border-radius: 12px;
        text-align: center;
        line-height: 22px;
        box-sizing: border-box;
        margin-right: 14px;
        cursor: pointer;
        &.disabled {
          opacity: 0.6;
          cursor: not-allowed;
          pointer-events: none;
        }
      }
    }
    .footer {
      width: 100%;
      height: 32px;
      color: white;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: absolute;
      padding: 0 10px;
      box-sizing: border-box;
      left: 0;
      bottom: 0;
      background: rgba(53, 102, 156, 0.7);
    }
  }
}

</style>