<template>
  <setting-item-box :name="t('common.nameText')" :alone="true">
    <n-input
      type="text"
      maxlength="12"
      minlength="1"
      :placeholder="t('external.customized.placeChart')"
      size="small"
      clearable
      show-count
      v-model:value="i18nChartConfigTitle"
      @focus="handleFocus"
      @blur="handleBlur"
    ></n-input>
  </setting-item-box>
</template>

<script setup lang="ts">
import { PropType, ref, onMounted } from 'vue'
import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
import { ConfigType } from '@/packages/index.d'

const props = defineProps({
  chartConfig: {
    type: Object as PropType<ConfigType>,
    required: true
  },
})
const t = window['$t']

const i18nChartConfigTitle = ref('')

onMounted(()=>{
  i18nChartConfigTitle.value = t(props.chartConfig.title)
})

let valueCatch = ''

const handleFocus = () => {
  valueCatch = props.chartConfig.title
}

const handleBlur = () => {
  if(!props.chartConfig.title.length) {
    window['$message'].warning(t('external.customized.textRule1'))
    props.chartConfig.title = valueCatch 
  }
}
</script>