<script lang='ts' setup>

import { useRoute } from 'vue-router'

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

const route = useRoute()

const locateStyle = computed(() => {

  if (props.trackers.car) {
    const sign = props.direction ? 1 : -1
    return {
      transform: `translateX(${sign * props.trackers.car.progress * (1920 - 180)}px)`
    }
  } else {
    return null
  }

})

</script>

<template>
  <div v-if="locateStyle" :style="locateStyle" :class="['tracker', direction ? 'out' : 'in']"></div>
</template>

<style lang='scss' scoped>

$base-common: '@/assets/images/common/';

.tracker {
  width: 11px;
  height: 12px;
  position: absolute;
  background: url($base-common + 'locate.png') no-repeat;
  background-size: 100%;
  top: -5px;
  // right: 90px;
  // margin-right: -5px;
  &.in {
    right: 90px;
    margin-right: -5px;
  }
  
  &.out {
    left: 90px;
    margin-left: -5px;
  }

}

</style>