<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2018-10-10 14:44:45
 * @LastEditors: 无尘
 * @LastEditTime: 2020-08-27 09:27:00
 -->
<template>
  <div class="nav-wrap border-box">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <template v-for="(item, index) in navpath">
        <template v-if="!!item.path">
          <el-breadcrumb-item :key="'nav' + index" :to="{ path: item.path }" @click="changeRoute(item.path, item.relocation)">
            <span class="el-breadcrumb__inner is-link" @click="changeRoute(item.path, item.relocation)">
              {{ item.name }}
            </span>
          </el-breadcrumb-item>
        </template>
        <template v-else>
          <el-breadcrumb-item :key="'nav' + index">{{ item.name }}</el-breadcrumb-item>
        </template>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'NavPath',
  props: {
    navpath: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      projectName: 'member' // 当前项目名
      // navpath: [
      //   {
      //     name: '首页',
      //     path: ''
      //   },
      //   {
      //     name: '会员标签',
      //     path: ''
      //   },

      // ],
    };
  },
  methods: {
    changeRoute(path, relocation) {
      let that = this;
      if (relocation) {
        window.location.href = path;
      } else {
        that.$router.push(path);
      }
    },

  }
};
</script>

<style scoped>
.nav-wrap {
  padding: 12px 20px;
}

.el-breadcrumb__inner.is-link:hover, .el-breadcrumb__inner a:hover {
  color: #2f54eb;
}

.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  color: #303133;
}
</style>
