<template>
  <div v-if="label" class="wt flex flex_ac rows">
    <label class="label" :style="'letter-spacing:'+space">{{label?label:""}}</label>
    <div class="label-value flex flex_ac">
      <input class="form-control-full in" v-model="thisVal" :style="style" :disabled="disabled" @input='bindinput' @blur='bindblur' @focus='bindfocus' @change="bindchange" :placeholder='placeholder'/>
      <slot></slot>
    </div>
  </div>
</template>
<script>
    import justify from '../../lib/justify'
    export default {
        name: "rows",
        props:['label','direction','indent','disabled','value','placeholder'],
        data(){
            return{
              thisVal:this.value,
              space:0,
              style:{
                'text-indent': this.indent?this.indent:"0",
                'text-align': this.direction
              }
            }
        },
        created(){
          justify.deal(this.label,this)
        },
        watch:{
          value:function () {
            console.log(this.value)
            this.thisVal = this.value
          },
        },
        methods:{
          bindinput(){
            this.$emit('input',{
              value:this.thisVal
            })
          },
          bindblur(){
            this.$emit('blur',{
              value:this.thisVal
            })
          },
          bindfocus(){
            this.$emit('focus',{
              value:this.thisVal
            })
          },
          bindchange(){
            this.$emit('change',{
              value:this.thisVal
            })
          },
        }
    }
</script>
<style scoped>
  @import "../../css/style.css";
  input[disabled]{
    color: #666 !important;
    opacity: 1;
  }
</style>
