<script setup lang="ts">
const emit = defineEmits(['hideMentionModal', 'insertMention'])

const inputRef = ref()
const top = ref('')
const left = ref('')
const searchVal = ref('')
const list = ref([
  { id: 'startUser', name: '发起人' },
  { id: 'startUserDept', name: '发起人部门' },
  { id: 'processName', name: '流程名称' },
  { id: 'processNum', name: '流程编号' },
  { id: 'startTime', name: '发起时间' },
  { id: 'endTime', name: '结束时间' },
  { id: 'processStatus', name: '流程状态' },
  { id: 'printUser', name: '打印人' },
  { id: 'printTime', name: '打印时间' }
])
const searchedList = computed(() => {
  const searchValStr = searchVal.value.trim().toLowerCase()
  return list.value.filter((item) => {
    const name = item.name.toLowerCase()
    return name.indexOf(searchValStr) >= 0
  })
})
const inputKeyupHandler = (event: any) => {
  if (event.key === 'Escape') {
    emit('hideMentionModal')
  }
  if (event.key === 'Enter') {
    const firstOne = searchedList.value[0]
    if (firstOne) {
      const { id, name } = firstOne
      insertMentionHandler(id, name)
    }
  }
}
const insertMentionHandler = (id: any, name: any) => {
  emit('insertMention', id, name)
  emit('hideMentionModal')
}

const formFields = inject<any>('formFieldsObj')
onMounted(() => {
  if (formFields.value && formFields.value.length > 0) {
    const cloneFormField = formFields.value.map((item) => {
      return {
        name: '[表单]' + item.title,
        id: item.field
      }
    })
    list.value.push(...cloneFormField)
  }
  const domSelection = document.getSelection()
  const domRange = domSelection?.getRangeAt(0)
  if (domRange == null) return
  const rect = domRange.getBoundingClientRect()

  top.value = `${rect.top + 20}px`
  left.value = `${rect.left + 5}px`

  inputRef.value.focus()
})
</script>

<template>
  <div id="mention-modal" :style="{ top: top, left: left }">
    <!-- TODO @lesan：css 可以用 unocss 哇？ -->
    <input id="mention-input" v-model="searchVal" ref="inputRef" @keyup="inputKeyupHandler" />
    <ul id="mention-list">
      <li
        v-for="item in searchedList"
        :key="item.id"
        @click="insertMentionHandler(item.id, item.name)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<style>
#mention-modal {
  position: absolute;
  border: 1px solid #ccc;
  background-color: #fff;
  padding: 5px;
}

#mention-modal input {
  width: 100px;
  outline: none;
}

#mention-modal ul {
  padding: 0;
  margin: 0;
}

#mention-modal ul li {
  list-style: none;
  cursor: pointer;
  padding: 3px 0;
  text-align: left;
}

#mention-modal ul li:hover {
  text-decoration: underline;
}
</style>