<template>

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

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

  <div v-show="trackers.loading" class="tips">
    <Icon class="loading-spinner" icon="ep:loading" />
    轨迹数据加载中...
  </div>


  <div class="section-num">{{ stoneRange }}</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<{
  direction: number,
  trackers: any
}>()

const tunnelStore = useTunnelStoreWithOut()

// 箭头方向
const ctrlClass = computed(() => props.direction ? 'down' : 'up')

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

const stoneRange = computed(() => {

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

  const sections = tunnel.value.sections.map((item, x) => {
    if (props.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
      ]
    }
  })

  return ''

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

})


</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;
    position: relative;
    .text {
      font-size: 24px;
      font-weight: 600;
    }
  }

  .tips {
    color: white;
    font-size: 14px;
    margin: 10px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    .loading-spinner {
      margin-right: 5px;
    }
  }

  .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;
      }
    }
  }

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

</style>