<template>
  <el-input ref="myAutoInput" class="myAutoInput" type="textarea" :autosize="size" resize="none" @focus="focus" @blur="blur" v-bind="$attrs" v-on='$listeners'></el-input>
</template>

<script>
export default {
  components: {},
  props: {
    autosize:{
        
    }
  },
  data() {
    return {
        textareaDom:null,
        size:false,
        height:'30px'
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.init()
  },
  methods: {
    init(){
        let dom = this.$refs.myAutoInput.$el
        let childNodes = dom.children
        let textarea = ''
        for(let i = 0;i<childNodes.length;i++){
            let child = childNodes[i]
            if(child.tagName == 'TEXTAREA'){
                textarea = child
            }
        }
        this.textareaDom = textarea
        let height = this.textareaDom.scrollHeight
        if(height<114){
            this.height = height + 'px'
        }
    },
    focus(){
        if(!this.textareaDom){
            return
        }
        
        this.textareaDom.style.height = this.height
        this.size = true
    },
    blur(){
        if(!this.textareaDom){
            return
        }
        this.textareaDom.scrollTop = 0
        this.size = false
        this.height = this.textareaDom.style.height
        this.textareaDom.style.height = 'inherit'
        
    },
  },
};
</script>
<style lang="scss">
    .myAutoInput{
        width: 100%;
        height:32px;
        position: relative;
        textarea{
            height: inherit;
            overflow: hidden;
            padding: 6px 15px;
            min-height: 32px !important;
        }
        textarea::placeholder{
            overflow: hidden;
            white-space: nowrap;
            text-overflow:ellipsis;
        }
        textarea:focus{
            overflow-y: auto;
            max-height: 114px;
            position: relative;
            z-index: 999;
        }
    }
</style>
<style lang="scss" scoped>
</style>