<script setup lang="ts">
import emojis from '@/utils/emoji/face.json'
import type { IEmoji } from '@/utils/emoji/type'

const emit = defineEmits<{
  selectEmoji: [emoji: IEmoji]
}>()
</script>

<template>
  <div
    class="w-8 h-8 text-gray-500 hover:bg-gray-100 hover:text-gray-700 rounded-lg flex items-center justify-center"
  >
    <el-popover placement="bottom" trigger="click" width="384">
      <template #reference>
        <el-icon size="20" @mousedown.prevent>
          <svg-icon name="icon_face" class="cursor-pointer"
        /></el-icon>
      </template>
      <!-- 表情面板 -->
      <el-scrollbar class="h-50">
        <div class="flex flex-wrap">
          <span
            v-for="item in emojis"
            :key="item.name"
            class="cursor-pointer hover:bg-gray-100 rounded p-1 flex items-center justify-center"
            @click="emit('selectEmoji', item)"
          >
            <img :src="item.url" alt="" class="w-6 h-6" />
          </span>
        </div>
      </el-scrollbar>
    </el-popover>
  </div>
</template>

<style scoped></style>
