<template>
  <div class="title-layout">
    <div>
      <span class="label">{{routes[routes.length - 1]}}</span>
      <div v-html="temp" class="temp"></div>
    </div>
    <div class="router">
      <span>系统后台</span>
      <span v-for="route in routes" :key="route">{{route}}</span>
    </div>
  </div>
</template>

<script>
function queryPath (routes, route, path) {
  for (let i = 0; i < routes.length; i++) {
    if (routes[i].name === route.name) {
      path.unshift(routes[i])
      return true
    } else if (routes[i].children && queryPath(routes[i].children, route, path)) {
      path.unshift(routes[i])
      return true
    }
  }
  return false
}

export default {
  data () {
    return {
      temp: ''
    }
  },
  mounted () {
    this.$bus.$on('title-f', temp => {
      this.temp = temp
    })
  },
  computed: {
    routes () {
      let routes = []
      let paths = []
      queryPath(this.$router.options.routes, this.$route, paths)

      if (paths.length > 0) {
        paths.forEach(path => {
          path.meta && path.meta.text && routes.push(path.meta.text)
        })
      } else {
        routes.push(this.$route.meta.text)
      }
      return routes
    }
  }
}
</script>

<style scoped>
.title-layout {
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}

.label {
  font-size: 18px;
  font-weight: normal;
}

.temp {
  display: inline-block;
  margin-left: 10px;
}

.router span {
  color: rgb(153, 153, 153);
  font-size: 14px;
  font-weight: normal;
}

.router span::after {
  content: '>'
}

.router span:last-child:after {
  display: none;
}
</style>

<style>
.temp span {
  color: rgb(245, 108, 108);
  margin-left: 20px;
  font-size: 14px;
}
</style>
