<template>

<div class="status-bar">

  <div class="eb-text">
    车辆情况：
    <template v-if="nowCar">
      {{ CAR_TYPES[currentCar.vehicleType].name }}({{ currentCar.carPlate }})
      在
      {{ currentCar.inTunnelTime }}
      驶入{{ tunnel.name }}
      {{ tunnel.directionName }}
    </template>
    <template v-else>
      追踪车辆已驶出隧道！
    </template>

    <el-button
      v-if="trackers.tracking"
      plain
      type="danger"
      class="cencel-btn"
      @click="trackCancel"
    >
      取消跟踪
    </el-button>
    
  </div>
  <div class="eb-sub">

    <div class="x-sub">
      <div class="icon"></div>
      留存时间：{{ currentCar?.retainedMinutesTime || 0 }} 分钟
    </div>

    <div class="x-sub">
      <div class="icon"></div>
      实时车速：{{ (currentCar?.speed || 0).toFixed(2) }} km/h
    </div>

    <div class="x-sub">
      <div class="icon"></div>
      车辆位置：{{ numToStone(currentCar?.carMilestone || 0) }}
    </div>
    
  </div>

</div>

</template>

<script lang='ts' setup>

import { computed } from 'vue'
import { CAR_TYPES } from '@/config/dict'

import { useTunnelStoreWithOut } from '@/store/modules/tunnel'
import { numToStone } from '@/utils/tunnel'

const trackers = defineModel<any>()

const tunnelStore = useTunnelStoreWithOut()

const currentCar = ref<any>({})

const tunnel = computed(() => {
  const direction = trackers.value.direction || 0
  return [tunnelStore.getUpTunnel, tunnelStore.getDownTunnel][direction]
})

const nowCar = computed(() => {

  if (trackers.value.car) {
    return {
      direction: trackers.value.car.direction,
      ...trackers.value.car.originalCar
    }
  } else {
    return null
  }

})

watch(
  () => nowCar.value,
  e => {
    if (e) {
      currentCar.value = e
    }
  }
)

// 取消追踪
const trackCancel = () => {
  trackers.value.id = null
  trackers.value.car = null
  trackers.value.tracking = false
  trackers.value.cameraLock = false
  
}

</script>

<style lang='scss' scoped>

$base-url: '@/assets/images/home/';

.status-bar {
  margin: 18px 45px 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .eb-text {
    display: flex;
    align-items: center;
    width: 1200px;
    color: white;
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
    background: linear-gradient(270deg, rgba(250, 81, 81, 0) 0%, #FA5151 100%);
    .cencel-btn {
      height: 28px;
      width: 80px;
      margin-left: 10px;
      background: transparent;
      color: white;
      &:hover {
        color: #FA5151;
      }
    }
  }
  .eb-sub {
    display: flex;
    align-items: center;
    color: white;
    .x-sub {
      display: flex;
      align-items: center;
      font-size: 14px;
      .icon {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
      &:nth-child(1) {
        .icon {
          background: url($base-url + 'remain.png') no-repeat;
          background-size: cover;
        }
      }
      &:nth-child(2){
        // margin-right: 30px;
        margin: 0 16px;
        .icon {
          background: url($base-url + 'speed.png') no-repeat;
          background-size: cover;
        }
      }
      &:last-child {
        .icon {
          background: url($base-url + 'distance.png') no-repeat;
          background-size: cover;
        }
      }
    }
    
  }
}

</style>