<template>
    <span 
        ref="reference" 
        :class="wrapperClasses"
        v-click-outside.capture="handleCloseDrop"
        v-click-outside:mousedown.capture="handleCloseDrop">
        <div @click="handleClick('reference')" :class="innerClasses">
            <span><slot>{{value}}</slot></span>
            <Icon 
                v-if="type === 'add'"
                type="close"/>
            <Icon 
                v-if="closeable"
                type="close" 
                @click.native.stop="handleClick('icon')"/>
        </div>
        <transition v-if="type === 'add'" name="transition-drop">
            <Dropdown 
                ref="dropdown"
                v-show="dropVisible">
                <Input ref="input" 
                    v-model="addValue"
                    style="width: 240px"
                    :placeholder="placeholder"
                    :clearable="clearable"
                    @on-enter="handleEnter"/>
                <span :class="prefixCls + '-icon'"
                    @click.stop="handleOk">
                    <Icon type="check"/>
                </span>
                <span :class="prefixCls + '-icon'"
                    @click.stop="handleCancel">
                    <Icon type="close"/>
                </span>
            </Dropdown>
        </transition>
    </span>
</template>
<script>
    import Icon from '../icon/'
    import Dropdown from '../select/dropdown'
    import Input from '../input/'
    import Emitter from '../../../mixins/emitter'
    import ClickOutside from '../../../directives/clickoutside'
    import { oneOf } from '../../../utils/assist'

    const prefixCls = 'yy-tag'
    export default {
        name: 'YYTag',
        mixins: [ Emitter ],
        components: {
            Dropdown,
            Input,
            Icon
        },
        directives: {
            ClickOutside
        },
        props: {
            value: {
                type: [String, Number]
            },
            active: {
                type: Boolean,
                default: false
            },
            closeable: {
                type: Boolean,
                default: false
            },
            clearable: {
                type: Boolean,
                default: false
            },
            placeholder: {
                type: String,
                default: '请输入标签名称'
            },
            size: {
                validator(value) {
                    return oneOf(value, ['small', 'large'])
                }
            },
            type: {
                validator(value) {
                    return oneOf(value, ['add'])
                }
            },
            disabled: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                prefixCls: prefixCls,
                dropVisible: false,
                addValue: ''
            }
        },
        computed: {
            wrapperClasses() {
                return [
                    prefixCls,
                    {
                        [`${prefixCls}-${this.size}`]: !!this.size,
                        [`${prefixCls}-${this.type}`]: !!this.type,
                        [`${prefixCls}-active`]: !!this.active,
                        [`${prefixCls}-disabled`]: this.disabled
                    }
                ]
            },
            innerClasses() {
                return [
                    prefixCls + '-inner'
                ]
            }
        },
        methods: {
            handleClick(source) {
                if (this.disabled) return;
                if(this.type === 'add' && source === 'reference') {
                    return this.handleToggleDrop()
                }
                this.$emit('click', this.value)
                if(source === 'icon') {
                    this.$emit('on-delete', this.value)
                }
            },
            handleToggleDrop() {
                this.broadcast('YYDropdown', 'on-update-popper')
                this.dropVisible = !this.dropVisible
                if(this.dropVisible) {
                    setTimeout(()=>{
                        this.$refs.input.focus()
                    }, 100)
                }
            },
            handleCloseDrop() {
                this.dropVisible = false
            },
            handleEnter() {
                this.$emit('on-ok', this.addValue)
                this.$refs.input.blur()
            },
            handleOk() {
                this.$emit('on-ok', this.addValue)
                this.handleCloseDrop()
                this.addValue = ''
            },
            handleCancel() {
                this.handleCloseDrop()
                this.$emit('on-cancel')
            }
        }
    }
</script>

