<template>
  <vxe-input 
    ref="input"
    v-model="value"
    :placeholder="placeholder"
    :maxlength="attrs.maxlength"
    :minlength="attrs.minlength"
    :clearable="attrs.clearable"
    :disabled="attrs.disabled"
    :size="attrs.size?attrs.size:'medium'"
    :type="attrs.type"
    :min="attrs.min"
    :max="attrs.max"
    :step="attrs.step"
    :align="attrs.align"
    :prefix-icon="attrs.prefixIcon"
    :suffix-icon="attrs.suffixIcon"
    :readonly="attrs.readonly"
    @input="onChange"
    @clear="onChange"
    ></vxe-input>
</template>

<script setup>
  import { computed,getCurrentInstance,nextTick  } from "vue";
  import $bus from '@/benyun/utils/bus.js'
  const { proxy } = getCurrentInstance();
  const value = ref('')
  const config = ref({})
  const emit = defineEmits();
  const props = defineProps({
    propConfig:{},
    propValue:{},
    parentValue:{}
  })
  const attrs = computed({
    get() {
      return config.value.attr ? config.value.attr : {};
    }
  })
  const placeholder = computed({
    get() {
      if(attrs.value.disabled){
        return ''
      }
      if(attrs.value.placeholder){
        return attrs.value.placeholder
      }
      return ''
    }
  })

  const setValue = data => {
    if(data || data === 0){
      value.value = proxy.lodash.cloneDeep(data);
      if(attrs.value.type == 'number'){
        value.value = Number(data);
      }
    }else{
      value.value = null;
    }
  }

  const getValue = () => {
    return proxy.lodash.cloneDeep(value.value);
  }
  const clearValue = () => {
    value.value = ''
  }
  const onChange = () => {
    emit('onChange',value.value);
    $bus.emit('addressEvent',value.value);// 提供数据
  }
  //设置配置
  const setConfig = c => {
    if(c){
      config.value = c;
    }
  }
  onUnmounted(() => {
    $bus.off('areaEvent');
  });

  //获取配置
  const getConfig = () => {
    return lodash.cloneDeep(config.value)
  }

  if(props.propConfig){
    setConfig(props.propConfig)
  }
  if(props.propValue){
    setValue(props.propValue)
  }

  defineExpose({
    getValue,setValue,getConfig,setConfig,clearValue
  })  
</script>

<style scoped>

</style>