<template>
  <div>
    <div class="emotion-box" :style="{ height: height + 'px' }">
      <div
        v-for="(line, i) in list"
        :key="i"
        class="emotion-box-line"
        @click.enter="clickHandler(line.char)"
      >
        {{ line.char }}
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch, defineEmits, defineExpose, defineProps } from 'vue'
const list = ref([])
import * as emoji from 'emoji.json'
console.log(emoji,'emoji')
const getList = () => {
  let info = emoji.default
  list.value = info.slice(0, 50)
  list.value.push(info[55])
  list.value.push(info[56])
  list.value.push(info[57])
  list.value.push(info[60])
}
const emits = defineEmits(['emotion'])
const clickHandler = (i: number | string) => {
  emits('emotion', i)
}
getList()
defineProps({
  height: {
    type: Number,
    default: 200,
  },
})
</script>
<style scoped>
.emotion-box {
  margin: 0 auto;
  width: 250px;
  box-sizing: border-box;
  padding: 5px;
  border: 1px solid #b4b4b4;
  overflow: hidden;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
}
.emotion-box-line {
  display: flex;
  font-size: 21px;
}
.emotion-item {
  flex: 1;
  text-align: center;
  cursor: pointer;
}
</style>
