<template>

<div :class="['arrow', direction ? 'out' : 'in']">

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

</div>


</template>

<script lang='ts' setup>

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

const arrows = computed(() => {

  if (!props._traffic) return []

  return props._traffic
    .arrowFormate(props.tunnel.roadArrows)
    .map(item => {
      return {
        ...item,
        style: {
          left: item.x + 'px',
          top: item.y + 'px'
        }
      }
    })

})

</script>

<style lang='scss' scoped>

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

.x-arrow {
  position: absolute;
  height: 6px;
  width: 40px;
  transform: translate(0, -50%);
  background: url($base-common + 'arrow-left.png');
  background-size: 100% 100%;
}

.out {
  .x-arrow {
    transform: rotateY(180deg);
  }
}

</style>