<template>

<div :class="['carplate', { focus: infos.type === focusCarType  }]">
  {{ plateText }}
</div>

</template>

<script lang='ts' setup>

import { numToStone } from '@/utils/tunnel'

// 车辆类型映射
const typeFlex = ['危化品车', '客车', '轿车', '货车', '其他车']

// 标签信息
const infos = reactive({
  plate: '', // 车牌
  speed: '', // 车速
  milestone: '', // 桩米号
  type: '' // 车辆类型
})

const type = ref('plate') // 标签类型
const focusCarType = ref(null) // 选中类型

// 计算值
const plateText = computed(() => {
  if (type.value === 'plate') return infos.plate
  if (type.value === 'type') return typeFlex[infos.type]
  if (type.value === 'speed') return infos.speed + 'km/h'
  if (type.value === 'locate') return numToStone(infos.milestone)
  return ''
})

// 标签初始化
const update = (e) => {
  infos.plate = e.plate
  infos.speed = e.speed
  infos.milestone = e.milestone
  infos.type = e.type
}

// 类型切换
const typeChange = (e) => {
  type.value = e
}

// 选中切换
const focusChange = (e) => {
  if (focusCarType.value === e) {
    focusCarType.value = null
  } else {
    focusCarType.value = e
  }
}

defineExpose({
  update,
  typeChange,
  focusChange
})

</script>

<style lang='scss' scoped>

.carplate {
  color: white;
  font-size: 12px;
  background: #03a6bf;
  padding: 4px 10px;
  border-radius: 2px;
  margin-top: -24px;
  box-shadow: 0 0 3px #FFFFFF;
  &.focus {
    background: #EE5961;
    position: relative;
    z-index: 100;
    box-shadow: 0 0 24px #EE5961;
  }
}

</style>