<!-- emoji 表情选择组件 -->
<template>
  <el-popover :width="500" placement="top" trigger="click">
    <template #reference>
      <Icon :size="30" class="ml-10px cursor-pointer" icon="twemoji:grinning-face" />
    </template>
    <ElScrollbar height="300px">
      <ul class="ml-2 flex flex-wrap px-2">
        <li
          v-for="(item, index) in emojiList"
          :key="index"
          :style="{
            borderColor: 'var(--el-color-primary)',
            color: 'var(--el-color-primary)'
          }"
          :title="item.name"
          class="icon-item mr-2 mt-1 w-1/10 flex cursor-pointer items-center justify-center border border-solid p-2"
          @click="handleSelect(item)"
        >
          <img :src="item.url" class="w-24px h-24px" />
        </li>
      </ul>
    </ElScrollbar>
  </el-popover>
</template>

<script lang="ts" setup>
defineOptions({ name: 'EmojiSelectPopover' })
import { Emoji, useEmoji } from './emoji'

const { getEmojiList } = useEmoji()
const emojiList = computed(() => getEmojiList())

/** 选择 emoji 表情 */
const emits = defineEmits<{
  (e: 'select-emoji', v: Emoji)
}>()
const handleSelect = (item: Emoji) => {
  // 整个 emoji 数据传递出去，方便以后输入框直接显示表情
  emits('select-emoji', item)
}
</script>