<template>
  <view
    class="emotion-box"
    :style="{
      display: 'flex',
      flexDirection: 'row',
      flexWrap: 'wrap',
      height: props.height + 'px',
      overflowY: 'scroll',
    }"
  >
    <block v-for="(list, index) in emojilist" :key="index">
      <view style="width: 10%; margin: 10px 3.3%;">
        <image
          @click="clickEmoji(list)"
          :src="`/static/emojis/qq/${list.url}`"
          style="width: 35px; height: 35px;"
        />
      </view>
    </block>
  </view>
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits } from 'vue'
import emojiList1 from './emoji/biaoqing.js'

const props = defineProps({
  windowWidth: {
    type: Number,
    default: 320,
  },
  height: {
    type: Number,
    default: 275,
  }
})

const emit = defineEmits(['emotion'])

const emojilist = ref(emojiList1)
const img_width = ref(0)

onMounted(() => {
  const query = uni.createSelectorQuery().in(this)
  query
    .select('.emotion-box')
    .boundingClientRect((data) => {
      img_width.value = props.windowWidth / 10
    })
    .exec()
})

/**
 * 点击表情事件
 */
function clickEmoji(val) {
  const emotioni = val.alt
  const emotion = getEmotion(val.url)
	console.log(emotion)
  emit('emotion', { emotion, emotioni })
}

/**
 * 根据表情 url 生成完整图片路径
 */
function getEmotion(res) {
  return `https://www.amazinglimited.com/emoji/qq/${res}`
}
</script>

<style scoped>
.emotion-box {
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding-top: 8upx;
  overflow: hidden;
  background: white;
}

.emotion-box-line {
  display: flex;
}

.emotion-item {
  flex: 1;
  text-align: center;
  cursor: pointer;
  padding: 10upx;
}
</style>
