<template>
  <div class="bread-menu">
    <span class="bread-menu-item" v-for="(el, index) in menuList" :key="el.menuCode">
      <i v-if="index > 0" class="bread-menu-icon iconfont-hb3 iconnavigate_next"></i>
      <span :class="['bread-menu-text', index == menuList.length - 1 ? 'bread-menu-actived' : 'is-link']" @click="toPage(index)">{{ el.menuName }}</span>
    </span>
  </div>
</template>

<script>
export default {
  name: 'BreadMenu',
  props: {
    menuList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    toPage(index) {
      if (index == this.menuList.length - 1) return;
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.bread-menu {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 8px;
  .bread-menu-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    + .bread-menu-item {
      margin-left: 10px;
    }
    .bread-menu-text {
      height: 22px;
      font-size: 14px;
      font-weight: 400;
      color: #606266;
      line-height: 22px;
      cursor: default;
      &.is-link {
        cursor: pointer;
        &:hover {
          color: #2f54eb;
        }
      }
      &.bread-menu-actived {
        font-weight: 500;
        color: #303133;
      }
    }
    .bread-menu-icon {
      margin-right: 10px;
    }
  }
}
</style>
