<template>
<el-form-item :prop="prop" :label="label" :label-width="options.labelWidth" :rules="rules">
  <span v-if="options.labelDes" slot="label">{{label}}
    <el-tooltip  width="200" trigger="hover" placement="top" effect="dark" :content="options.labelDes">
      <i class="el-icon-question"></i>
    </el-tooltip>
  </span>
  <el-input v-model.trim="value" v-bind="props" @change="onChange" @blur="onBlur">
    <template slot="prepend" v-if="options.prepend">{{options.prepend}}</template>
    <template slot="append" v-if="options.append">{{options.append}}</template>
  </el-input>
</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, TextDef, TextOptions } from '../../type'
import FieldMixins from './FieldMixins'

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

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

  onChange (val: any) {
    const fn = this.options?.onChange
    if (fn) fn({ value: this.value, form: this.actualForm, rowForm: this.rowForm })
  }

  onBlur (val: any) {
    const fn = this.options?.onBlur
    if (fn) fn({ value: this.value, form: this.actualForm, rowForm: this.rowForm })
  }
}
</script>
