<template>
  <el-breadcrumb class="app-breadcrumb" separator=">">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item,index) in levelListWithTitle" :key="item.path+'-'+index">
        <span class="no-redirect">
          {{ $t(item.meta.title) }}
        </span>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>
import Vue from 'vue'
import { getLanguageWithLocale } from '../../../../utils/util'
import pathToRegexp from 'path-to-regexp'
import Cookies from 'js-cookie'

export default {
  name: 'Breadcrumb',
  data() {
    return {
      levelList: null
    }
  },
  computed: {
    levelListWithTitle() {
      return this.levelList.filter(item => (item.meta.title !== undefined && item.meta.title !== null))
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      const { params } = this.$route
      console.log('this.$route.matched==', this.$route.matched)
      let matched = this.$route.matched.filter(item => {
        if (item.name) {
          // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
          var toPath = pathToRegexp.compile(item.path)
          item.path = toPath(params)
          return true
        }
      })
      // const first = matched[0]
      if (matched) {
        let systemName
        const language = getLanguageWithLocale()
        const systemNameObj = Vue.prototype.systemNameObj
        if (systemNameObj) {
          systemName = systemNameObj[language]
        }
        matched = [{ path: '/', redirect: 'noredirect', meta: { title: systemName }}].concat(matched)
        const cookieMenu = localStorage.getItem('selectMenu')
        const leftSelectMenu = Vue.prototype._selectMenu
        let selectMenu
        if (leftSelectMenu) {
          selectMenu = leftSelectMenu
        } else if (cookieMenu) {
          selectMenu = cookieMenu
        }
        if (selectMenu) {
          // 解决表单页面无法获得列表路由
          const path = selectMenu.substring(0, selectMenu.indexOf('~~'))
          const title = selectMenu.substring(selectMenu.indexOf('~~') + 2)
          if (matched && matched.length > 0) {
            const lastRoute = matched[matched.length - 1]
            if (this.isShouldConcatLastMenu(title, path, lastRoute)) {
              matched.push({ path: path, meta: { title: title }})
            }
          } else {
            matched.push({ path: path, meta: { title: title }})
          }
        }
      }
      this.levelList = matched
    },
    // 新建页面时会把列表页面路由刷没，导致菜单路径缺少最后一层菜单问题
    isShouldConcatLastMenu(title, path, lastRoute) {
      if (this.isTitleNotEqual(title, lastRoute) && this.isPathNotEqual(path, lastRoute)) {
        // title和path都不同，表示是不同的页面，需要添加到matched集合中
        return true
      }
      return false
    },
    /**
     * Vue.prototype._selectMenu的菜单标题是否与最后的路由页面标题一致
     * 返回true表示不一样，返回false表示一样
     */
    isTitleNotEqual(title, lastRoute) {
      if (title && lastRoute.meta && (title !== lastRoute.meta.title && title !== this.$t(lastRoute.meta.title))) {
        // 表示title不一样，当前可能是在表单页面，需要添加到matched集合中
        return true
      }
      return false
    },
    /**
     * Vue.prototype._selectMenu的菜单的访问路径是否与最后的路由页面的路径一致
     * 返回true表示不一样，返回false表示一样
     */
    isPathNotEqual(path, lastRoute) {
      if (path && lastRoute.path && path !== lastRoute.path) {
        // 表示path不一样，当前可能是在表单页面，需要添加到matched集合中
        return true
      }
      return false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .app-breadcrumb.el-breadcrumb {
    background-color: #eee;
    width: 100%;
    border: 1px solid #ccc;
    bottom: 2px;
    margin-left: 2px;
    display: inline-block;
    font-size: 14px;
    line-height: 40px;
    .no-redirect {
      color: #333;
      cursor: text;
    }
    .el-breadcrumb__item{
      padding-left: 5px
    }
    .el-breadcrumb__separator{
      margin: 0 5px;
    }
  }
</style>
