<template>

<div :class="['ctrls', ctrlClass]">

  <div class="title">
    <div class="text">{{ ASYNC_DIRECTIONS()[trackers.direction].name }}</div>
  </div>

  <div class="section-num">{{ realRange }}</div>

</div>


</template>

<script lang='ts' setup>

import { defineProps, computed } from 'vue'
import { ASYNC_DIRECTIONS } from '@/config/dict'
import { useTunnelStoreWithOut } from '@/store/modules/tunnel'
import { numToStone } from '@/utils/tunnel'

const props = defineProps<{
  trackers: any
}>()

const tunnelStore = useTunnelStoreWithOut()

// 段面桩号暂存
const realRange = ref('')

// 当前隧道
const tunnel = computed(() => {
  const direction = props.trackers.direction || 0
  return [tunnelStore.getUpTunnel, tunnelStore.getDownTunnel][direction]
})

const ctrlClass = computed(() => props.trackers.direction ? 'down' : 'up')

const stoneRange = computed(() => {

  if (!tunnel.value.long) {
    return ''
  }

  const sections = tunnel.value.sections.map((item, x) => {
    if (props.trackers.direction) {
      return [
        // tunnel.value.start + x * 300,
        // tunnel.value.start + (x + item.grow) * 300
        tunnel.value.start + x * 100,
        tunnel.value.start + (x + item.grow) * 100
      ]
    } else {
      return [
        // tunnel.value.end - (x + item.grow) * 300,
        // tunnel.value.end - x * 300
        tunnel.value.end - (x + item.grow) * 100,
        tunnel.value.end - x * 100
      ]
    }
  })

  console.log('sections: ', sections)

  return `${numToStone(sections[props.trackers.sectionAct][0])} ~ ${numToStone(sections[props.trackers.sectionAct][1])}`

})

watch(
  () => stoneRange.value,
  e => {
    if (e) {
      realRange.value = e
    }
  }
)

</script>

<style lang='scss' scoped>

$base-url: '@/assets/images/event/';
$car-url: '@/assets/images/cars/';

.ctrls {
  height: 62px;
  .title {
    color: white;
    width: 146px;
    height: 38px;
    margin: 0 auto;
   
    padding-bottom: 4px;

    .text {
      font-size: 24px;
      font-weight: 600;
    }

    .more {
      font-size: 16px;
      color: rgba(240, 245, 255, 0.95);
      display: flex;
    }
  }

  .section-num {
    font-size: 18px;
    line-height: 30px;
    color: white;
  }

  &.up {
   
    .title {
      background-image: url($base-url + 'arrow_lft.png');
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: 0 bottom;
      .text {
        margin-left: 15px;
      }
    }
    .def-btn {
      margin-left: 5px;
    }
  }

  &.down {
    .title {
      background-image: url($base-url + 'arrow_rgt.png');
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: 0 bottom;
    }
    .more {
      margin-right: 32px;
    }
  }
}

</style>