<template>
  <div class="ui-textbox" :class="[{'is-viewable': !editable}, 'ui-textbox--' + size]">
    <template v-if="editable">
      <el-input
        ref="input"
        v-model.trim="innerValue"
        class="ui-textbox__input"
        :type="type"
        :disabled="disabled"
        :readonly="readonly"
        :size="size"
        :placeholder="placeholder"
        :clearable="clearable"
        :maxlength="maxlength"
        :show-word-limit="showWordLimit"
        @keyup.native.13="handleEnter"
        @focus="handleFocus"
        @blur="handleBlur"
        @change="handleChange"
        @compositionstart.native="handleCompositionStart"
        @compositionend.native="handleCompositionEnd"
      >
        <template slot="prepend">
          <slot name="prepend" />
        </template>
        <template slot="suffix">
          <slot name="suffix" />
        </template>
      </el-input>
    </template>
    <template v-else>
      {{ innerValue }}
    </template>
  </div>
</template>
<script>
import Input from 'element-ui/lib/input'
import 'element-ui/lib/theme-chalk/input.css'

export default {
  name: 'UiTextbox',
  components: {
    ElInput: Input
  },
  props: {
    showWordLimit: {
      type: Boolean,
      default: false
    },
    maxlength: {
      type: [Number, String],
      default: 50
    },
    size: {
      type: String,
      default: 'medium'
    },
    clearable: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'text',
      validator: (val) => {
        return ['password', 'text', 'number'].indexOf(val) >= 0
      }
    },
    value: {
      type: String
    },
    placeholder: {
      type: String
    },
    editable: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean
    },
    readonly: {
      type: Boolean
    }
  },
  computed: {
    innerValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  mounted() {
    if (this.type === 'password') {
      this.$refs.input.$refs.input.setAttribute('autocomplete', 'new-password')
    }
  },
  methods: {
    handleChange(e) {
      this.$emit('change', {
        value: e
      })
    },
    handleEnter(e) {
      this.innerValue = e.target.value.trim()
      this.$emit('enter')
    },
    handleFocus() {
      this.$emit('focus')
    },
    handleBlur() {
      this.$emit('blur')
    },
    handleCompositionStart() {
      this.$emit('composition-start')
    },
    handleCompositionEnd() {
      this.$emit('composition-end')
    },
    focus() {
      this.$nextTick(() => {
        this.$refs.input && this.$refs.input.focus && this.$refs.input.focus()
      })
    }
  }
}
</script>
<style lang="less">
.ui-textbox{
  line-height: 1em;
  .el-input__inner{
    font-size: 14px;
    padding-left: 12px;
  }
  &:not(.is-viewable) {
    &.ui-textbox--large {
      .el-input__inner{
        padding-top: 12px;
        padding-bottom: 12px;
        height: 54px;
      }
    }
  }
  &.is-viewable {
    &.ui-textbox--large {
      line-height: 22px;
      padding: 16px 0;
    }
    &.ui-textbox--medium {
      line-height: 22px;
      padding: 9px 0;
    }
    &.ui-textbox--small {
      line-height: 22px;
      padding: 5px 0;
    }
    &.ui-textbox--mini {
      line-height: 22px;
      padding: 3px 0;
    }
  }
}
</style>
