<template>

<div
  :class="[
    'level-camera',
    isDownCtrls ? 'down' : 'up',
    direction ? 'out' : 'in'
  ]"
>
  <div
    v-for="(item, x) in cameras"
    :key="x"
    :style="item.style"
    :class="['x-camera', { act: cameraSelected.includes(x) || camerasFocus.includes(item.id)  }]"
    @click="goSetCameras(item)"
  >
    <div class="pile">{{item.pileNumber}}</div>
  </div>
</div>

</template>

<script lang='ts' setup>

import { getCurrentInstance } from 'vue'
import { useRoute } from 'vue-router'
import bus from '@/utils/eventBus'

// import { useCamera as useCameraHome } from '@/flash/Home'

import { getCameras, setCameras } from '@/flash/Home'

// store
const app = getCurrentInstance()
const route = useRoute()

// 事件
const emits = defineEmits(['camera-change', 'click-trigger'])

// 参数
const props = withDefaults(defineProps<{
  _traffic: any,
  tunnel: any,
  direction: number,
  isDownCtrls?: boolean
}>(), {
  isDownCtrls: false
})

const camerasFocus = ref([])

// 选中摄像头计算
const cameraSelected = computed(() => {

  const block = route.name

  if (block === 'Home') {
    return getCameras(props.direction)
  }

  return camerasFocus.value

})

// 路面摄像头铺设
const cameras = computed(() => {

  if (!props._traffic) return []
  return props._traffic.cameraFormate(props.tunnel.cameras, props.direction).map(item => {
    return {
      ...item,
      style: {
        left: item.x + 'px'
      }
    }
  })

})

// 摄像头手动切换
const goSetCameras = (xcamera) => {

  const block = route.name
  
  if (block === 'Home') {
    return setCameras(xcamera, props.direction)
  } else {
    emits('camera-change', xcamera)
  }

}


onMounted(() => {
  
  bus.on('focus-camera', ids => {
    camerasFocus.value = ids
  })

})


</script>

<style lang='scss' scoped>

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

.level-camera {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 2;

  .x-camera {
    width: 24px;
    height: 24px;
    cursor: pointer;
    position: absolute;
    transform: translate(-50%, -50%);
    
    background: url($base-url + 'camera_1.png');
    background-size: cover;

    &:hover {
      background: url($base-url + 'camera_2.png');
      background-size: cover;
    }

    &.act {
      background: url($base-url + 'camera_2.png');
      background-size: cover;
      z-index: 2;
    }

    .pile {
      position: absolute;
      font-size: 14px;
      font-weight: 600;
      color: #42e7ff;
      left: 0;
      margin-left: 50%;
      display: none;
    }

    &:hover {
      .pile {
        display: block;
      }
    }
  }

  &.up {
    top: 0;
    .x-camera {
      .pile {
        top: -18px;
      }
    }
  }

  &.down {
    bottom: 0;
  }

  &.in {
    .x-camera {
      .pile {
        top: -18px;
        transform:  translateX(-50%);
      }
    }
  }

  &.out {
    .x-camera {
      transform: rotateY(180deg) translate(50%, -50%);
      .pile {
        bottom: -18px;
        transform: rotateY(180deg) translateX(50%);
      }
    }
  }

}



</style>