<template>
  <div class="mu-textarea">
    <div class="mu-textarea-content">
      <textarea :placeholder="defaultContent" v-model="content" :maxlength="maxNum" @input="checkContent"></textarea>
      <div class="num">{{curNum}}/{{maxNum}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'mu-textarea',
  props:{
    defaultContent:{
      type:String,
      default:"请您描述一下您遇到的问题吧"
    },
    maxNum:{
      type:Number,
      default:400
    }
  },
  data(){
    return {
      content :"",
      curNum : 0
    }
  },
  methods: {
    checkContent(){
      this.curNum = this.content.length;
      this.$emit('write-content',this.content);
    }
  }
}
</script>

<style lang="less">
.mu-textarea{
  .mu-textarea-content{
        font-size: 16px;
        overflow:hidden;
        background-color:#fff;
        padding-bottom:22px;
        position:relative;
        textarea{
          outline: none;
          resize:none;
          padding:12px 12px 8px 12px;
          width:100%;
          height:180px;
          color:#3a4247;
        }
        .num{
          position:absolute;
          color:#bfc4c7;
          font-size:12px;
          right:12px;
        }
      }
}
</style>
