<template>

<label class="form_elemen">
    <slot></slot>
    <input multiline   :id="id" :value="modelValue" @input="updateInput" class="input" :placeholder="placeholder" :type="type_input"  @keyup="replaceNumber"  :disabled="disableInput">
</label>

</template>

<script>
import {mapState} from 'vuex';
export default {
name: 'my-input',
  props:{
      id:String,
      modelValue:[String,Number],
      placeholder:String,
      type_input:{type:String,default:'text'},
      valueNumber:{type: Boolean,default:false},
      exception:{
          type:Boolean,
          default:false
      },
  },
    computed: {
        ...mapState({
            state_disableInput: state=>state.disableInput,
        }),
        disableInput(){
            if(this.state_disableInput && !this.exception){
                return true;
            }
            return false;
        },

    },


methods:{
    replaceNumber(event) {
        let element=event.target;
        if(!this.valueNumber){
            //console.log(element.getAttribute('type'));
            return false;
        }

        // set temp value
        let tmp = element.value;
        // replace everything that's not a number or comma or decimal
        tmp = tmp.replace(/[^0-9,.]/g, "");
        // replace commas with decimal
        tmp = tmp.replace(/,/, ".");
        // set element value to new value
        element.value = tmp;
        return true;
    },



  updateInput(event){
  this.$emit('update:modelValue',event.target.value)

  }


}

}
</script>

<style scoped>


.form_elemen{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    white-space:nowrap;
    gap:5px;
    width: 100%;
}






.input {
    min-height: 33px;
    width: 100%;
    font-size: 14px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    /*padding: 3px 15px;*/
    box-sizing: border-box;
    color: var(--color-text-input);
    /*line-height: 15px;*/
    padding: .5em .3em .4em .3em;
    margin: 0;

    box-shadow: 0 1px 0 1px rgba(196, 190, 190, 0.04);
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--white);


}
.input:focus{
  box-shadow: 0 0 1px 2px rgba(59, 153, 252, .7);
  /*box-shadow: 0 0 0 3px -moz-mac-focusring;*/
  color: #222;
  outline: none;
}
.input:hover{
    border-color: #888;
}


</style>