<template>

<div
  :class="[
    'scales',
    isDownCtrls ? 'down' : 'up'
  ]"
>
  <template v-for="(_, x) in realData" :key="x">
    <div :class="['x-dot', { act: x % 3 === 0 && x !== realData.length - 1 }]">
      <div
        v-if="x % 3 === 0 && x !== realData.length - 1"
        :class="['stone-num', { first: x === 0 }]"
      >
        {{ getStoneNum(x) }}
      </div>
    </div>
    <div :style="{ flexGrow: _.grow }" class="x-scale"></div>
    <div v-if="x + 1 === realData.length" class="x-dot act">
      <div class="stone-num last">
        {{ getStoneNum(x + 1) }}
      </div>
    </div>
  </template>
</div>

</template>

<script lang='ts' setup>

import { defineProps } from 'vue'

const props = withDefaults(defineProps<{
  data: any[],
  tunnel: any,
  direction: number,
  isDownCtrls?: boolean
}>(), {
  isDownCtrls: false
})

const realData = computed(() => {

  return props.data

})

// 桩号计算
const getStoneNum = (x) => {

  let count = 0

  realData.value.slice(0, x).forEach((item) => {
    count = count + item.grow
  })

  // const stoneNum = +props.tunnel.start + count * 300
  const stoneNum = +props.tunnel.start + count * 100
  const left = parseInt(stoneNum % 1000 + '')
  const k = (stoneNum - left) / 1000

  return `K${k}+${left}`

}

</script>

<style lang='scss' scoped>

.scales {

  display: flex;

  .x-scale {
    height: 2px;
    background: #1f5080;
  }

  .x-dot {
    width: 2px;
    height: 2px;
    background: #1f5080;
    position: relative;
    &.act {
      height: 8px;
    }
    .stone-num {
      color: #c0c4cc;
      font-size: 12px;
      position: absolute;
      transform: translateX(-50%);
    }
  }

  &.up {
    margin: 15px 90px 0;
    .stone-num {
      top: 12px;
    }
  }

  &.down {
    margin: 38px 90px 0;
    .stone-num {
      top: -18px;
    }
    .x-scale {
      margin-top: 6px;
    }
    .x-dot {
      margin-top: 6px;
      &.act {
        transform: translateY(-6px);
      }
    }
  }

}

</style>