<template>
  <el-form-item :label="label">
    <!-- <el-input-number v-model="numberValue" :min="min" :max="max" @change="onNumberChange">
      <el-select v-model="unitValue" placeholder="请选择" @change="onSelectChange">
        <el-option v-for="item in commonUnits[useUnit]" :key="item" :label="item" :value="item" />
      </el-select>
    </el-input-number> -->

    <el-input v-model="numberValue" type="number" style="width: auto;text-align:right;" @change="onNumberChange">
      <el-select slot="append" v-model="unitValue" placeholder="请选择" style="width: 100px;" @change="onSelectChange">
        <el-option v-for="item in commonUnits[useUnit]" :key="item" :label="item" :value="item" />
      </el-select>
    </el-input>

    <!-- <el-input-number
      v-model="numberValue"
      class="number_input-style"
      :min="min"
      :max="max"
      controls-position="right"
      @change="onNumberChange"
    />
    <el-select v-model="unitValue" class="select-style" placeholder="请选择" @change="onSelectChange">
      <el-option v-for="item in commonUnits[useUnit]" :key="item" :label="item" :value="item" />
    </el-select> -->

    <!-- <el-row>
      <el-col :span="6">
        <el-input-number v-model="numberValue" :min="min" :max="max" @change="onNumberChange">
          <el-select v-model="unitValue" placeholder="请选择" @change="onSelectChange">
            <el-option v-for="item in commonUnits[useUnit]" :key="item" :label="item" :value="item" />
          </el-select>
        </el-input-number>
      </el-col>
      <el-col :span="6" :offset="1">
        <el-select v-model="unitValue" placeholder="请选择" @change="onSelectChange">
          <el-option v-for="item in commonUnits[useUnit]" :key="item" :label="item" :value="item" />
        </el-select>
      </el-col>
    </el-row> -->
  </el-form-item>
</template>

<!-- <style lang="stylus" scoped> -->
<style lang="stylus">
  .number_input-style
    width: 160px
    input
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      border-right: 0px;
  .select-style
    width: 90px
    input
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      border-left: 0px;
      background: rgb(245, 247, 250);
</style>

<script>
import commonUnits from '@/lib/commonUnits'

export default {
  name: 'UnitNumberInput',
  props: {
    label: {
      type: String,
      default: ''
    },
    min: {
      type: Number,
      default: -Infinity
    },
    max: {
      type: Number,
      default: Infinity
    },
    step: {
      type: Number,
      default: 1
    },
    precision: {
      type: Number,
      default: 0
    },
    numberModel: {
      type: Number,
      default: 0
    },
    unitModel: {
      type: String,
      default: ''
    },
    useUnit: {
      type: String,
      default: 'length'
    }

  },
  data() {
    return {
      commonUnits: commonUnits,

      numberValue: this.numberModel,
      oldNumberValue: 0,
      unitValue: this.unitModel
    }
  },
  watch: {
    numberValue: function(newValue, oldValue) {
      // if (oldValue === null || oldValue === undefined || oldValue === '') return

      const checkValue = this._numberChecker(oldValue)
      if (checkValue !== null) {
        this.oldNumberValue = checkValue
      }
    }
  },
  created() { },
  mounted() { },
  methods: {
    onNumberChange(newValue) {
      const checkValue = this._numberChecker(newValue)
      if (checkValue === null) {
        this.numberValue = this.oldNumberValue
      } else {
        this.numberValue = checkValue
      }
      this.$emit('update:numberModel', parseFloat(checkValue))
    },

    onSelectChange(value) {
      this.$emit('update:unitModel', value)
    },

    _numberChecker(value) {
      if (/^[+|-]?\d+(\.\d+)?$/.test(value.toString())) {
        if (parseFloat(value) < this.min) {
          value = this.min
        } else if (parseFloat(value) > this.max) {
          value = this.max
        }

        if (this.precision <= 0) {
          value = parseInt(value)
        } else {
          value = parseFloat(value).toFixed(this.precision)
        }

        return value
      } else {
        return null
      }
    }
  }
}
</script>

