<template>
  <div class="ui-spinner" :class="[{'is-border': border, 'is-viewable': !editable}, 'ui-spinner--' + size, 'ui-spinner--' + type]">
    <template v-if="editable">
      <el-input-number
        class="ui-spinner__control"

        v-model="innerValue"
        :min="min"
        :max="max"
        :placeholder="placeholder"
        :disabled="disabled"
        :size="size"
        controls-position="right"
      />
    </template>
    <template v-else>
      {{innerValue}}
    </template>
  </div>
</template>
<script>
import ElInputNumber from 'element-ui/lib/input-number'
import 'element-ui/lib/theme-chalk/input-number.css'

export default {
  name: 'UiSpinner',
  components: {
    ElInputNumber
  },
  props: {
    border: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: 'default',
      validator(value) {
        return ['default', 'simple'].includes(value)
      }
    },
    value: {
      type: [Number],
      default: undefined
    },
    disabled: {
      type: Boolean,
      default: false
    },
    editable: {
      type: Boolean,
      default: true
    },
    max: {
      type: Number,
      default: undefined
    },
    min: {
      type: Number,
      default: undefined
    },
    size: {
      type: String,
      default: 'medium'
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  computed: {
    innerValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  }
}
</script>
<style lang="less">
.ui-spinner {
  .el-input-number {
    width: 100%;
    .el-input__inner{
      text-align: left;
      font-size: 14px;
    }
  }
  &:not(.is-border) {
    .el-input__inner{
      border-color: transparent;
      transition: all .25s;
      background-color: transparent;
    }
    .el-input-number__decrease,
    .el-input-number__increase{
      opacity: 0;
      border-left-color: transparent;
      background-color: #eee;
      transition: all .25s;
    }
    &:hover {
      .el-input__inner{
        border-color: #f9f9f9;
        background-color: #f9f9f9;
      }
      .el-input-number__decrease,
      .el-input-number__increase{
        opacity: 1;
      }
    }
  }
  &.is-viewable {
    &.ui-spinner--medium {
      line-height: 22px;
      padding: 9px 0;
    }
    &.ui-spinner--small {
      line-height: 22px;
      padding: 5px 0;
    }
    &.ui-spinner--mini {
      line-height: 22px;
      padding: 3px 0;
    }
  }
  &.ui-spinner--simple .el-input-number {
    .el-input-number__decrease,
    .el-input-number__increase {
      display: none;
    }
    .el-input__inner{
      padding-left: 12px;
      padding-right: 12px;
    }
  }
}
</style>
