<template>
  <span>
    <svg-icon v-if="icon" className="icon" :icon-class="ComIcon" />
    <span v-if="title" slot="title">{{ title }}</span>
  </span>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'MenuItem',
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    item: {
      type: Object
    }
  },
  computed: {
    ...mapState('permission', ['routes']),
    ComIcon() {
      const { path } = this.$route
      if (path.indexOf(this.item.path) > -1) {
        return `${this.icon}-active`
      } else {
        return this.icon
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.icon {
  width: 14px;
  height: 14px;
}
</style>