<template>
  <el-form-item :label="showLabel ? label : ''" :rules="[...requireRule(required, label, type), ...rules]" :prop="prop"
    :labelWidth="labelWidth">
    <el-tooltip v-if="showTip && !isBlank(formRef.model[prop])" placement="top">
      <div slot="content" >{{ initName }}</div>
      <el-input ref="inputs" v-model.trim="formRef.model[prop]" :style="{ width }"
      :placeholder="placeholder || $t('common.pleaseInputHasPara', [label])"
      @blur="formRef.model[prop] = $event.target.value.trim()" @input="$forceUpdate()" :clearable="clearable"
      @clear="clear" :disabled="disabled" :type="type" :rows="rows" @focus="focus" show-word-limit :trigger="trigger"
      :readonly="readonly" :maxlength="maxlength" class="custom-input" @change="$emit('change', formRef.model[prop])"
     ></el-input>
    </el-tooltip>
    <el-input v-if="!showTip || isBlank(formRef.model[prop])" ref="inputs" v-model.trim="formRef.model[prop]" :style="{ width }"
      :placeholder="placeholder || $t('common.pleaseInputHasPara', [label])"
      @blur="formRef.model[prop] = $event.target.value.trim()" @input="$forceUpdate()" :clearable="clearable"
      @clear="clear" :disabled="disabled" :type="type" :rows="rows" @focus="focus" show-word-limit :trigger="trigger"
      :readonly="readonly" :maxlength="maxlength" class="custom-input" @change="$emit('change', formRef.model[prop])"
     >
      <template #append>
        <el-button :type="buttonType" @click="() => $emit('buttonClick')" v-if="showButton">{{ buttonLabel
          }}</el-button>
      </template>
    </el-input>
    <!-- <span v-else class="content">{{ formRef.model[prop] }}</span> -->
  </el-form-item>
</template>

<script>
import mixin from "./mixin";
import {isBlank} from "../../../../utils";
/**
 * 输入框组件
 */
export default {
  mixins: [mixin],
  props: {
    type: {
      type: String,
      default: "input",
    },
    maxlength: {
      type: Number,
      default: 30,
    },
    rows: {
      type: Number,
      default: 3,
    },
    trigger: {
      type: String,
      default: 'blur'
    },
    labelWidth: {
      type: String
    },
    defaultValue: {
      type: String,
      default: null
    },
    width: {
      type: String,
      default: '640px'
    },
    span: {
      type: Number,
      default: 8
    },
    buttonLabel: {
      type: String,
      default: ''
    },
    buttonType: {
      type: String,
      default: 'primary'
    },
    showButton: {
      type: Boolean,
      default: false
    },
    showTip:{
      type: Boolean,
      default: false
    },
  },
  computed: {
    initName() {
      return this.formRef.model[this.prop];
    }
  },
  methods: {
    isBlank,
    focus() {
      this.$emit("focus");
    },
    doFocus() {
      this.$refs.inputs.focus();
    },
    clear() {
      this.$emit("clear")
    }
  },
  mounted() {
    if (this.defaultValue != null && this.defaultValue != '' &&
      (this.formRef.model[this.prop] == null || this.formRef.model[this.prop] == '' || this.formRef.model[this.prop] == undefined)) {
      this.formRef.model[this.prop] = this.defaultValue
    }
  }
};
</script>

<style scoped>
.custom-input.el-textarea {
  width: 515px
}

.content {
  padding: 5px 10px;
  border-bottom: 1px solid;
  width: 100%;
  display: block;
  min-height: 46px;
}
</style>