<template>
  <Input
      v-model="info.defaultValue"
      :placeholder="info.form.placeholder"
      :type="inputType"
      :disabled="info.form.disabled||!info.isNew"
      :clearable="info.form.clearable"
      :readonly="info.form.readonly"
      :prefix="info.form.prefix"
      :suffix="info.form.suffix"
      :size="size"
      :maxlength="info.form.maxlength"
      :show-word-limit="info.form.showWordLimit"
      :key="id">
    <span slot="prepend" v-if="info.form.prepend">{{info.form.prepend}}</span>
    <span slot="append" v-if="info.form.append">{{info.form.append}}</span>
  </Input>
</template>
<script>
import { baseComponentMixins } from '../mixins'

export default {
  name: 'BaseInput',
  mixins: [ baseComponentMixins ],
  data() {
    return {
      id: 0, //为了 prepend append 改变时重新渲染
    }
  },
  computed: {
    slotObj() {
      const { prepend, append } = this.info.form
      return { prepend, append }
    },
    inputType() {
      const { type } = this.info.form
      if (type === 'Input') { return 'text' }
      return type.toLocaleLowerCase()
    },
  },
  watch: {
    slotObj: {
      handler() {
        this.id++
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>