header

<style lang="stylus" scoped>
  @import "../css/base/variables.styl"
  @import "../css/mixins/index.styl"
  .header-wrap
    box-shadow 0 0 1px rgba(0, 0, 0, 0.25)
    background #F1F1F1
    z-index 5
    height 50px
    line-height 50px
  .header
    display flex
    height 50px
    line-height 50px
    z-index 1
    align-items center
    box-sizing border-box
    width calc(100% - 48px)
    a
      max-width 120px
      text-ellipsis()
      white-space nowrap
      &:last-child:not(.home-link)
      &.person
      &.home-link
        flex-shrink 0
    .icon
      flex-shrink 0
  .default-color
      color #cd0010
</style>

<template>
  <div class="header-wrap">
    <div v-show="visible" class="header pl1">
      <router-link class="px05 home-link default-color" :to="{path: '/', query: null}">全部</router-link>
      <template v-if="personName">
        <icon name="angle-right" class="text-light icon" />
        <a class="px05 person default-color" @click="personClick(personName)" >{{personName}}</a>
      </template>

      <template v-if="storeName">
        <icon name="angle-right" class="text-light icon" />
        <a class="store px05 default-color" @click="storeClick(personName, storeName)">{{storeName}}</a>
      </template>

      <template v-if="categoryName">
        <icon name="angle-right" class="text-light icon" />
        <a class="px05 ">{{categoryName}}</a>
      </template>
    </div>
    <slot name="selected-counter"></slot>
    <slot name="button"></slot>
  </div>
</template>

<script type="text/babel">
  import linkMixin from './mixins/link'
  import paramsMixin from './mixins/params'

  export default{
    mixins: [linkMixin, paramsMixin],
    props: {
      visible: {
        type: Boolean,
        default: true
      }
    }
  }
</script>