<template>
  <div>
    <template>
      <a-textarea
        v-model="modelValue"
        :placeholder="placeholder"
        :read-only="(!!prop && !isEdit(prop)) || readOnly || disabled"
        :auto-size="{ minRows: 3, maxRows: 5 }"
        @input="event => $emit('input', event.target.value)"
        @blur="event => $emit('blur', event.target.value)"
      />
    </template>
  </div>
</template>

<script>
import { isEdit } from '@/components/hrhx/approval/utils/set-form-control'

export default {
  name: 'TTextarea',

  /**
   * textarea 文本域
   * @description 仅用于两票管理模块的 textarea 文本域
   * @property {String} value v-model语法糖
   * @property {String} placeholder 提示信息
   * @property {Number|String} minRows 最小高度
   * @property {Number|String} maxRows 最大高度
   * @property {String} prop 需要校验的字段
   * @author Matrix
   * @since 2022/09/02
   */
  props: {
    value: {
      type: String,
      required: false,
      default: ''
    },
    placeholder: {
      type: String,
      required: false,
      default: '请填写'
    },
    minRows: {
      type: [Number, String],
      required: false,
      default: 3
    },
    maxRows: {
      type: [Number, String],
      required: false,
      default: 5
    },
    prop: {
      type: String,
      required: false,
      default: ''
    },
    readOnly: {
      type: Boolean,
      required: false,
      default: false
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      modelValue: ''
    }
  },
  watch: {
    value: {
      handler(val) {
        this.modelValue = val
      },
      immediate: true
    }
  },
  methods: {
    isEdit
  }
}
</script>

<style scoped></style>
