
<!--
  获取当前页面当前路径  如 ：ZCMS内容管理系统 > 会员 > 会员信息
  使用方式 ：<el-position></el-position>
  支持属性参照elementUI Breadcrumb 面包屑组件
 -->
<template>
    <el-row style="padding:10px">
      <el-col :span="24">
        <el-breadcrumb :separator="separator" :separator-class="separatorClass">
          <el-breadcrumb-item v-for="(item,i) in currentPosition" :to="{ path: item.path }" :key="item.path">
            <span :class="i+1===currentPosition.length?'position-current':'position-gray'">{{item.title}}</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
</template>

<script>
// import routes from '../router/index.js'

export default {
  props: {
    // 自定义数据 ，未传入将自动获取当前路径
    data: {
      type: Array,
      default: function() {
        //  let arr=[{title:'会员'path:'/member'}]
        return []
      }
    },
    // 分隔符
    separator: {
      type: String,
      default: '/'
    },
    // 图标分隔符 class
    separatorClass: {
      type: String,
      default: 'el-icon-arrow-right'
    }
  },
  data() {
    return {
      currentPosition: []
    }
  },
  methods: {
    initPosition() {
      const root = {
        title: 'ZCMS内容管理系统',
        path: '/'
      }
      const currentRoute = {
        title: this.$route.meta.title,
        path: this.$route.path
      }

      let currentPosition = [root]

      const routes = window.routes
      let parent = routes.find(item => item.path !== '/' && currentRoute.path.startsWith(item.path))
      if (parent && parent.children && parent.children.length) {
        let obj = {
          title: parent.meta.title,
          path: parent.children[0].path
        }
        currentPosition.push(obj)
      }
      currentPosition.push(currentRoute)

      this.currentPosition = [...currentPosition]
    }
  },
  created() {
    this.data.length && this.currentPosition.splice(-1, this.currentPosition.length, ...this.data)
    !this.data.length && this.initPosition()
  }
}
</script>

<style scoped>
.position-gray {
  color: #999;
}
.position-gray:hover {
  color: #28b06e;
}
.position-current {
  color: #28b06e;
}
</style>
