<template>
  <div :style="boxWidth" :class="{'vt-search-box':keyFocus}">
    <q-input dense v-model="keyWord" outlined @change="valueChange" clearable @focus="focusHandler" @blur="blurHandler" @update:model-value="inputValue" :placeholder="ph"> </q-input>
  </div>
</template>

<script>
import { computed, ref, watch } from 'vue'

export default {
  props: {
    /**
     * @description 绑定值
     */
    modelValue: String,

    /**
     * @description 默认文本框宽度
     */
    width: Number,

    /**
     * @description 文本框内容
     */
    placeHolder: String,

    
  },
  setup(props, context) {
    const boxWidth = computed(() => {
      return { width: props.width ? props.width + 'px' : '75px' }
    })

    watch(
      () => props.modelValue,
      val => {
        keyWord.value=val
      },
      { deep: true }
    )


    const keyWord = ref(props.modelValue)

    const ph = ref(props.placeHolder)
    if (!ph.value) {
      ph.value = '搜索'
    }

    const keyFocus=ref(false)

    const valueChange = () => {
      context.emit('change', keyWord.value)
    }

    const inputValue = () => {
      context.emit('update:modelValue', keyWord.value)
    }

    const focusHandler=()=>{
        keyFocus.value=true
    }
    const blurHandler=()=>{
        keyFocus.value=false
        context.emit("blur",keyWord.value)
    }

    return { boxWidth, keyWord, valueChange, ph, inputValue,focusHandler,blurHandler,keyFocus }
  }
}
</script>

<style>
.vt-search-box{
    background: #FFF;
    border-radius: 4px;
    padding:5px;
    position: absolute;
    left:-5px;
    right:0;
    top:-5px;
    width:unset !important;
    z-index: 2;
}
</style>
