<template>
    <div ref="vcontainer" :class="sizeClass" :style="{width:width+'px'}" v-click-outside="clickOutside"
    @keydown.self.down.stop="pointerForward()"
    @keydown.self.up.stop="pointerBackward()">


    <div style="position:relative"> 

        <!--输入框-->
        <input type="text" 
        class="v-autocomplete-search"
        autocomplete="off"
        ref="vinput"
        :id="id" 
        :style="{width:width+'px',paddingRight:magrinRight+'px'}" 
        @input="query($event)"
        @focus="focus"
        @blur="blur"
        v-model="model"
        :placeholder="placeholder"
        @keydown.down.prevent="pointerForward()"
        @keydown.up.prevent="pointerBackward()"
        @keydown.enter.prevent
        @keydown.enter.tab.stop.self="addPointerElement()"/>


        <!--工具组-->
        <div class="v-autocomplete-tools" ref="vtools">

            <!--清空展示内容-->
            <span class="v-autocomplete-clearContent" v-if="tools.clear" v-show="isShowClear" >
                <i class='v-icon-cancel' @click='clearContent'></i>
            </span>

            <!--数据加载提示-->
            <span class="v-autocomplete-loading" v-if="isShowLoading">
                <i class="v-icon-spin3 animate-loading-14"></i>
            </span>

            <!--下拉箭头图表-->
            <span v-else-if="tools.showArrowIcon" class="v-autocomplete-arrow">
                <i :class="[isExpand?'v-icon-up-dir':'v-icon-down-dir']" @click.prevent="expandDropList"></i>
            </span>

        </div>

    </div>
        


        <!--下拉列表-->
        <div ref="droplist" class="v-autocomplete-dropList scroll" 
        :id="id+'-dropList'" 
        :style="{minWidth:width+'px',maxHeight:maxHeight+'px',maxWidth:(maxWidth==-1?'':maxWidth+'px')}"
        v-show="isShowDropList">
            <ul v-if="FilterData&&FilterData.length>0">
                <li v-for="(item,index) in FilterData" 
                @mousedown.prevent="select(index)" 
                :style="{height:optionHeight+'px',lineHeight:optionHeight+'px'}"
                :class="getClass(index)" 
                :title="componentName==null?(maxWidth==-1?'':item[field]):''"
                @mousemove="setActive($event,index)"
                :key="index"
                >
                <template v-if="componentName!=null">
                    <component :is="componentName" :itemData="item" ></component>
                </template>
                <template v-else>
                    {{item[field]}}
                </template>
                </li>
            </ul>
        </div>
        

    </div>
</template>
<script>

    /*----------组件的参数使用说明---------*/
    /*
    *@id(type:String):输入框的id
    *@width(type:Number):输入框的宽度
    *@maxHeight(type:Number):下拉列表的最大展示高度(当设置的值为-1时,即为高度自适应)
    *@maxWidth(type:Number):下拉列表的最大宽度(当设置的值为-1时,即为高度自适应)
    *@events(type:Array):外部配置的事件
    [
        onFocus:鼠标点击文本框的时触发,(type:Function),方法参数:暂无
        query:供外部配置的查询数据的事件,(type:Function),方法参数:arguments[0]:当前选中的下拉的数据对象(type:Object),arguments[1]:组件回传数据的回调函数,必须在查询到数据后执行,参数是已查询到的数据
        onSelect:选择下拉时触发,(type:Function),方法参数:当前选中的下拉的数据对象(type:Object),
        clearContent:清空下拉列表及文本框,调用方式,在外部调用autocomplete组件时,需要给组件指定ref属性(属性值随意设定,当前范例:exmple),然后通过在当前的组件通过this.$refs.exmple.clearContent();进行调用
    ]
    *@delay(type:Number,单位:毫秒):延时执行查询数据的时间,防止频繁调用查询接口
    *@optionHeight(type:Number):每一个下拉项的高度
    *@componentName(type:String):下拉项的模板组件,在外部需要定义为全局的组件
    *@verticalSpace(type:Number):文本输入框和下拉列表的垂直方向的间隔距离
    *@placeholder(type:String):输入框文本占位
    *@showLabel(type:Function):自定义选中下拉项后,展示到文本框文本格式,参数:arguments[0]:当前选中的下拉项对象,arguments[1]:当前选中的下拉项的索引,返回值:用户自定义的文本字符串 
    *@tools(type:Object):供外部配置的工具(可单独配置每个tool)
    {
        
        clear:(type:Bool):清空下拉列表和文本框
        showArrowIcon:(type:Bool):下拉列表的箭头图标(用来表示下拉的展开和折叠),默认值:false
        loading:(type:Bool)数据加载提示,默认值:false
    }
    *@size(type:String):输入框的尺寸 small(输入框高度为30px),middle(输入框高度为40px),large(输入框高度为50px)
    *@value(type:String):外部配置输入框展示的值(一般用于设置初始默认值)
    *@isAutoFill(type:Bool):选中下拉项后,选中项是否自动填充到输入框中
    */
    import clickoutside from '../../../../src/directives/clickoutside.js'
    import selectMixin from './selectMixin.js'
    import pointerMixin from './pointerMixin.js'
    import delayMixin from '../../../../src/mixins/delayMixin.js'
    import layerAdjustment from '../../../../src/mixins/layerAdjustment.js'
    export default{
        name:'v-autocomplete',
        mixins:[selectMixin,pointerMixin,delayMixin,layerAdjustment],
        directives: {
            'click-outside': clickoutside
        },
        methods:{
            clickOutside() {
                this.isShowDropList = false;
            }
        }
    }
</script>