<template>

<div class="level-pile">

  <div
    v-for="(item, x) in piles"
    :key="x"
    :style="item.style"
    class="x-pile"
  >
    {{ item.pileNumber }}
  </div>

</div>

</template>

<script lang='ts' setup>

import { numToStone } from '@/utils/tunnel'

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

const piles = computed(() => {

  if (!props.tunnel || !props._traffic) {
    return []
  }

  return new Array(+parseInt(String(props.tunnel.long / 50)) + 1).fill(null).map((_, x) => {
    return {
      pileNumber: numToStone(+props.tunnel.start + x * 50),
      style: {
        left: x * 50 * props._traffic.ratex + 'px'
      }
    }
  })

})

</script>

<style lang='scss' scoped>

.level-pile {
  position: absolute;
  bottom: -10px;
  left: 0;
  color: white;
  z-index: 3;
  width: 100%;
  .x-pile {
    position: absolute;
    transform: translateX(-50%);
    font-size: 12px;
    color: #C0C4CC;
  }
}

</style>