<template>
  <el-input  v-get-height type="textarea" :autosize="{minRows:2,maxRows:400}" v-model="mV" :readonly="myReportStatus!=='5'?false:'readonly'"
             :style="{'--inputColor':myColor,
              '--inputFontWeight':myFontWeight,
              '--inputFontSize':mySize,
              '--inputTextAlign':myTextAlign,
              '--inputBorder':InputBorder
              }"></el-input>
</template>

<script>
import {ref, watch} from "vue";

export default {
  name: "MyInput",
  props:{
    id:{

    },
    myReportStatus:{

    },
    myColor:{
      type:String,
      default:'black'
    },
    mySize:{
      type:String,
      default:'14px'
    },
    myFont:{
      type:String,
      default:'0'
    },
    myValue:{
      type:String,
      default:''
    },
    myAlignment:{
      type:String,
      default:'0'
    },
    minRow:{
      type:Number,
      default:1
    }
  },
  directives:{
    getHeight(el,ele){
      console.log(el.scrollHeight,ele,'sasa')
    }
  },
  setup(props,{emit}){
    let mV = ref(props.myValue);
    watch(mV,()=>{
      emit('getInputContent',{UUID:props.id,CONTENT_TEXT:mV.value})
    })
    let myFontWeight = ref(props.myFont);
    myFontWeight.value = setBold(myFontWeight.value);
    let myTextAlign = ref(props.myAlignment);
    myTextAlign.value = setAlignment(myTextAlign.value);
    let InputBorder = ref(props.myReportStatus);
    InputBorder.value= setInputBorer(InputBorder.value);
    function setInputBorer(value){
      if(value =='5'){
        return '0 0 0 0px';
      }else if(value =='1'){
        return 'none';
      }
    }
    function setInputValue(val){
      mV.value = val.CONTENT_TEXT;
      myFontWeight.value = setBold(val.FONT_STYLE);
      myTextAlign.value = setAlignment(val.ALIGNMENT);
    }
    function setBold(value){
      if(value =='0'){
        return 'normal';
      }else if(value =='1'){
        return 'bold';
      }
    };
    function setAlignment(value){
      if(value =='0'){
        return 'left';
      }else if(value =='1'){
        return 'center';
      }else if(value =='2'){
        return 'right';
      }
    };
    return {
      mV,myFontWeight,myTextAlign,setInputValue,InputBorder
    }
  }
}
</script>

<style scoped lang="scss">
:deep(.el-textarea__inner){
  overflow: auto;
  display: inline-table !important;
  color:var(--inputColor);
  font-weight: var(--inputFontWeight);
  font-size: var(--inputFontSize);
  text-align: var(--inputTextAlign);
  box-shadow: 0 0 0 0px;

}

</style>
