<template>
  <div>
    <zPaging :fixed="false" :height="'210px'" :show-scrollbar="false">
      <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>
    </zPaging>
  </div>
</template>
<script setup>
import zPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import { ref, reactive, defineProps, defineEmits } 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 emit = defineEmits(['on-select'])
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%;
  padding: 5rpx 32rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

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

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