<script setup lang="ts">
const model = defineModel<string>()
const props = defineProps<{
  class: string
  defaultClass?: string
  disabled?: boolean
  width?: number
  widthUnit?: string
}>()

const InputComp = defineAsyncComponent(() => import('~/components/pub/ui/input/Input.vue'))
const activeState = ref(false)

let defaultClass = props.defaultClass ?? 'h-8 xl:h-9'
let widthStyle = '';
if(props.width) {
  widthStyle = `width: ${props.width}${props.widthUnit ?? 'px'};`
} else {
  widthStyle = `width: 100%;`
}

const recId = inject<Ref<number>>('rec_id')!
const recAction = inject<Ref<string>>('rec_action')!
const recItem = inject<Ref<any>>('rec_item')!

watch(activeState, () => {
  nextTick(() => {
    if (asyncInputRef.value && typeof asyncInputRef.value.focus === 'function') {
        asyncInputRef.value.focus()
      }
  })

    //   document.getElementById('editable-div')?.scrollIntoView({ behavior: 'smooth' })
    InputComp.value.focus()
    // console.log(inputComp.__defaults)
})
</script>

<template>
  <div
    v-if="!activeState || disabled" @click="() => activeState = true"
    :class="`${defaultClass}`"
    :style="widthStyle">
    {{ model }}
  </div>
  <InputComp v-else 
    v-model="model"
    :class="`${defaultClass}`"
    :style="widthStyle"
    @blur="() => activeState = false"
  />
  <!-- {{ inputComp.value }} -->
  <!-- <Input
    v-else v-model="model" @blur="() => activeState = false"
    :class="`${defaultClass}`"
    :style="widthStyle"
    autofocus
  /> -->
</template>
