<template>

<div class="line">
  <div
    v-for="(item, x) in lines"
    :key="x"
    :class="['x-line', item.type]"
    :style="item.style"
  >
  </div>
</div>

</template>

<script lang='ts' setup>

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

const lines = computed(() => {

  if (!props._traffic) return []

  return props._traffic
    .lineFormate(props.tunnel.lines)
    .map(item => {
      return {
        ...item,
        style: {
          left: item.x + 'px',
          width: item.long + 'px'
        }
      }
    })

})

const lineComputed = (x) => {

  return {
    top: x / props._lines * 100 + '%'
  }

}

</script>

<style lang='scss' scoped>

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

.line {
  height: 2px;
  position: absolute;
  // top: 50%;
  width: 100%;
  margin-top: -1px;
  .x-line {
    height: 2px;
    top: 0;
    position: absolute;
    &.dash {
      background: url($base-url + 'dash.png');
      background-size: 30px 2px;
    }
    &.solid {
      background: rgba($color: #ffffff, $alpha: 0.8);
    }
  }
}

</style>