<template>

<div class="nav-tags">

  <div @click="goBack" class="back-btn">
    <div class="icon"></div>
    <div class="text">返回</div>
  </div>

  <div class="dv-line"></div>

  <div class="bread">
    {{ breadStr }}
  </div>

</div>

</template>

<script lang='ts' setup>

import { ref, computed, onBeforeMount } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const from = ref('event')

const route = useRoute()
const router = useRouter()

const ROUTE_MAP: any = {
  home: '首页',
  remain: '留存车辆',
  event: '事件监测',
  history: '历史记录'
}

const breadStr = computed(() => {

  return `${ROUTE_MAP[from.value]} / 事件详情`

})

const goBack = () => {
  router.replace({
    path: from.value
  })
}

onBeforeMount(() => {

  from.value = route.query.from as any

})

</script>

<style lang='scss' scoped>

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

.nav-tags {
  display: flex;
  align-items: center;
  margin-left: 45px;
  margin-top: 20px;
  color: white;
  font-size: 14px;
  .back-btn {
    display: flex;
    align-items: center;
    cursor: pointer;
    .icon {
      width: 24px;
      height: 16px;
      background: url($base-url + 'back.png') no-repeat;
      background-size: cover;
      margin-right: 6px;
    }

  }
  .dv-line {
    height: 12px;
    width: 1px;
    background: rgba(240, 245, 255, 0.45);
    margin: 0 10px;
  }
}

</style>