<template>
  <!-- 面包屑导航组件 -->
  <el-breadcrumb class="app-breadcrumb" separator="(●'◡'●)" style="height:50px;backgroundColor:rgba(79, 73, 73, 1);borderRadius:0px;padding:0px 20px 0px 20px;boxShadow:;borderWidth:2px;borderStyle:;borderColor:rgba(193, 180, 180, 0.5);">
    <!-- 动画过渡效果的面包屑项容器 -->
    <transition-group name="breadcrumb" class="box" :style="1==1?'justifyContent:flex-start;':1==2?'justifyContent:center;':'justifyContent:flex-end;'">
      <!-- 遍历生成面包屑项 -->
      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
        <!-- 如果是最后一项或设置了 noRedirect，则显示为不可点击文本 -->
        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.name }}</span>
        <!-- 否则显示为可点击链接 -->
        <a v-else @click.prevent="handleLink(item)">{{ item.name }}</a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>
import pathToRegexp from 'path-to-regexp' // 导入路径正则表达式库
import { generateTitle } from '@/utils/i18n' // 导入标题生成工具方法

export default {
  data() {
    return {
      levelList: null // 存储面包屑层级数据
    }
  },
  watch: {
    // 监听路由变化，动态更新面包屑
    $route() {
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb() // 初始化时获取面包屑数据
    this.breadcrumbStyleChange() // 初始化时修改面包屑样式
  },
  methods: {
    generateTitle, // 注册标题生成方法
    getBreadcrumb() {
      // 只显示带有 meta.title 的路由
      let route = this.$route // 获取当前路由
      let matched = route.matched.filter(item => item.meta) // 过滤出包含 meta 的路由
      const first = matched[0] // 获取第一个匹配的路由
      matched = [{ path: '/index' }].concat(matched) // 将首页路径拼接到匹配路由前

      this.levelList = matched.filter(item => item.meta) // 更新面包屑层级数据
    },
    isDashboard(route) {
      const name = route && route.name // 获取路由名称
      if (!name) {
        return false // 如果没有名称，返回 false
      }
      return name.trim().toLocaleLowerCase() === 'Index'.toLocaleLowerCase() // 判断是否为首页
    },
    pathCompile(path) {
      // 解决动态路由参数问题 (参考 GitHub 问题 #561)
      const { params } = this.$route // 获取当前路由参数
      var toPath = pathToRegexp.compile(path) // 编译路径
      return toPath(params) // 返回编译后的路径
    },
    handleLink(item) {
      const { redirect, path } = item // 获取重定向路径和普通路径
      if (redirect) {
        this.$router.push(redirect) // 如果有重定向路径，则跳转到该路径
        return
      }
      this.$router.push(path) // 否则跳转到指定路径
    },
    breadcrumbStyleChange(val) {
      this.$nextTick(() => { // 确保 DOM 已更新后再执行样式修改
        // 修改分隔符样式
        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__separator').forEach(el => {
          el.innerText = "(●'◡'●)" // 设置自定义分隔符
          el.style.color = "rgba(235, 90, 170, 1)" // 设置分隔符颜色
        })
        // 修改可点击链接的文字颜色
        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner a').forEach(el => {
          el.style.color = "rgba(196, 212, 244, 1)"
        })
        // 修改不可点击文字的颜色
        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner .no-redirect').forEach(el => {
          el.style.color = "rgba(244, 149, 32, 1)"
        })

        let str = "vertical" // 假设布局为垂直
        if ("vertical" === str) {
          let headHeight = "60px" // 设置头部高度
          headHeight = parseInt(headHeight) + 10 + 'px' // 调整高度
          document.querySelectorAll('.app-breadcrumb').forEach(el => {
            el.style.marginTop = headHeight // 设置面包屑顶部外边距
          })
        }
      })
    }
  }
}

</script>

<style lang="scss" scoped>
.app-breadcrumb {
  display: block; // 设置为块级元素
  font-size: 14px; // 设置字体大小
  line-height: 50px; // 设置行高

  .box {
    display: flex; // 使用弹性布局
    width: 100%; // 宽度占满父容器
    height: 100%; // 高度占满父容器
    justify-content: flex-start; // 主轴对齐方式为左对齐
    align-items: center; // 交叉轴对齐方式为居中
  }

  .no-redirect {
    color: #97a8be; // 设置不可点击文字的颜色
    cursor: text; // 设置鼠标悬停时的样式为文本
  }
}
</style>
