<template>
  <el-dialog draggable append-to-body title="选择图标" v-model="visible" width="500px">
    <div class="h-200px flex flex-wrap items-center gap-4px">
      <i
        class="text-20px lvgl-icon w-30px h-30px cursor-pointer hover:bg-bg-tertiary not-italic grid place-items-center rounded-4px"
        v-for="item in symbols"
        :key="item.value"
        :title="item.label"
        v-html="item.value"
        @click="handleClick(item.label)"
      ></i>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { symbols } from '@/constants'

const visible = ref(false)

defineExpose({
  open() {
    visible.value = true
  }
})

const emit = defineEmits(['select'])

const handleClick = (label: string) => {
  emit('select', label)
  visible.value = false
}
</script>
