<template>

    <div class="results-wrap">
        <div class="results-input-wrap">
            <span class="input-arrow"
                  :class="{ 'opened': isOpen }"
                  @click="isOpen = !isOpen">
            </span>
            <input type="text" placeholder="МРФ" class="results-input"
                   @click="isOpen = !isOpen"
                   @input="onChange"
                   v-model="search"
                   @keyup.down="onArrowDown"
                   @keyup.up="onArrowUp"
                   @keyup.enter="onEnter"
                   :data-val="search"
                   :disabled="disabled"
            />
            <span class="disabled-line"></span>
        </div>
        <ul v-show="isOpen" class="results-list">
            <li class="loading" v-if="isLoading">
                Loading list...
            </li>
            <li v-else v-for="(result, i) in results" :key="i" @click="setResult(result)"
                class="item-result" :class="{ 'is-active': i === arrowCounter }">
                {{ result }}
            </li>
        </ul>
    </div>


</template>

<script>
    export default {
        name: 'autocomplete',
        props: {
            list: {
                required: true,
                default: []
            },
            disabled: {
                default: false,
            }
        },
        data() {
            console.log(this.list);
            return {
                isOpen: false,
                results: this.list,
                search: '',
                isLoading: false,
                arrowCounter: 0,
            };
        },
        methods: {
            onChange() {

                this.$emit('input', this.search);


                if (this.isAsync) {
                    this.isLoading = true;
                } else {

                    this.filterResults();
                    this.isOpen = true;
                }
            },
            filterResults() {

                this.results = this.list;
                this.results = this.results.filter((item) => {
                    return item.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
                    //toLowerCase к нижнему регистру
                    //indexOf() возвращает индекс первого вхождения указанного значения в строковый объект String
                });
            },
            setResult(result) {
                this.$emit('setItem', result);
                this.search = result;
                this.isOpen = false;
            },
            onArrowDown(evt) {
                console.log(this.results.length);
                console.log(this.arrowCounter);
                if (this.arrowCounter < this.results.length - 1) {
                    this.arrowCounter = this.arrowCounter + 1;
                }
            },
            onArrowUp() {
                if (this.arrowCounter > 0) {
                    this.arrowCounter = this.arrowCounter - 1;
                }
            },
            onEnter() {
                this.search = this.results[this.arrowCounter];
                this.isOpen = false;
                this.arrowCounter = -1;
            },
            handleClickOutside(evt) {
                if (!this.$el.contains(evt.target)) {
                    this.isOpen = false;
                    this.arrowCounter = -1;
                }
            }
        },
        watch: {
            items: function (val, oldValue) {
                // actually compare them
                if (val.length !== oldValue.length) {
                    this.list = val;
                    this.isLoading = false;
                }
            },
        },
        // created() {
        //     //ajax
        //     this.results = ['Сибирь', 'Урал', 'Дальний восток', 'Центр', 'Волга', 'Дальний юг', 'Дальний юг-pfgfl','Сибирь', 'Урал', 'Дальний восток', 'Центр', 'Волга', 'Дальний юг', 'Дальний юг-pfgfl'];
        //     this.list = ['Сибирь', 'Урал', 'Дальний восток', 'Центр', 'Волга', 'Дальний юг', 'Дальний юг-pfgfl','Сибирь', 'Урал', 'Дальний восток', 'Центр', 'Волга', 'Дальний юг', 'Дальний юг-pfgfl'];
        //
        // },
        mounted() {
            document.addEventListener('click', this.handleClickOutside)
        },
        destroyed() {
            document.removeEventListener('click', this.handleClickOutside)
        }
    };

</script>

<style scoped>
    input {
        border: none;
        outline: none;
        font-size: 16px;
        line-height: 19px;
        color: #101828;
        padding-bottom: 5px;
    }

    .results-wrap {
        position: relative;
        width: 230px;
    }

    .results-input-wrap {
        position: relative;
        width: 100%;
        display: block;
    }

    .results-input {
        border-bottom: 2px solid #CDCDCD;
        width: 100%;
    }

    input::-webkit-input-placeholder {
        font-size: 16px;
        line-height: 19px;
        color: #b7babf;
        transition: 0.3s;
    }

    input:focus::-webkit-input-placeholder {
        color: #585d69;
    }


    .input-arrow {
        position: absolute;
        right: 0;
        top: 6px;
        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAPBAMAAADjSHnWAAAAMFBMVEUAAAAQGCgQGCgQGCgQFSkQGCcQECAQFykQGCgQGCgQGCgQGSkQFycQGSkQFiYQGCh56ogeAAAAD3RSTlMAIN9/MM8Q75+/X++wcFAiKnElAAAAfElEQVQI103LywnCQBRG4SOGoLtBSAFWoB24DFiAW7O1iqQDm7AQS7AEa4gIPhbHxBnCnM3l8vETu5A1/96zb+cnI/WWkT5ILbTVbfrO9vsJT7qmTlge7QNF6wugGglW2sFs4zMQb8NSDxDxOgzeDfxxmFN3xKpxXpAqAz8iczPTR8TJTQAAAABJRU5ErkJggg==');
        background-size: 11px 5px;
        background-position: center;
        background-repeat: no-repeat;
        width: 11px;
        height: 11px;
        display: block;
        transform: rotate(180deg);
        opacity: 0.3;
        transition: 0.3s;
    }

    .input-arrow:hover {
        cursor: pointer;
    }

    .opened {
        opacity: 1;
        transform: rotate(0);
    }

    .disabled-line {
        position: absolute;
        bottom: 0;
        z-index: 4;
        display: block;
        width: 0;
        height: 2px;
        background: #7800FF;
        transition: 0.3s;
    }

    /*.active {*/
    /*    width: 100%;*/
    /*}*/

    .results-input:not([data-val='']) ~ .disabled-line,
    .results-input:focus ~ .disabled-line {
        width: 100%;
    }

    .results-list {
        padding: 0;
        margin: 0;
        max-height: 280px;
        overflow: auto;
        width: 100%;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        -webkit-overflow-scrolling: touch;
    }

    .results-list::-webkit-scrollbar {
        width: 4px;
        cursor: pointer;
        padding-right: 10px;

    }

    .results-list::-webkit-scrollbar-track {
        height: 90%;
        background: #E3E8EC;
        border-radius: 2px;
    }

    .results-list::-webkit-scrollbar-thumb {
        background: #7800FF;
        border-radius: 2px;
    }

    .item-result {
        results-style: none;
        text-align: left;
        padding: 10px 20px;
        cursor: pointer;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0.161px;
        color: rgba(16, 24, 40, 0.3);
        transition: 0.3s;
    }

    .item-result.is-active,
    .item-result:hover {
        background-color: #7800FF;
        color: white;
    }

</style>