<template>
  <el-input v-if="attrs.type == 'textarea'" :type="attrs.type" v-model="value" @input="onChange" :rows="attrs.rows" :show-word-limit="attrs.showWordLimit" :show-password="attrs.showPassword" :placeholder="placeholder"
  :maxlength="attrs.maxlength" :minlength="attrs.minlength" :clearable="attrs.clearable" :disabled="attrs.disabled" :prefix-icon="attrs.prefixIcon"
  :suffix-icon="attrs.suffixIcon" :readonly="attrs.readonly" :autosize="attrs.autosize"></el-input>
  <vxe-input 
    v-else
    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";
  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 ''
    }
  })
  // watch(props.propValue, (value) => {
  //   setValue(value);
  // })

  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);
  }
  //设置配置
  const setConfig = c => {
    if(c){
      config.value = c;
    }
  }

  //获取配置
  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 lang="scss" scoped>

</style>