<!--
<nav-bread :menuData="menuData"></nav-bread>

import navBread from '@/components/haoban/nav-bread.vue'

components: {
  navBread
},

-->
<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">
        <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">安卓配置</el-breadcrumb-item>
          <el-breadcrumb-item>查看详情</el-breadcrumb-item>
        </el-breadcrumb> -->
        <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: 'tableList',
  props: {
    menuData: {
      type: [Array, Object],
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      requestProject: 'gic-bizdict',
      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 {
  padding: 0 24px;
  border-bottom: 1px solid #ebeef5;

  .right-top-wrap {
    padding: 16px 0;
  }

  .el-breadcrumb__item {
    .el-breadcrumb__inner {
      color: #303133;
      &.is-link {
        color: #909399;
      }
    }
  }

  /* .right-top-wrap_left {

  } */
}
</style>
