<template lang="pug">
    DropDown.ocAutoComplete(ref="dropdown", :disabled="disabled")
        template(slot="dropHead")
            input.ocFormElement(
                class="oc-autocomplete",
                ref="ipt",
                :name="name",
                type="text",
                :maxLength="maxLength",
                :pattern="pattern",
                :required="required",
                :disabled="disabled",
                :value="currentValue",
                :placeholder="placeholder",
                @input="handleInput",
                @compositionstart="handleComposition($event)",
                @compositionend="handleComposition($event)",
                @blur="$emit('blur')",
                @focus="$emit('focus')",
                @keyup.enter="$emit('enter')",
                autocomplete="off",
                :style="iptStyle",
                @keydown.esc.stop.prevent="$refs.dropdown.hide()",
                @keyup.delete.stop.prevent="$refs.dropdown.show()",
                v-keynavigate:target="{ selectorFn: _ => this.$refs.dropdown.popperElm.querySelector(\'ul\'), scrollSelectorFn: _ => this.$refs.dropdown.popperElm }")

        div(slot="dropBody", v-show="filterItems")
            ul.ocAutoCompleteUl(ref="ul")
                template(v-for="(item, index) in filterItems")
                    li(@click="select($event)") {{item}}

</template>

<script>
    import formElement from './mixins/formElement'
    import DropDown from './dropdown'
    import keynavigate from './directives/key_navigate'

    export default {
        name: 'oc-autocomplete',
        mixins: [ formElement ],
        components: { DropDown },
        directives: { keynavigate },

        props: {
            items: null,
            maxItemLength: { type: Number, default: 8 },
            maxLength: { type: Number, default: 8 },
            pattern: { type: String, default: null },
            iptStyle: null,
        },

        computed: {
            filterItems() {
                if(!this.currentValue) {
                    return [];
                }
                
                let val = this.currentValue.toString().toLowerCase();
                return (this.items || []).filter(one => {
                    let item = (one || '').toLowerCase();
                    return item.indexOf(val) !== -1;
                }).slice(0, this.maxItemLength);
            }
        },

        watch: {
            //- items() {
            //-     if(this.items && this.items.indexOf(this.currentValue) === -1) {
            //-         this.currentValue = '';
            //-     }
            //- },
        },

        mounted() {
            //通过jquery或者oc.tools.form.fill设置值时使用
            this.$refs.ipt.onchange = e => {
                this.currentValue = e.target.value;
            }
        },

        methods: {
            select(e) {
                let li = e.currentTarget;
                let value = li.innerText;
                this.currentValue = value;
                this.$refs.ipt.focus();
                this.$nextTick(_ => {
                    this.$refs.dropdown.hide();
                })
            },

            inputTextChange(val) {
                this.currentValue = val;
            }
        }
    }
</script>

<style lang="stylus">
    select.ocFormElement
        display block
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        z-index -1
        opacity 0
        
    .ocAutoComplete
        display inline-block
        position relative
        &:focus
            outline none
        input 
            width 100%
    
    .ocAutoCompleteUl
        li
            min-width 130px
            white-space nowrap
            line-height 30px
            padding 0 25px 0 10px
            cursor pointer
            font-size 12px
            position relative
            font-weight 500
            &:hover
                background-color #f0f0f0
            &.hover, &.keynavigate-active  //将key-navigate变成directive后，改成keynavigate-active
                background-color #001689 
                color #fff
                    
</style>
            
