<template>
  <el-breadcrumb
    class="ui-breadcrumb"
    :class="['ui-breadcrumb--' + size]"
    :separator="separator"
  >
    <slot></slot>
  </el-breadcrumb>
</template>
<script>
import Breadcrumb from 'element-ui/lib/breadcrumb'
import 'element-ui/lib/theme-chalk/breadcrumb.css'

export default {
  name: 'UiBreadcrumb',
  components: {
    ElBreadcrumb: Breadcrumb
  },
  props: {
    separator: {
      type: String,
      default: '/'
    },
    size: {
      type: String,
      default: 'small',
      validator(value) {
        return ['large', 'small'].includes(value)
      }
    }
  }
}
</script>
<style lang="less">
.ui-breadcrumb.ui-breadcrumb--large {
  font-size: 18px;
}
.ui-breadcrumb{
  .el-breadcrumb__inner{
    &,&.is-link, a {
      font-weight: 700;
      color: #999;
    }
  }
  .el-breadcrumb__item{
    &:last-child{
      .el-breadcrumb__inner{
        font-weight: 700;
        color:#303133;
        &:hover {
          font-weight: 700;
          color:#303133;
        }
      }
    }
  }
}
</style>
