<template>
    <span
        v-if="disableTransitions"
        :class="classes"
        :style="{ backgroundColor: color }"
        @click="handleClick"
    >
        <span :class="ns.e('content')">
            <slot/>
        </span>
        <mo-icon v-if="closable" :class="ns.e('close')" @click.stop="handleClose">
            <Close/>
        </mo-icon>
    </span>
    <transition :name="`${ns.namespace}-zoom-in-center`" appear>
        <span
            :class="classes"
            :style="{ backgroundColor: color }"
            @click="handleClick"
        >
            <span :class="ns.e('content')">
                <slot/>
            </span>
            <mo-icon v-if="closable" :class="ns.e('close')" @click.stop="handleClose">
                <Close/>
            </mo-icon>
        </span>
    </transition>

</template>

<script lang="ts">
export default {
    name: "MoTag"
};
</script>
<script lang="ts" setup>
import {computed} from 'vue'
import {Close} from '@element-plus/icons-vue'
import {useNamespace} from '@moui/hooks'
import {tagEmits, tagProps} from './tag.ts'
import MoIcon from "@moui/components/icon";

const props = defineProps(tagProps)
const emit = defineEmits(tagEmits)
const ns = useNamespace('tag')
const classes = computed(() => {
    const {type, hit, effect, closable, round, size} = props
    return [
        ns.b(),
        ns.is('closable', closable),
        ns.m(type),
        ns.m(size),
        ns.m(effect),
        ns.is('hit', hit),
        ns.is('round', round),
    ]
})

// methods
const handleClose = (event: MouseEvent) => {
    emit('close', event)
}

const handleClick = (event: MouseEvent) => {
    emit('click', event)
}
</script>
