<template>
    <i class="iconfont ui-kankan-icon icon" :class="className" :style="style" @click="ev => emit('click', ev)">
        <slot></slot>

        <p class="tip" v-if="tip && os.isPc && !os.isTablet">{{ tip }}</p>
    </i>
</template>

<script setup>
import { defineProps, computed, defineEmits } from 'vue'
import { normalizeUnitToStyle, os } from '../../utils'

const props = defineProps({
    type: { type: String },
    size: { type: [Number, String] },
    color: { type: String },
    small: { type: Boolean },
    ctrl: { type: Boolean },
    medium: { type: Boolean },
    big: { type: Boolean },
    disabled: { type: Boolean },
    tip: { type: String },
    tipH: {
        type: String,
        default: 'center',
    },
    tipV: {
        type: String,
        default: 'bottom',
    },
})

const style = computed(() => ({
    'font-size': normalizeUnitToStyle(props.size),
    color: props.color,
}))
const className = computed(() => {
    const base = {
        small: props.small,
        medium: props.medium,
        big: props.big,
        disabled: props.disabled,
        [`tip-h-` + props.tipH]: true,
        [`tip-v-` + props.tipV]: true,
        ['fun-ctrl']: props.ctrl,
    }
    if (props.type) {
        return {
            ...base,
            [`icon-${props.type}`]: props.type,
            [`iconzm-${props.type}`]: props.type,
        }
    } else {
        return base
    }
})

const emit = defineEmits(['click'])
</script>

<style>
/* @import url('./iconfont/iconfont.css'); */
</style>
<script>
export default { name: 'ui-icon' }
</script>
