<template>
  <el-col :xl="{span:span,offset:offset}" :lg="lgSpan" :md="mdSpan" :sm="smSpan" :xs="xsSpan">
    <el-form-item
      :label="$t(label)"
      :rules="[...requireRule(required, label, validate,trigger), ...rules]"
      :prop="prop"
      :class="inputLong?'inputLong':null"
      :label-width="labelWidth"
    >

    <template #label>
      <el-tooltip :content="$t(label)" :disabled="!showTooltip">
        <span>{{ $t(label) }}</span>
      </el-tooltip>
    </template>

    <template>
      <el-tooltip :disabled="isBlank($parent.model[prop])|| !$parent.disabled" :content=" $parent.model[prop]" effect="light">
        <span>

      <el-input
        v-model.trim="$parent.model[prop]"
        :style="{ width }"
        :placeholder="placeholder || '请输入'"
        :clearable="clearable"
        :disabled="disabled"
        :resize="'none'"
        :type="type"
        :rows="rows"
        @focus="focus"
        :show-word-limit="showLimit"
        :readonly="readonly"
        :maxlength="maxlength"
        @input="inputChange"
        @change="change"
        @clear="clear"
        @keyup.enter.native="keyup"
      >
        <el-button slot="append" :icon="icon" v-if="icon" @click="clickIcon"></el-button>
        <template slot="append" v-if="append"><span @click="$emit('appendClick')" :style="appendStyle">{{
            append
          }}</span></template>
        <i v-if="prefix" slot="prefix" :class="prefixClass"/>
      </el-input>

            </span>
      </el-tooltip>
    </template>

    </el-form-item>
  </el-col>


</template>

<script>
import mixin from '../../mixin'
import {isBlank} from "@/utils/common";

/**
 * 输入框组件
 */
export default {
  mixins: [mixin],
  props: {
    icon: {
      type: String
    },
    append: {
      type: String
    },
    validate: {
      type: String
    },
    type: {
      type: String,
      default: 'text'
    },
    prefix: {
      type: String,
      default: ""
    },
    maxlength: {
      type: Number,
      default: 150
    },
    rows: {
      type: Number,
      default: 3
    },
    rules: {
      type: Array,
      default: () => []
    },
    showLimit: {
      type: Boolean,
      default: false
    },
    span: {
      type: Number,
      default: 6
    },
    offset: {
      type: Number,
      default: 0
    },
    inputLong: {
      type: Boolean,
      default: false,
    },
    //是否可以清空
    clearable: {
      type: Boolean,
      default: true
    },
    trigger: {
      type: String,
      default: 'blur'
    },
    labelWidth: {
      type: String,
      default: ''
    },
    lgSpan: {
      type: Number,
      default: 8
    },
    mdSpan: {
      type: Number,
      default: 8
    },
    smSpan: {
      type: Number,
      default: 12
    },
    Span: {
      type: Number,
      default: 24
    },
    xsSpan: {
      type: Number,
      default: 24
    },
    appendStyle: {
      type: Object,
      default: () => {
      }
    },
    showTooltip: {
      type: Boolean,
      default: false
    },


  },
  computed: {
    showTip() {
      return this.disabled
    },
    prefixClass() {
      return "el-input__icon " + this.prefix
    }
  },
  mounted() {

  },
  methods: {
    isBlank,
    focus() {
      this.$emit('focus')
    },
    clickIcon() {
      this.$emit('icon-clicked')
    },
    inputChange(val) {
      this.$emit('input', val)
    },
    change(val) {
      this.$emit('change', val)
    },
    clear() {
      this.$emit('clear')
    },
    keyup() {
      this.$emit('keyup')
    }
  }
}
</script>

<style scoped>
.inputLong .el-input,
.inputLong .el-input__inner {
  width: 500px !important;
}
</style>
