<template>
  <v-breadcrumbs
    :items="crumbs"
    class="px-0"
    large>
    <template v-slot:item="{ item }">
      <v-breadcrumbs-item
        :to="item.to"
        :class="item.class"
        exact>
        <v-icon
          v-if="item.icon"
          small
          class="mr-2">
          {{ item.icon }}
        </v-icon>
        {{ item.text }}
      </v-breadcrumbs-item>
    </template>
  </v-breadcrumbs>
</template>

<script>
export default {
  name: 'Breadcrumb',
  props: {
    prefix: {
      type: Array,
      default: () => ([])
    }
  },
  computed: {
    crumbs () {
      const breadcrumbs = []
      this.$route.matched.forEach((matched) => {
        let name = matched.name
        if (name) {
          name = this.$t(`breadcrumb.${this.$_.camelCase(matched.name)}`)
          breadcrumbs.push({
            name: matched.name,
            to: matched,
            text: name
          })
        }
      })
      return this.$_.concat(this.prefix, breadcrumbs)
    }
  }
}
</script>
<style lang="scss" scoped>
  ::v-deep {
    div.v-breadcrumbs__item {
      color: rgba(0, 0, 0, 0.38);
    }
    .v-breadcrumbs__divider,
    .v-breadcrumbs__item--disabled {
      color: var(--v-secondary-base) !important;
    }
  }
</style>
