<template>
  <div class="kole-autocomplete" ref="root">
    <input
      class="kole-autocomplete-input"
      :value="modelValue"
      :placeholder="placeholder"
      @input="onInput"
      @keydown.down.prevent="move(1)"
      @keydown.up.prevent="move(-1)"
      @keydown.enter="enter"
      @keydown.esc="close"
    />
    <div v-show="open && list.length" class="kole-autocomplete-pop">
      <div
        v-for="(it, i) in list"
        :key="i"
        class="kole-autocomplete-item"
        :class="{ 'is-active': i === active }"
        @click="choose(i)"
        v-html="highlight(it)"
      ></div>
    </div>
    <div v-show="open && modelValue && !list.length" class="kole-autocomplete-pop"><div class="kole-autocomplete-empty">无匹配结果</div></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const props = defineProps({
  modelValue: { type: String, default: '' },
  options: { type: Array, default: () => ['北京', '上海', '广州', '深圳', '杭州', '成都', '重庆', '武汉', '西安', '南京', '苏州', '天津'] },
  placeholder: { type: String, default: '输入关键字…' }
});
const emit = defineEmits(['update:modelValue', 'select']);
const root = ref(null);
const open = ref(false);
const active = ref(-1);
const list = ref([]);

function onInput(e) {
  const q = e.target.value;
  emit('update:modelValue', q);
  active.value = -1;
  list.value = q ? props.options.filter((d) => d.indexOf(q) >= 0) : [];
  open.value = true;
}
function highlight(it) {
  const q = props.modelValue.trim();
  if (!q) return it;
  return it.replace(new RegExp('(' + q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'g'), '<mark>$1</mark>');
}
function move(d) { open.value = true; active.value = Math.max(-1, Math.min(list.value.length - 1, active.value + d)); }
function enter() { if (active.value >= 0) choose(active.value); }
function choose(i) { emit('update:modelValue', list.value[i]); emit('select', list.value[i]); open.value = false; }
function close() { open.value = false; }
function onDoc(e) { if (root.value && !root.value.contains(e.target)) close(); }
onMounted(() => document.addEventListener('click', onDoc));
onBeforeUnmount(() => document.removeEventListener('click', onDoc));
</script>

<style src="./AutoComplete.css"></style>
