<template>
  <el-input spellcheck="false" readonly>
    <template #prefix>
      <i class="lvgl-icon not-italic" v-html="modelValue ? getSymbol(modelValue) : ''"></i>
    </template>
    <template #append>
      <LuSmilePlus size="12px" class="cursor-pointer" @click="handleOpenSymbolModal" />
    </template>
  </el-input>
  <SymbolSelectModal ref="symbolModalRef" @select="handleSelectSymbol" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { LuSmilePlus } from 'vue-icons-plus/lu'
import SymbolSelectModal from './SymbolSelectModal.vue'
import { getSymbol } from '@/utils'

defineProps<{}>()
const modelValue = defineModel<string>('modelValue')
const symbolModalRef = ref<InstanceType<typeof SymbolSelectModal>>()

const handleOpenSymbolModal = () => {
  symbolModalRef.value?.open()
}

const handleSelectSymbol = (val: string) => {
  if (val) {
    modelValue.value = val
  }
}
</script>
