<template>
  <div class="custom-bread-crumb">
    <Breadcrumb :style="{fontSize: `${fontSize}px`}">
      <BreadcrumbItem v-for="item in list" :to="item.to" :key="`bread-crumb-${item.name}`">
        <common-icon style="margin-right: 4px;" :type="item.icon || ''"/>
        {{ showTitle(item) }}
      </BreadcrumbItem>
    </Breadcrumb>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from "vue-property-decorator";
import CommonIcon from "_c/common-icon/common-icon.vue";
import { showTitle } from "../../../libs/util";

@Component({
  components: {
    CommonIcon
  }
})
export default class customBreadCrumb extends Vue {
  @Prop({
    type: Array,
    default: () => []
  })
  private list!: Array<any>;

  @Prop({ type: Number, default: 14 }) private fontSize!: number;

  @Prop({ type: Boolean, default: false }) private showIcon!: boolean;

  showTitle(item) {
    return showTitle(item, this);
  }

  isCustomIcon(iconName): boolean {
    return iconName.indexOf("_") === 0;
  }
  getCustomIconName(iconName): string {
    return iconName.slice(1);
  }
}
</script>

