<template>
  <view class="comp_form_query_input">
    <input :value="Value" :placeholder="getPlaceholder()" @input="change" :type="controls[KEY].type"  :disabled="controls[KEY].disabled"/>
    <button class="icon" @click="clear"><iconfont class="iconfont" icon="close-circle-fill" v-if="showClearIcon"/></button>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onBeforeMount, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { translate } from '@/common/utils/language/index'

const props = <any>defineProps({
  KEY: { type: String, required: true, }, // 组件字段
  data: { type: String, default: '', }, // 组件数据 v-modal
  controls: { type: Object, default: () => {}, }, // 组件配置
})
const Value:any = computed({ //v-modal:data
  get: () => props.data[props.KEY],
  set: v => emit('update:data', v)
})
const emit = defineEmits(['update:data','change:data','focus','blur', 'clear'])


const showClearIcon = ref(false)

const change = (e:any) => {
  emit('change:data', e.detail.value)
  showClearIcon.value = Value.value ? true : false
}
const clear = () => {
  Value.value = ''
  emit('change:data', '')
  showClearIcon.value = false
}

const getPlaceholder = () => {
  let text:any = translate('please input')
  if(props.controls[props.KEY].placeholder){
    text = props.controls[props.KEY].placeholder
  }
  if(props.controls[props.KEY].disabled){
    text = ''
  }
  return text
}
onBeforeMount(async() => {
})
onMounted(()=>{
})
onUnmounted(() => {
})



</script>

<style lang="scss">
.comp_form_query_input{
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10rpx;
  padding: 10rpx 15rpx;
  position: relative;
  
  .icon{
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    outline: none;
    background: none;
    height: 32px;
    color: #666;
    z-index: 2;
    .iconfont{
      height: 32px;
      >view{
        height: 32px;
        line-height: 32px;
      }
    }
    &::after{
      border: none;
      outline: none;
      background: none;
    }
  }
}
</style>
