<template>
  <el-input :id="id" ref="form-item" v-model="model" type="textarea" v-bind="$attrs" v-on="$listeners" v-bind:disabled="isDisable" :rows="maxRows" resize="none" />
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ""
    },
    maxRows: {
      type: Number,
      default: 3
    },
    maxCols: {
      type: Number,
      default: 4
    },
    disabled: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: undefined
    }
  },
  computed: {
    model: {
      get () {
        let value = this.format(this.value)
        return value
      },
      set (newVal) {
        this.$emit('input', newVal)
      }
    },
    mode () {
      return this.$store.state.Status.mode
    },
    isDisable: {
      get () {
        return this.mode === 'display' || this.disabled
      }
    },
    highlight () {
      return this.$store.state.Status.highlights.indexOf(this.id) !== -1
    }
  },
  methods: {
    format: function (value) {
      let maxRows = this.maxRows
      let maxCols = this.maxCols
      var length = 0
      var strs = new Array()
      strs = value.split('\n')
      for (var i = 0; i < strs.length && i < maxRows; i++) {
        if (strs[i].length === 0 && i !== strs.length - 1) {
          strs.splice(i, 1)
          i--
        } else if (strs[i].length > maxCols) {
          strs.splice(i + 1, 0, strs[i].substring(maxCols))
          strs[i] = strs[i].substring(0, maxCols)
        }
      }
      value = ''
      for (var i = 0; i < strs.length && i < maxRows; i++) {
        if (i === strs.length - 1 || i === maxRows - 1) {
          value += strs[i]
        } else {
          value += strs[i] + '\n'
        }
      }
      return value
    }
  }
}
</script>

<style>
/* .el-input.highlight .el-input__inner{
  border-color: red;
} */
</style>