<template>
  <!--
    输入框:
      type: 'input'
      prop:  绑定属性
      label: 标题
      v-model:      绑定数据
      itemType:     原生 input 的 type（text、number、password、textarea等，默认text）
      placeholder:  输入框占位文本，默认‘请输入’+label
      width:        输入框宽度
      readonly:  是否只读，默认false
      disabled:  是否禁用，默认false
      clearable: 是否可清空，默认true
  -->
  <el-input
    v-model="data"
    :type="itemType"
    :placeholder="placeholder || `请输入${label}`"
    :clearable="clearable"
    :disabled="disabled"
    :readonly="readonly"
    :style="{width}"
    :show-password="itemType === 'password'"
    :autosize="{minRows: 3, maxRows: 10000}"
  />

</template>

<script>

export default {
  name: 'AInput',
  props: {
    prop: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    },
    value: {
      type: [String, Number],
      default: undefined
    },
    itemType: {
      type: String,
      default: 'text'
    },
    placeholder: {
      type: String,
      default: undefined
    },
    width: {
      type: String,
      default: '100%'
    },
    readonly: {
      type: Boolean
    },
    disabled: {
      type: Boolean
    },
    clearable: {
      type: Boolean
    }
  },
  data () {
    return {
      data: this.value
    }
  },
  watch: {
    data (newVal) {
      this.$emit('update:value', newVal)
    },
    value (newVal) {
      this.data = newVal
    }
  }
}
</script>
