<template>
  <el-form-item :label="label" :prop="prop" :rules="rules" :class="[{ 'column': column }]" :required="required">
    <p v-if="desc" class="desc_right">{{ desc }}</p>
    <el-input
      type="textarea"
      v-bind="$attrs"
      v-model="innerValue"
      :style="{ width: width, height: height }"
      :rows="rows"
      @input="handleInput"
      @change="handleChange"
    ></el-input>
  </el-form-item>
</template>

<script>
export default {
  name: 'GuipTextarea',
  inheritAttrs: false,
  props: {
    // v-model 绑定的值
    value: {
      type: [String, Number],
      default: ''
    },
    // 宽度，可以是 '100px' 或 '100%' 等形式
    width: {
      type: String,
      default: '100%'
    },
    desc: {
      type: String,
      default: ''
    },
    // 高度，可以是 '100px' 或 '100%' 等形式
    height: {
      type: String,
      default: 'auto'
    },
    // 默认行数
    rows: {
      type: Number,
      default: 4
    },
    // 表单标签
    label: {
      type: String,
      default: ''
    },
    column: {
      type: String,
      default: ''
    },
    // 表单校验的 prop
    prop: {
      type: String,
      default: ''
    },
    // 表单校验规则
    rules: {
      type: [Object, Array],
      default: () => []
    },
    required:{
       type: Boolean,
      default: false
    }
  },
  data() {
    return {
      innerValue: this.value
    }
  },
  watch: {
    value(newVal) {
      if (newVal !== this.innerValue) {
        this.innerValue = newVal
      }
    }
  },
  methods: {
    handleInput(value) {
      this.$emit('input', value)
    },
    handleChange(value) {
      this.$emit('change', value)
    }
  }
}
</script>