<!--面包屑导航-->
<template>
  <div class="breadcrumb">
    <svg class="breadcrumb-icon">
      <use :xlink:href="svgName"></use>
    </svg>
    <div class="breadcrumb-item" v-for="(item,index) in breadcrumbOpt" :key="index">
      <span @click="breadcrumbClick(item,index)" :class="['link',index + 1 !== breadcrumbOpt.length ? 'is-link' : '']">
        {{ item.breadcrumbName }}
      </span>
      <span class="separator" v-if="index + 1 !== breadcrumbOpt.length">/</span>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Breadcrumb',
  props: {
    svgName: {
      default: '#icon-zuhuguanli',
      type: String
    },
    breadcrumbOpt: {
      default() {
        return [
          {breadcrumbName: '个人客户'},
          {breadcrumbName: '详情'}
        ]
      },
      type: Array
    }
  },
  data() {
    return {}
  },
  created() {
    console.log(this.$route)
  },
  methods: {
    breadcrumbClick(item, index) {
      if (index + 1 === this.breadcrumbOpt.length) return
      this.$emit('breadcrumb-click', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.breadcrumb {
  width: 100%;
  display: flex;
  align-items: center;
  user-select: none;

  .breadcrumb-icon {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    fill: #3760f6;
  }

  .breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    text-decoration: none;

    .link {
      font-size: 14px;
      font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
      color: #333;
      transition: all 0.2s;


      &.is-link {
        color: #828282;
        cursor: pointer;

        &:hover {
          color: #0380fc;
        }

      }
    }

    .separator {
      font-size: 14px;
      color: #C0C4CC;
      font-weight: 700;
      margin: 2px 8px 0;
    }
  }

}
</style>
