<template>
  <div
    class="hsInputBox"
  >
    <div
      class="inputTitle"
      v-if='configData.title'
    >{{configData.title}}</div>
    <div class="inputCurr">
      <el-input-number
        :size='configData.size'
        @keyup.enter.native="submitInput"
        v-model="innerValue"
        @change='changeFun'
        :disabled="getDisabled"
        :placeholder="configData.placeholder"
        controls-position="right"
        :min="configData.min"
        :max="configData.max"
        :step='configData.step'
      ></el-input-number>
    </div>
  </div>
</template>
<script>
import commonMixins from '../ucClass/commonMixins'
export default {
  mixins:[commonMixins],
  name: 'input-number-component',
  computed: {
    innerValue: {
      set(value) {
        let result = ''
        const typeValue = typeof this.value
        if (typeValue === 'string') {
          result = String(value)
        } else {
          result = value
        }
        this.valueChange(result)
        this.$emit('input', result)
      },
      get() {
        return Number(this.value)
      }
    },
    configData: function() {
      const { config } = this.allSourceData
      return Object.assign(this.configData_, config || {})
    },
    getDisabled: function() {
      const { disabled, disabledLevel } = this.configData
      const type = typeof disabled
      if (disabledLevel === 1) {
        // 以自己的的配置为优先级最高
        if (type === 'function') {
          return disabled(this.formData)
        } else {
          return disabled
        }
      } else {
        if (type === 'function') {
          return this.disabled || disabled(this.formData)
        } else {
          return this.disabled || disabled
        }
      }
    }
  },
  data() {
    return {
      isInputed: false,
      configData_: {
        title: '',
        placeholder: '',
        size: 'mini',
        disabled: false
      }
    }
  },
  methods: {
    execAction(actionName, value) {
      const type = typeof actionName
      if (type === 'function') {
        actionName(value, this.formData)
      }
    },
    valueChange(value) {
      const { changing } = this.configData
      this.execAction(changing, value)
    },
    changeFun(value) {
      const { changeed } = this.configData
      this.execAction(changeed, value)
    },
    submitInput(val) {
      const { entered } = this.configData
      this.execAction(entered, val, this.elInfo)
      this.$emit('enterInput', this.innerValue, this.elInfo)
    }
  }
}
</script>
<style scoped>
.hsInputBox {
  padding: 1px;
  width: 100%;
  height: 100%;
  display: flex;
}
.inputTitle {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.inputCurr {
  flex: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}
.inputCurr >>> .el-input-number--mini {
  width: 100%;
}
</style>
