<template>
  <el-breadcrumb separator-class="el-icon-caret-right" class="app-breadcrumb">
    <el-breadcrumb-item>
      {{ $route.meta.tapName === "plane" ? "飞机主控" : "小程序后台" }}
    </el-breadcrumb-item>
    <el-breadcrumb-item
      v-for="(item, index) in filteredBreadcrumb"
      :key="index"
    >
      {{ item.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  name: 'Breadcrumb',
  data () {
    return {
      breadcrumb: []
    }
  },
  mounted () {
    this.refreshBreadcrumb()
  },
  computed: {
    /**
     * @description: 拿路由列表 并过滤不显示项 和没有权限项
     */
    routes () {
      return this.$router.options.routes.filter(
        item =>
          item.meta.hidden !== true &&
          item.meta.roles.indexOf(this.$store.state.user.power.trim()) >= 0
      )
    },
    /**
     * @description: 当前路径
     */
    presentPath () {
      return this.$route.path
    },
    /**
     * @description: 过滤重复的面包屑
     */
    filteredBreadcrumb () {
      const list = this.breadcrumb
      if (list.length <= 1) return list
      const last = list[list.length - 1]
      const isDuplicate = list.slice(0, -1).some(item => item.title === last.title)
      return isDuplicate ? [last] : list
    }
  },
  watch: {
    presentPath () {
      this.refreshBreadcrumb()
    }
  },
  methods: {
    /**
     * @description: 刷新面包条数据
     */
    refreshBreadcrumb () {
      const temp = []
      this.routes.forEach(element => {
        element.children.forEach(child => {
          if (this.presentPath.search(child.path) !== -1) {
            temp[0] = { title: element.meta.title, path: element.path }
            temp[1] = { title: child.meta.title, path: child.path }
          }
        })
      })
      this.breadcrumb = temp
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/theme.scss";

.el-breadcrumb * {
  font-weight: normal !important;
  color: $maintext-color !important;
  font-size: 14px;
  line-height: 50px;
  cursor: text;
}

.app-breadcrumb {
  display: block !important;
}

@media (max-width: 480px) {
  .app-breadcrumb {
    display: none !important;
  }
}
</style>
