<template>
    <div ref="iconfontRef" class="app-iconfont">
        <svg :class="['app-iconfont__icon', active && 'is-active']" aria-hidden="true">
            <use :xlink:href="activeIconName" :fill="activeColor" v-if="active" />
            <use :xlink:href="iconName" :fill="color" v-else />
        </svg>
        <span class="app-iconfont__label">
            <slot></slot>
        </span>
    </div>
</template>

<script lang="ts" setup>
import { shallowRef, computed, PropType, onMounted } from 'vue'

const props = defineProps({
    icon: {
        type: String,
        required: true
    },
    color: String,
    active: Boolean,
    activeIcon: String,
    activeColor: String,
    // 标签方向
    labelDirection: {
        type: String as PropType<'left' | 'right' | 'top' | 'bottom'>,
        default: 'right',
    },
})

const iconfontRef = shallowRef<HTMLDivElement>()
const iconName = computed(() => '#' + props.icon)
const activeIconName = computed(() => '#' + (props.activeIcon ?? props.icon))

onMounted(() => {
    const el = iconfontRef.value
    if (el) {
        switch (props.labelDirection) {
            case 'left': {
                el.style.setProperty('flex-direction', 'row-reverse')
                break
            }
            case 'top': {
                el.style.setProperty('flex-direction', 'column-reverse')
                break
            }
            case 'bottom': {
                el.style.setProperty('flex-direction', 'column')
                break
            }
        }
    }
})
</script>

<style lang="less" scoped>
@import './index.less';
</style>