<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', item.className , { act: isAllSelected || 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,
  isAllSelected?: boolean,
  isNeedLeftCamera?: boolean
}>(), {
  isDownCtrls: false,
  isAllSelected: false,
  isNeedLeftCamera: 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 => {
    let style: any = { left: item.x + 'px' }
    let className = ''

    // camera_lable = 4紧急停车带相机
    if (item.cameraLable === 4 && props.isNeedLeftCamera) {
      if (props.direction) {
        style.bottom = props._traffic.road_w - 24 + 'px'
      }else {
        style.top = props._traffic.road_w + 'px'
      }

      className = 'left-camera'
    }
    return {
      ...item,
      style, 
      className
    }
  })

})

// 摄像头手动切换
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,&.act {
      .pile {
        display: block;
      }
    }
  }

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

      &.left-camera {
        .pile {
          bottom: -18px;
          top: unset;
        }
      }
    }
  }

  &.down {
    bottom: 0;
  }

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

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

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

      &.left-camera {
        transform: translate(50%, -50%);
        .pile {
          top: -18px;
          bottom: unset;
          transform: translateX(-50%);
        }
      }
    }
  }

}



</style>