<template>
  <div :class="['ipub-menus-item', 'ipub-menus-item--'+type]"
       @click="handleClick">
    <slot>
      <div>
        <template v-if="item[hrefLabel]">
          <a :target="item.target||''"
             :href="item[hrefLabel]">
            {{item[nameLabel] || item}}
          </a>
        </template>
        <font v-else>{{item[nameLabel] || item}}</font>
      </div>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'IpubMenusItem',
  props: {
    item: {
      type: [Object, String],
      default () {
        return {}
      }
    },
    type: {
      type: String,
      default: 'theme',
      validator (val) {
        return ['default', 'link', 'theme', 'danger', 'warning', 'success'].indexOf(val) !== -1
      }
    },
    nameLabel: {
      type: String,
      default: 'name'
    },
    hrefLabel: {
      type: String,
      default: 'href'
    },
  },
  methods: {
    handleClick (e) {
      this.$emit('click', e)
    }
  }
}
</script>

<style lang="scss" scoped>
@mixin menus-type($color) {
  // a {
  //   color: $color !important;
  // }
  // &:hover,
  &.active,
  &::after {
    color: $color;
  }
  font,
  a {
    &:hover {
      color: $color;
    }
  }
}
.ipub-menus-item {
  margin: 10px 0;
  font-weight: 600;
  transition: 0.3s all;
  position: relative;
  padding-left: 0;
  a,
  font {
    transition: 0.3s all;
  }
  &:hover,
  &.active {
    color: $theme_color;
    padding-left: 16px;
    &::after {
      opacity: 1;
    }
  }
  &::after {
    content: '>';
    transition: 0.3s all;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    color: $theme_color;
  }
  &--default {
    @include menus-type($main_color);
  }
  &--theme {
    @include menus-type($theme_color);
  }
  &--danger {
    @include menus-type($key_color);
  }
  &--warning {
    @include menus-type($warning_color);
  }
  &--success {
    @include menus-type($success_color);
  }
  &--link {
    @include menus-type($link_color);
  }
}
</style>
