<template lang="pug">
  el-breadcrumb(separator="/" class="app-breadcrumb")
    transition-group(name="breadcrumb")
      el-breadcrumb-item(v-for="(item,index) in levelList" :key="item.path")
        span(v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect") {{ item.meta.title }}
        a(v-else @click.prevent="handleLink(item)") {{ item.meta.title }}
</template>

<script>
import pathToRegexp from 'path-to-regexp'

export default {
  data() {
    return {
      levelList: null
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      // only show routes with meta.title
      let matched = this.$route.matched.filter(
        item => item.meta && item.meta.title
      )
      // const first = matched[0]

      // if (this.isWhoRoute(first, 'dayBillingInquiry')) {
      //   matched = [{ path: '/billing', meta: { title: '账单查询' } }].concat(
      //     matched
      //   )
      // }
      // if (this.isWhoRoute(first, 'billingDetail')) {
      //   matched = [
      //     { path: '/billing', meta: { title: '账单查询' } },
      //     { path: '/billing/dayBillingInquiry', meta: { title: '日调用量' } }
      //   ].concat(matched)
      // }

      this.levelList = matched.filter(
        item => item.meta && item.meta.title && item.meta.breadcrumb !== false
      )
    },
    isWhoRoute(route, str) {
      const name = route && route.name
      if (!name) {
        return false
      }
      return name.trim().toLocaleLowerCase() === str.toLocaleLowerCase()
    },
    pathCompile(path) {
      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
      const { params } = this.$route
      const toPath = pathToRegexp.compile(path)
      return toPath(params)
    },
    handleLink(item) {
      const { redirect, path } = item
      if (redirect) {
        this.$router.push(redirect)
        return
      }
      this.$router.push(this.pathCompile(path))
    }
  }
}
</script>

<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  height: 54px;
  font-size: 14px;
  padding-left: 32px;
  display: flex;
  align-items: center;
  .no-redirect {
    color: #666;
    cursor: text;
  }
}
/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.5s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: all 0.5s;
}

.breadcrumb-leave-active {
  position: absolute;
}
</style>
<style lang="scss" scoped>
.app-breadcrumb {
  .el-breadcrumb__inner.is-link,
  .el-breadcrumb__inner a {
    color: rgba(0, 0, 0, 0.45);
  }
  .el-breadcrumb__inner .no-redirect {
    color: rgba(0, 0, 0, 0.65);
    font-weight: 400;
  }
  .el-breadcrumb__inner.is-link:hover,
  .el-breadcrumb__inner a:hover {
    cursor: auto;
    color: rgba(0, 0, 0, 0.45);
  }
}
</style>