<template>
    <div :class="tagsClass"
         @mouseover="showIcon=true"
         @mouseleave="showIcon=false">
        <p :class="placeholderClass"
           v-if="model.length==0">{{placeholder}}</p>
        <jdd-tag v-for="item in model"
                 :key="item.value"
                 :value="item"
                 @remove="handleRemove" />
        <div v-if="iconSuffix||showClear"
             :class="suffixClass">
            <slot v-if="!showClear"
                  name="suffix">
                <i v-if="iconSuffix&&!showClear"
                   :class="[`${prefix}-input__icon`,iconSuffix]" />
            </slot>
            <i v-if="showClear"
               :class="clearClass"
               @click.stop="clear" />
        </div>
    </div>
</template>

<script>
import Tag from './tag';
import { prefix, prefixMixins } from 'jdd-design/utils';
export default {
    name: `${prefix}-tags`,
    components: {
        jddTag: Tag
    },
    mixins: [prefixMixins],
    props: {
        size: String,
        iconSuffix: String,
        value: Array,
        placeholder: String
    },
    data() {
        return {
            showIcon: false,
            model: []
        };
    },
    provide() {
        return {
            jddTags: this
        };
    },
    computed: {
        realSize() {
            return (
                this.size ||
                (this.jddSelect && this.jddSelect.realSize) ||
                'medium'
            );
        },
        tagsClass() {
            let clsNames = [`${prefix}-tags`];
            this.realSize && clsNames.push(`${prefix}-tags--${this.realSize}`);
            this.jddFormItem &&
                this.jddFormItem.errorState &&
                clsNames.push(`is-${this.jddFormItem.errorState}`);
            return clsNames;
        },
        tagsDisabled() {
            return this.disabled || (this.jddSelect && this.jddSelect.disabled);
        },
        suffixClass() {
            let clsNames = [`${prefix}-tags__suffix`];
            return clsNames;
        },
        placeholderClass() {
            let clsNames = [`${prefix}-tags__placeholder`];
            return clsNames;
        },
        clearClass() {
            let clsNames = [`${prefix}-tags__clear`];
            clsNames.push(`${prefix}-icon-error`);
            return clsNames;
        },
        showClear() {
            return (
                this.jddSelect &&
                this.jddSelect.clearable &&
                this.showIcon &&
                !this.tagsDisabled &&
                this.value.length
            );
        }
    },
    watch: {
        value: function(val) {
            this.model = val;
        }
    },
    inject: {
        jddSelect: {
            default: null
        },
        jddForm: {
            default: null
        },
        jddFormItem: {
            default: null
        }
    },
    mounted() {
        this.model = this.value;
    },
    methods: {
        handleRemove(item) {
            this.$emit('remove', item);
        },
        clear() {
            this.model = [];
            this.$emit('clear');
        },
        focus() {}
    }
};
</script>

<style>
</style>
