<template>
<el-form-item :prop="prop" :label="label" :label-width="options.labelWidth" :rules="rules">
<el-input type="textarea" v-model="value" v-bind="props" style="width: 100%;" class="glp-form-render-textarea"></el-input>
<div class="glp-form-render-textarea__tip" v-if="tip">{{tip}}</div>
</el-form-item>
</template>

<script lang="ts">

import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import { FormDef, FormOptions, TextareaDef, TextareaOptions } from '../../type'
import FieldMixins from './FieldMixins'

@Component
export default class TextareaControl extends mixins(FieldMixins) {
  get options () {
    return Object.assign(new TextareaOptions(), this.def?.options)
  }

  get props () {
    return {
      disabled: this.disabled,
      rows: this.options.rows,
      autosize: this.options.autosize,
      placeholder: this.options?.placeholder || `请输入${this.def?.label}`,
      maxlength: this.options?.maxlength
    }
  }

  get tip () {
    const max = this.options?.maxlength
    if (!max) return ''
    const len = (this.value || '').length
    return `${len}/${max}`
  }
}
</script>
