<template>
    <!-- fontawesome和vant图标 -->
    <span class="font-icon" :class="{'block-icon': isBlock}">
        <template v-if="isVantIcon()">
            <van-icon :name="icon" :size="size" :color="color" @click="onClick"></van-icon>
        </template>
        <span v-else :style="{ fontSize: `${size}px`, color: `${color}` }" @click="onClick">
            <font-awesome-icon :icon="getIcon"/>
        </span>
        <slot/>
    </span>
</template>

<script>
    import Vue from 'vue'
    import {library} from '@fortawesome/fontawesome-svg-core'
    import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
    import {fas} from '@fortawesome/free-solid-svg-icons'
    import {far} from '@fortawesome/free-regular-svg-icons'
    import {fab} from '@fortawesome/free-brands-svg-icons'

    library.add(fas, far, fab)
    Vue.component('font-awesome-icon', FontAwesomeIcon)

    export default {
        name: 'BgoFontIcon',
        props: {
            // 图标名称
            icon: {
                type: String,
                default: ''
            },
            type: {
                type: String,
                default: 'font-awesome',
                validator: (value) => {
                    return ['font-awesome', 'vant'].indexOf(value) !== -1
                }
            },
            // 图标大小px
            size: {
                type: Number,
                default: 16
            },
            isBlock: {
                type: Boolean,
                default: false
            },
            // 颜色
            color: {
                type: String,
                default: ''
            }
        },
        computed: {
            // 处理fontawesome格式，'fas user' => ['fas', 'user']
            getIcon() {
                let icon = this.icon
                const arr = icon.split(' ')
                icon = [arr[0], arr[1]]
                return icon
            }
        },
        methods: {
            // 判断是否为vant图标
            isVantIcon() {
                return this.type === 'vant';
            },
            // 点击事件回调
            onClick(event) {
                this.$emit('click', event);
            }
        }
    }
</script>

<style lang="scss">
    .font-icon {
        padding-right: 5px;
        display: inline-block;
        &.block-icon {
            padding-right: 0px;
        }
    }
</style>
