<template>
   <component :is="iconType" :type="iconName" :color="iconColor" :size="iconSize" :proConfig="proConfig" @click="click"/>
</template>

<script>
import Eicon from './eicon.vue';
// import Faicon from './faicon.vue';
export default {
    name: 'commonicon',
    components: {Eicon},
    props: {
        type: {
            type: String,
            required: true
        },
        color: String,
        size: [Number,String],
        proConfig: {
            type:Object,
            default:() => {}
        }
    },
    computed: {
        iconType () {
            return this.type.indexOf('_') === 0 ? 'Eicon' : this.type.indexOf('fa_') === 0?'Faicon':'Icon';
        },
        iconName () {
            return this.iconType === 'Eicon' ? this.getCustomIconName(this.type) : this.iconType === 'Faicon'? this.getCustomIconName2(this.type):this.type;
        },
        iconSize () {
            return this.size || (this.iconType === 'Eicon' ? 12 : undefined);
        },
        iconColor () {
            return this.color || '';
        }
    },
    methods: {
        getCustomIconName (iconName) {
            return iconName.slice(1);
        },
        getCustomIconName2(iconName) {
            return iconName.slice(3);
        },
        click() {
            this.$emit('click','');
        }
    }
};
</script>

<style>

</style>
