<template>
  <el-popover
    :placement="placement"
    :width="width"
    trigger="click"
    popper-class="emoji-popover"
    ref="emojiPopoverRef"
  >
    <template #reference>
      <slot>
        <el-button link title="emoji" class="default-emoji-trigger">😊</el-button>
      </slot>
    </template>
    <el-scrollbar height="240px">
      <div class="emoji-container">
        <span
          v-for="emoji in emotionList"
          :key="emoji"
          class="emoji-item"
          @click="selectEmoji(emoji)"
        >
          {{ emoji }}
        </span>
      </div>
    </el-scrollbar>
  </el-popover>
</template>

<script setup lang="ts">
import { useEmoji } from "./useEmoji";
const { emotionList } = useEmoji();
const props = defineProps({
  placement: { type: String, default: "bottom-start" },
  width: { type: [Number, String], default: "auto" },
});

defineOptions({ name: "EmojiPicker" });

const emojiPopoverRef = ref(null);
const emit = defineEmits(["select"]);

// 筛选表情后的事件
const selectEmoji = (emoji) => {
  emit("select", emoji);
  nextTick(() => {
    if (emojiPopoverRef.value) {
      emojiPopoverRef.value.hide();
    }
  });
};
</script>

<style scoped lang="scss">
.emoji-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 5px;

  .emoji-item {
    cursor: pointer;
    font-size: 20px;
    padding: 6px;
    border-radius: 4px;
    text-align: center;
    transition: background-color 0.2s ease;
    user-select: none;

    &:hover {
      background-color: #f0f2f5;
      transform: scale(1.1);
    }
  }

  :deep(.el-scrollbar__bar.is-horizontal) {
    display: none;
  }
}

.default-emoji-trigger {
  font-size: 20px;
  padding: 4px;
}
</style>
