<template>
  <div class="emojiRoot">
    <div v-for="(img, key) in emojis" v-html="img" :key="key" @click="onSendEmoticon(1, key, img)"
      class="option pointer flex-center" />
  </div>
</template>
<script setup>
import { ref, reactive, defineProps } from "vue"
import dayjs from "dayjs";
import { beautifyTime } from '@/utils/datetime'
import { useTalkStore } from '@/store'
import { useSessionMenu } from '@/hooks'
import { emojis } from '@/utils/emojis'


const props = defineProps({
  data: {
    type: Object,
    default: {},
    required: false,
  },
});

const onSendEmoticon = (type, value, img = '') => {
  if (img) {
    const imgSrcReg = /<img.*?src='(.*?)'/g
    let match = imgSrcReg.exec(img)
    if (match) {
      emit('on-select', { type, value, img: match[1] })
    }
  } else {
    emit('on-select', { type, value, img })
  }
}




</script>
<style lang="scss" scoped>
.emojiRoot {
  width: 100%;
  height: 420rpx;
  padding: 5rpx 32rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  overflow: auto;
}

.option {
  width: 14.28%;
  height: 42rpx;
  margin: 20rpx 0;
}

:deep(.emoji) {
  vertical-align: text-bottom;
  margin: 0 10rpx;
  width: 52rpx;
  height: 52rpx;
}
</style>
