<template>
  <el-popover :popper-style="{ width: 'auto', height: 'auto' }" placement="top" trigger="click">
    <template #reference>
      <el-input
        v-model="model"
        clearable
        :size="props.size || 'default'"
        placeholder="国际化配置"
        @click="setCurrI18n"
      />
    </template>
    <div>
      <div class="text-16px"> 国际化配置</div>
      <div class="w-600px h-200px">
        <MonacoEditor
          v-model="model"
          language="javascript"
          :editorOption="{ minimap: false }"
        ></MonacoEditor>
      </div>
    </div>
  </el-popover>
</template>

<script setup lang="ts">
import { formattingLengStr } from '@/utils/lowDesign'

defineOptions({ name: 'I18nInput' })

interface Props {
  defName?: string
  size?: '' | 'default' | 'small' | 'large'
}

const props = defineProps<Props>()
const model = defineModel<string>()

const setCurrI18n = () => {
  model.value = formattingLengStr(model.value, props.defName || '')
}
</script>

<style lang="scss" scoped></style>
