<template>
<div class="flex" style="justify-content: center">
  <img v-if="isImg" class="inconimg" :src="require(`../../assets/icons/${src}`)">
  <component v-else :is="iconType" :type="iconName" :color="iconColor" :size="iconSize"/>
</div>

</template>

<script>
import Icons from '../icons'
export default {
  name: 'CommonIcon',
  components: { Icons },
  props: {
    type: {
      type: String,
      required: true
    },
    color: String,
    size: Number,
    src:{
      type:String,
      default:()=>{
        return ''
      }
    },
    active:null
  },
  computed: {
    isImg(){
      let strsrc = this.src.toLowerCase()
      if(strsrc.indexOf('.png')>-1||strsrc.indexOf('.jpg')>-1||strsrc.indexOf('.gif')>-1||strsrc.indexOf('.svg')>-1){
        return true
      } else {
        return false
      }
    },
    iconType () {
      return this.type.indexOf('_') === 0 ? 'Icons' : 'Icon'
    },
    iconName () {
      if(this.type.indexOf('.png')>0){
        this.isImg = true
      }
      return this.iconType === 'Icons' ? this.getCustomIconName(this.type) : this.type
    },
    iconSize () {
      return this.size || (this.iconType === 'Icons' ? 12 : undefined)
    },
    iconColor () {
      return this.color || ''
    }
  },
  methods: {
    getCustomIconName (iconName) {
      return iconName.slice(1)
    }
  }
}
</script>

<style>
.menuicon{
  display: inline-block;
}
.inconimg{
  height: 20px;
  width: 20px;
}
</style>
