<template>

  <div v-if="carTracked" class="info-bar">
  
    <div class="text">车辆情况：{{ infoText }} </div>
    <div class="text">
      <div class="icon-1"></div>
      <div class="inner">留存时间：{{ carTracked.remain }} 分钟</div>
    </div>
  
    <div @click="stopTrack" class="cancel-btn">取消追踪</div>
  
  </div>
  
  </template>
  
  <script lang='ts' setup>
  
  import { CAR_TYPES, ASYNC_DIRECTIONS } from '@/config/dict'
  import { tracked, carTracked } from '@/views/3DModel/_state'
  
  import { useTunnelStoreWithOut } from '@/store/modules/tunnel'
  
  const tunnelStore = useTunnelStoreWithOut()
  
  const CAR_MAP = Object.fromEntries(CAR_TYPES.map(item => {
    return [item.type, item.name]
  }))
  
  const Direct_Map = computed(() => {
    return Object.fromEntries(ASYNC_DIRECTIONS().map(item => {
      return [item.seKey, item.name]
    }))
  })
  
  const infoText = computed(() => {
  
    if (!carTracked.value) return ''
  
    const { plate, time, type, tunnelx } = carTracked.value
  
    return `${time} ${CAR_MAP[type]}（${plate}）驶入${tunnelStore.getUpTunnel.name}${Direct_Map.value[tunnelx]}`
  
  })
  
  const stopTrack = () => {
    if (!carTracked.value) return ''
    carTracked.value.stopFollow('stop')
    tracked.value = null
  }
  
  </script>
  
  <style lang='scss' scoped>
  
  $Common_Url: '@/assets/images/common/';
  
  .info-bar {
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    padding: 4px 30px 4px 30px;
    color: white;
    font-size: 14px;
    margin-left: 10px;
    // background: linear-gradient(270deg, rgba(250, 81, 81, 0) 0%, #fa5151 100%);
    background: linear-gradient(270deg, rgba(56, 119, 242, 0) 0%, #3877F2 16%, #3877F2 83%, rgba(56, 119, 242, 0) 100%);
    border-radius: 18px;
    .text {
      margin-right: 20px;
      display: flex;
      align-items: center;
    }
    .icon-1 {
      width: 20px;
      height: 20px;
      background: url($Common_Url + 'stay.png');
      background-size: auto 100%;
    }
  
    .cancel-btn {
      padding: 4px 10px;
      border-radius: 4px;
      // background: rgba(231, 94, 88, 0.6);
      cursor: pointer;
      transition-property: all;
      transition-duration: .3s;
      border: 1px solid rgba($color: #FFFFFF, $alpha: 0.6);
      color: rgba($color: #FFFFFF, $alpha: 0.9);
      &:hover {
        // background: rgba(231, 94, 88, 1);
        color: rgba($color: #FFFFFF, $alpha: 1);
        border: 1px solid rgba($color: #FFFFFF, $alpha: 1);
      }
    }
  }
  
  </style>