<template>
  <div class="ui-navbar">
    <component
      :is="item.url ? 'router-link' : 'span'"
      v-for="(item, index) in items"
      :key="index"
      :to="item.url"
      class="ui-navbar__item"
      :class="{'is-active': item.name === value}"
      @click="handleItemClick(item)"
    >
      <span class="ui-navbar__item-label">{{ item.label }}</span>
    </component>
  </div>
</template>
<script>
export default {
  name: 'UiNavbar',
  props: {
    value: {
      type: String,
      default: ''
    },
    /**
     * [{
     *    label: 'xxx',
     *    url: 'xx',
     *    name: 'xxx',
     *    icon: 'xxx,
     * }]
    */
    items: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleItemClick(item) {
      if (item.url) {
        return
      }
      this.$emit('input', item.name)
    }
  }
}
</script>
<style lang="less">
.ui-navbar{
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: PingFangSC-Semibold, PingFang SC, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans", "Noto Sans CJK Sc", "Microsoft YaHei", "Microsoft Jhenghei", sans-serif;
}
.ui-navbar__item{
  height: 32px;
  line-height: 32px;
  color: #606C80;
  font-size: 16px;
  position: relative;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}
.ui-navbar__item:not(:last-child) {
  margin-right: 32px;
}
.ui-navbar__item:after {
  content: '';
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: 0;
  height: 2px;
  opacity: 0;
  transition: all .25s;
}
.ui-navbar__item {
  &.is-active, &.router-link-active{
    font-weight: bold;
    color: #202D40;
    &::after {
      left: 0;
      right: 0;
      background-color: #3385FF;
      opacity: 1;
    }
  }
}
</style>
