<template>

<div
  :class="[
    'level-parking',
    scene,
    direction ? 'out' : 'in'
  ]"
>

  <div
    v-for="(item, x) in packings"
    :key="x"
    class="x-parking"
    :style="item.style"
  ></div>
</div>

</template>

<script lang='ts' setup>

const props = defineProps<{
  scene: string,
  _traffic: any,
  tunnel: any,
  direction: number
}>()

const packings = computed(() => {

  if (!props._traffic) return []

  return props._traffic
    .parkingFormate(props.tunnel.packingLot)
    .map(item => {

      const style = {}
      style[props.direction ? 'left' : 'right'] = item.x + 'px'

      const temp = {
        ...item,
        style
      }

      return temp
      
    })

})

</script>

<style lang='scss' scoped>

$base-common: '@/assets/images/common/';

.level-parking {
  width: 100%;
  position: absolute;
  z-index: 2;
  left: 90px;
  right: 90px;
  .x-parking {
    height: 10px;
    width: 30px;
    background: url($base-common + 'stop-area.png');
    background-size: 100% 100%;
    position: absolute;
  }

  &.panorama {
    .x-parking {
      height: 10px;
      width: 30px;
    }
  }

  &.section {
    .x-parking {
      height: 20px;
      width: 60px;
    }
  }

  &.in {
    top: 0;
    .x-parking {
      transform: translateY(-100%);
    }
  }

  &.out {
    bottom: 0;
    .x-parking {
      transform: rotate(180deg);
    }
    
  }
}

</style>