<template>
  <a-form-model
    ref="ruleForm"
    :model="formValue"
    :rules="rules"
  >
    <a-row :gutter="24" class="my-row">
      <a-col :span="9">
        <a-form-model-item
          :label-col="{span:17}"
          :wrapper-col="{span:5}"
          label="流水码长度"
          props="value"
        >
          <a-input-number
            v-model="formValue.codeValue"
            :min="3"
            :max="20"
            @change="onChange"
            @blur="checkStartValue"
            class="test"/>
        </a-form-model-item>
      </a-col>

      <a-col :span="9">
        <a-form-model-item
          :label-col="{span:4}"
          :wrapper-col="{span:20}"
          label="起始值"
          props="startValue"
        >
          <a-input
            v-model="formValue.startValue"
            @blur="checkStartValue"
            @change="onChange" />
        </a-form-model-item>
      </a-col>

      <a-col :span="4">
        <a-form-model-item
          :label-col="{span:7}"
          :wrapper-col="{span:11}"
          label="增量"
        >
          <a-input-number
            v-model="formValue.increValue"
            :min="1"
            :max="999"
            @change="onChange" />
        </a-form-model-item>
      </a-col>

    </a-row >
  </a-form-model>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      value: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        formValue: this.value,
        increValueMax: null,
        rules: {}
      }
    },
    mounted() {
    },
    methods: {
      onChange(e) {
        this.$emit('changeValue', this.formValue)
      },
      checkStartValue() {
        // this.onChange()
        const length = this.formValue.codeValue
        if (this.formValue.startValue && this.formValue.startValue.length) {
          if (String(this.formValue.startValue.length) < length) {
            this.$set(this.formValue, 'startValue', (Array(length).join(0) + this.formValue.startValue).slice(-length))
            this.$emit('changeValue', this.formValue)
          } else {
            this.$set(this.formValue, 'startValue', this.formValue.startValue.slice(String(this.formValue.startValue.length) * 1 - length))
            this.$emit('changeValue', this.formValue)
          }
        }
      }
    },
    watch: {
      'formValue.codeValue': {
        deep: true,
        // immediate: true,
        handler() {
          this.increValueMax = (1 + Array(this.formValue.value).join(0)) * 1
        }
      }
    }
  }
</script>

<style>
.test{
  width: 110%;
}

</style>
