<template>
  <div class="headBreadcrumb" v-if="data.length">
    <div class="breadcrumbContainer">
      <span class="fa fa-map-marker"></span>
      <div class="breadcrumbBody">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="item in data" :key="item.path || item.name">{{
            item.name
          }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    data() {
      const menu = this.$store.getters.menu;
      const path = this.$route.matched[0].path;
      const params = this.$route.params;
      const current = menu.find(v => v.url === path);
      if (!current) {
        return [];
      }
      const data = [];
      function execute(id) {
        const value = menu.find(v => v.id === id);
        if (value) {
          data.unshift({
            id: value.id,
            name: value.name,
            path: value.url ? __.url.pathToRegexp.compile(value.url)(params) : null
          });
          value.parentId && execute(value.parentId);
        }
      }
      execute(current.id);
      return data;
    }
  }
};
</script>
<style lang="less" scoped>
.headBreadcrumb {
  height: 50px;
  width: 100%;
  position: relative;
  border-bottom: 1px solid rgb(220, 220, 220);

  .breadcrumbContainer {
    position: absolute;
    top: 50%;
    left: 25px;
    transform: translateY(-50%);

    > span {
      float: left;
      font-size: 18px;
      color: #adadaf;
      margin-right: 8px;
      position: relative;
      top: -2px;
    }

    > .breadcrumbBody {
      float: left;

      .el-breadcrumb__inner {
        color: #2c3e50 !important;
      }

      .el-breadcrumb__inner a,
      .el-breadcrumb__inner.is-link {
        font-weight: 100 !important;
      }
    }
  }
}
</style>
