<template>
    <transition name="ani-fade"
                @after-leave="handleAfterLeave">
        <div v-show="visible"
             :class="tagClass">
            <p :class="`${prefix}-tag-label`">
                {{ value.label }}
            </p>
            <i :class="`${prefix}-tag-close ${prefix}-icon-error`"
               @click="clickHandle" />
        </div>
    </transition>
</template>

<script>
import { prefix, prefixMixins } from 'jdd-design/utils';
export default {
    name: `${prefix}-tag`,
    mixins: [prefixMixins],
    props: {
        size: {
            type: String,
            default: 'small',
            validator(value) {
                return ['large', 'medium', 'small', 'mini'].indexOf(value) > -1;
            }
        },
        value: {
            type: Object
        }
    },
    inject: {
        jddTags: {
            default: null
        }
    },
    data() {
        return {
            visible: true
        };
    },
    computed: {
        tagClass() {
            let clsNames = [`${prefix}-tag`];
            clsNames.push(
                `${prefix}-tag--${this.size ||
                    (this.jddTags && this.jddTags.size)}`
            );
            return clsNames;
        }
    },
    methods: {
        handleAfterLeave() {
            this.$emit('remove', this.value);
            this.$destroy(true);
            this.$el.parentNode.removeChild(this.$el);
        },
        clickHandle(evt) {
            this.visible = false;
            evt.stopPropagation();
        }
    }
};
</script>

<style>
</style>
