<!--
公共头部带箭头
<arrow-nav-bread :menuData="menuData"></arrow-nav-bread>
import arrowNavBread from '@/components/nav/arrow-nav-bread.vue'

components: {
  arrowNavBread
},

-->
<template>
  <div class="right-content-top border-box">
    <div class="right-top-wrap flex flex-row flex-space-between flex-pack-center">
      <div class="right-top-wrap_left flex flex-pack-center">
        <div aria-label="Breadcrumb" role="navigation" class="el-breadcrumb">
          <template v-for="(item, index) in titleData">
            <span class="el-breadcrumb__item" :key="index" @click="redirectRoute(item.path)">
              <span role="link" :class="['el-breadcrumb__inner', !!item.path ? 'is-link' : '']">{{ item.name }}</span>
              <i class="el-breadcrumb__separator el-icon-arrow-right"></i>
            </span>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'arrow-nav-bread',
  props: {
    menuData: {
      type: [Array, Object],
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      requestProject: 'openPlatform',
      titleData: []
    };
  },
  watch: {
    menuData(newDate) {
      if (!!newDate) {
        this.titleData = newDate;
      }
    }
  },
  mounted() {
    let that = this;
    if (!!that.menuData) {
      that.titleData = that.menuData;
    }
  },
  methods: {
    /**
     * 路由跳转
     */
    changeRoute(path) {
      this.$router.push(path);
    },

    redirectRoute(path) {
      let that = this;
      if (!!path) {
        that.changeRoute(path);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.right-content-top {
  .right-top-wrap {
    padding: 16px 0;
  }
  .el-breadcrumb__item {
    .el-breadcrumb__inner {
      color: #0a1633;
      font-weight: 600;
      &:hover {
        color: #0a1633;
      }
      &.is-link {
        color: #0a1633;
        font-weight: 400;
        &:hover {
          color: #4c70e8;
        }
      }
    }
  }
}
</style>
