<!--内容超过宽度显示提示框-->
<template>
  <div class="breadcrumb">
    <span
      v-if="breadcrumb.length > 1"
      class="el-icon-back"
      @click="backTo"
    ></span>
    <el-breadcrumb>
      <el-breadcrumb-item>
        <span class="weight">
          {{ breadcrumb[breadcrumb.length - 1].label }}</span
        ></el-breadcrumb-item
      >
    </el-breadcrumb>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "breadcrumb",
  props: {
    width: {
      type: Number,
      default: 0
    }
  },
  computed: {
    ...mapState({
      breadcrumb: state => state.commonStore.breadcrumb
    })
  },
  methods: {
    getPath(tempBreadcrumb) {
      if (tempBreadcrumb.length > 1) {
        tempBreadcrumb.pop();
        let lastBread = tempBreadcrumb[tempBreadcrumb.length - 1];
        if (
          !lastBread ||
          !lastBread.path ||
          typeof lastBread.path !== "string"
        ) {
          this.getPath(tempBreadcrumb);
        } else {
          this.$router.push({ path: lastBread.path });
        }
      }
    },
    backTo() {
      try {
        let tempBreadcrumb = JSON.parse(JSON.stringify(this.breadcrumb));
        this.getPath(tempBreadcrumb);
        this.$store.commit("setBreadcrumb", tempBreadcrumb);
      } catch (e) {
        console.log(e);
      }
    }
  }
};
</script>

<style lang="scss" scope>
.breadcrumb {
  margin-bottom: 16px;
  display: flex;
  .el-icon-back {
    margin-right: 16px;
    cursor: pointer;
    font-size: 16px;
  }
}
</style>
