<template>
  <nav>
    <div class="df aic jcpb" style="height: 100%">
      <div class="bread-box">
        <el-icon size="12px" color="#3a84fa">
          <Location />
        </el-icon>
        当前位置:
      </div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="item in list" :to="{ path: item.path }">{{ item.title }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="right-box">
        <!-- <div>
          <span style="font-size: 22px; margin-right: 10px; font-weight: bold">总体风险等级</span>
          <span style="font-size: 22px; font-weight: bold; color: #418cfe">I I I 级</span>
        </div>
        <div class="right-tag">
          <el-tag class="mx-1" effect="dark" type="success">监控点考核</el-tag>
          <el-tag class="mx-1" effect="dark" type="warning">人脸卡口考核</el-tag>
          <el-tag class="mx-1" effect="dark" type="danger">车辆卡口考核</el-tag>
          <el-tag class="mx-1" effect="dark" type="success">数据数量考核</el-tag>
          <el-tag class="mx-1" effect="dark" type="warning">视频质量考核</el-tag>
        </div> -->
      </div>
    </div>
  </nav>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { Location } from '@element-plus/icons-vue'
// // 输出当前路由对象
import { ref, watch } from 'vue'
const route = useRoute()
const list = ref([])
// 监听route
watch(
  route,
  () => {
    // 根据route.matched得到list的值
    list.value = route.matched.map(item => ({
      title: item.meta.title,
      path: item.path,
    }))
  },
  {
    immediate: true,
  },
)
</script>

<style lang="scss" scoped>
nav {
  height: 36px;
  line-height: 36px;
  width: 100%;
  position: relative;
}

.bread-box {
  // position: absolute;
  // left: 25px;
  // bottom: -7px;
  margin-right: 0.1rem;
  font-size: 0.18rem;
  font-weight: bold;
}

.el-breadcrumb {
  // position: absolute;
  // left: 100px;
  // bottom: 5px;
  font-size: 0.18rem;
  font-weight: bold;
}

.right-box {
  display: flex;
  margin-left: auto;
  justify-content: flex-end;
  gap: 0.1rem;
  // position: absolute;
  // right: 0;
  // bottom: 10px;
}
// .right-tag {
//   position: absolute;
//   right: 20px;
//   transform: skewX(-20deg); /*将盒子相对于X轴选择30度*/
// }
.el-tag {
  margin-right: 5px;
  font-size: 14px;
}
</style>
