<template>


<div class="map-scale">

  <!-- <div class="directions">

    <div @click="directChange(0)" :class="['x-direct', { act: direct === 0 }]">
      <div class="def-radio"></div> {{ ASYNC_DIRECTIONS()[0].name }}
    </div>

    <div @click="directChange(1)" :class="['x-direct', { act: direct === 1 }]">
      <div class="def-radio"></div> {{ ASYNC_DIRECTIONS()[1].name }}
    </div>

  </div> -->

  <div v-if="tunnel" class="content">

    <div class="drag-line">
      <el-slider
        :style="slideStyle"
        :max="tunnel.maxScale / 10 + 1"
        v-model="current"
        :format-tooltip="getPileName"
        tooltip-class="map-scale-tip"
        @change="spaceChange"
      />
    </div>

    <div class="scale-line">
      <div class="inner">
        <div
          v-for="x in scaleNums"
          :key="x"
          :style="{ left: `${((x - 1) * 100 * 100) / tunnel.maxScale}%` }"
          :class="getTunnelClass(x - 1)"
        >
          <div v-if="x > 0 && (x - 6) % 5 === 0" class="mile-stone">{{ getPileName(x - 1, 100) }}</div>
        </div>
      </div>
    </div>



  </div>

</div>


</template>

<script lang='ts' setup>

import { defineExpose } from 'vue'

import { useAppStoreWithOut } from '@/store/modules/app'
import { useTunnelStoreWithOut } from '@/store/modules/tunnel'

import { numToStone } from '@/utils/tunnel'
import { bus, carTracked, roamkey, sceneCheck} from '@/views/3DModel/_state'
import { ASYNC_DIRECTIONS, DIRECTIONS } from '@/config/dict'

const direct = ref(0) // 隧道方向
const current = ref(0)
const spaceval= ref(0)
const appStore = useAppStoreWithOut()
const tunnelStore = useTunnelStoreWithOut()

const slideStyle = computed(() => {
  return {
    width: (appStore.getZoom) * 100 + '%',
    transform: `scale(${1 / appStore.getZoom})`,
    transformOrigin: 'left top'
  }
})

const scaleNums = computed(() => {
  return parseInt(tunnel.value.maxScale / 100 + 1)
})

// 当前隧道
const tunnel = computed(() => {
  const xtunnel = [tunnelStore.getUpTunnel, tunnelStore.getDownTunnel][direct.value]
  if (xtunnel.long) {
    const { start, end, long } = xtunnel
    return {
      start, end,
      maxScale: long
    }
  } else {
    return null
  }
})

const getTunnelClass = (x) => {
  return ['i-scale', { 'mark': x > 0 && x % 5 === 0 }, { 'select': x <= current.value / 10 }]
}

const getPileName = (x, sca = 10) => {
  const realMiles = direct.value ? tunnel.value.start + x * sca : tunnel.value.end - x * sca
  return numToStone(realMiles)
}

// 方向切换
const directChange = (x) => {

  if (!sceneCheck()) {
    return
  }

  current.value = 0
  direct.value = x
  bus.emit('direction-set', x)
}

// 隧道漫游
const spaceChange = () => {

  if (spaceval.value === current.value) {
    return
  }

  const allScales = (scaleNums.value - 1) * 10
  bus.emit('3d-roamming', {
    direct: direct.value,
    target: current.value / allScales,
    start: spaceval.value / allScales
  })

  spaceval.value = current.value

}

watch(
  () => carTracked.value,
  e => {
    if (!e) {
      direct.value = 1
    } else {
      direct.value = DIRECTIONS.findIndex(item => item.key ===  e.tunnelx)
      current.value = parseInt(e.distance / 10)
    }
  }
)

// 手动设置进度
const setCurrent = (e) => {
  direct.value = DIRECTIONS.findIndex(item => item.key ===  e.tunnelx)
  const distance = e.direct === 0 ? tunnel.value.end - e.milestone : e.milestone - tunnel.value.start
  current.value = parseInt(distance / 10)
}

defineExpose({
  setCurrent
})

</script>

<style lang='scss' scoped>

.map-scale {
  background: rgba($color: #243247, $alpha: 0.5);
  height: 70px;
  margin-top: 10px;
  overflow: hidden;
  display: flex;
  .directions {
    // width: 90px;
    padding-right: 45px;
    margin-left: 15px;
    height: 45px;
    margin-top: 15px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .x-direct {
      font-size: 14px;
      display: flex;
      align-items: center;
      cursor: pointer;
      .def-radio {
        width: 16px;
        height: 16px;
        border-radius: 16px;
        box-sizing: border-box;
        border: 2px solid rgba($color: #ffffff, $alpha: 0.5);
        margin-right: 5px;
      }
      &.act {
        font-weight: bold;
        .def-radio {
          position: relative;
          border-color: #33FFF1;
          &::after {
            content: " ";
            width: 6px;
            height: 6px;
            border-radius: 6px;
            position: absolute;
            left: 50%;
            top: 50%;
            background: #33FFF1;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
  }
  .content {
    flex-grow: 1;
    margin-right: 18px;
    margin-left: 45px;
    height: 10px;
    // background: salmon;
    position: relative;
    height: 70px;
    .drag-line {
      position: absolute;
      width: 100%;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      margin-top: -6px;
    }
    .scale-line {
      position: absolute;
      width: 100%;
      left: 0;
      top: 50%;
      z-index: 1;
      height: 10px;
      margin-top: -12px;
      .inner {
        // margin: 0 6px;
        position: relative;
        &::after {
          content: '';
          position: absolute;
          height: 2px;
          width: 100%;
          left: 0;
          top: 8px;
          background: rgba(255, 255, 255, 0.2);
          z-index: -1;
        }
        .i-scale {
          position: absolute;
          top: 6px;
          width: 4px;
          height: 6px;
          background: rgba(255, 255, 255, 0.5);
          transform: translateX(-50%);
          &.mark {
            height: 10px;
            top: 4px;
            background: #33fff1;
          }
          &.select {
            background: #33fff1;
          }
          .mile-stone {
            position: absolute;
            color: white;
            font-size: 12px;
            bottom: -25px;
            left: 0;
            transform: translateX(-50%);
          }
        }
      }
    }
  }
}

</style>

<style lang="scss">

$Common_Url: '@/assets/images/3d/';

.map-scale {

  .el-slider__runway {
    background: transparent !important;
  }

  .el-slider__bar {
    height: 1px;
    background: #33fff1;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    top: 1px;
  }

  .el-slider__button-wrapper {
    width: 18px;
    height: 18px;
    .el-slider__button {
      width: 15px;
      height: 15px;
      background: url($Common_Url + 'space-point.png');
      background-size: auto 100%;
      border: none;
      margin-top: -10px;
    }
  }

}

.map-scale-tip {
  &.el-popper {
    padding: 2px 8px;
  }
  &.is-dark {
    // background: salmon;
    span {
      font-size: 10px;
    }
  }
}

</style>