<template>
  <div class="midBreadCrumb" v-show="hasBreadCrumb">
    <el-card class="box-card" shadow="hover">
      <span class="position"><i class="el-icon-s-home"></i>当前位置</span>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
        v-for="(item, index) in menuNameList"
        :key="index"
        >
          {{ item }}
          </el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
  </div>
</template>

<script>

export default {
  data() {
    return {
      menuNameList: [],
      hasBreadCrumb: false
    }
  },
  computed: {},
  watch: {
    $route: {
      handler: function() {
        this.getPath()
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    getPath() {
      const that = this
      this.menuNameList = []
      if (that.$route.matched[1].name === 'projectList' || that.$route.matched[1].name === 'esbServiceFullPage') {
        that.hasBreadCrumb = false
      } else {
        that.hasBreadCrumb = true
      }
      if (that.$route.matched) {
        const matchedd = that.$route.matched.filter(item => item.meta && item.meta.title)
        // console.log(matchedd)
        for (var i = 0; i < matchedd.length; i++) {
          if (matchedd[i].meta.parentTitle) {
            this.menuNameList.push(matchedd[i].meta.parentTitle)
          }
          this.menuNameList.push(matchedd[i].meta.title)
        }
      }
    }
  },
  created() {
    this.getPath()
  }
}
</script>

<style lang="scss" scoped>
  .midBreadCrumb {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 999;
    padding-top: 6px;
    background-color: #F8F8F8;
    /deep/.el-card {
      .el-card__body {
        .position {
          display: inline-block;
          width: 86px;
          font-size: 14px;
          i {
            margin-right: 5px;
          }
        }
        display: flex;
        padding: 6px;
        .el-breadcrumb {
          line-height: inherit;
        }
      }
    }
  }
  /deep/.el-breadcrumb__inner.is-link {
    // color: $active-color;
    font-weight: 400;
  }
  // /deep/.el-breadcrumb-item .itemRouter {
  //   color: #000;
  // }
  .currentItemRouter /deep/.el-breadcrumb__inner.is-link {
    color: $active-color!important;
  }
</style>
