<template>
  <div>
    <div class="input-select-value" @click="toggleShowList()">
      <div class="row">
        <div class="col">{{ value }}</div>
        <div class="col-auto input-select-down-array">⌄</div>
      </div>
    </div>
    <div v-if="showlist" class="input-select-dropdown-div">
      <input v-model="inputText" class="input-select-input" type="text" @change="change()" @keyup.enter="onEnter()">
      <div class="input-select-results">
        <ul>
            <li v-for="row in datalist" @click="choose(row)">{{row}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        props: {
          datalist: Object,
          value: String,
        },
        data: function () {
            return {
              inputText: this.inputText,
                showlist: this.showlist
            }
        },
        mounted() {
            window.addEventListener('keydown', this.onkey)
            window.addEventListener('mousedown', this.onmousedown)
        },
        destroyed() {
            window.removeEventListener('keydown', this.onkey)
            window.removeEventListener('mousedown', this.onmousedown)
        },
        methods: {
            toggleShowList() {
                this.showlist=!this.showlist
            },
            choose(row) {
                this.$emit('changeValue', row)
                this.inputText = ''
                this.showlist = false
            },
            change() {
                this.$emit('changeValue', this.inputText)
            },
            onEnter() {
                this.$emit('changeValue', this.inputText)
                this.showlist = false
            },
            onkey(event) {
                if (event.keyCode == 27) {
                this.showlist = false
                }
            },
            onmousedown(e) {
                if (e.target.closest(".input-select-input")) return
                if (e.target.closest(".input-select-results")) return
                if (e.target.closest(".input-select-value")) return
                this.showlist = false
            }
        }
    }
</script>

<style>

.input-select-value {
  border: 1px solid #ced4da;
  border-radius: 3px;
  background-color: #fff;
  color: #212529;
  line-height: 20px;
  padding: 0.5em 1em 0.5em 1em;
}

.input-select-dropdown-div {
  background-color: #fff;
  border: 1px solid #aaa;
  border-top-color: rgb(170, 170, 170);
  border-top-style: solid;
  border-top-width: 1px;
  border-radius: 4px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  box-sizing: border-box;
  display: block;
  position: absolute;
  /*position: relative;*/
  /*left: -100000px;*/
  width: 100%;
  z-index: 1051;
}

.input-select-results {
  max-height: 200px;
  overflow-y: auto;
}

.input-select-input {
  border: 1px solid #aaa;
  padding: 4px;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
}

.input-select-results ul {
  margin:0;
  padding:0;
}

.input-select-results ul li {
  list-style: none;
  box-sizing: border-box;
  padding: 0.5em;
  cursor: pointer;
}

.input-select-results ul li:hover {
  background-color: rgba(0, 0, 0, 0.03);
  color: #212529;
}

.input-select-results label {
  margin: 0em;
  margin-left: 0.2em;
  font-weight: bolder;
}

.input-select-down-array {
  font-size:2em;
  margin-top:-0.2em;
  padding: 0;
}

</style>