<template>
  <a-row :gutter="10" type="flex" class="position">
    <a-col :span="12">
      <a-input-number
        v-model="x"
        :disabled="disabled"
        :min="min"
        @blur="$emit('blur')"
      />
    </a-col>
    <a-col :span="12">
      <a-input-number
        v-model="y"
        :disabled="disabled"
        :min="isStrict && x !== undefined && x > min ? x : min"
        :max="max"
        @blur="$emit('blur')"
      />
    </a-col>
  </a-row>
</template>

<script>
export default {
  name: "Position",
  props: {
    value: {
      type: String,
      default: "",
    },
    split: {
      type: String,
      default: ",",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    min: {
      type: Number,
      default: -Infinity,
    },
    max: {
      type: Number,
      default: Infinity,
    },
    // 限制左边值小于等于右边值
    isStrict: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      x: 0,
      y: 0,
    };
  },
  watch: {
    value(newVal, oldVal) {
      this.setPosition(newVal);
    },
    x(newVal, oldVal) {
      if (this.isRealNum(newVal) && this.isRealNum(this.y)) {
        if (this.y < newVal) {
          this.y = newVal;
        }
        this.$emit("input", `${newVal}${this.split}${this.y}`);
      } else {
        this.$emit("input", "");
      }
    },
    y(newVal, oldVal) {
      if (this.isRealNum(newVal) && this.isRealNum(this.x)) {
        this.$emit("input", `${this.x}${this.split}${newVal}`);
      } else {
        this.$emit("input", "");
      }
    },
  },
  mounted() {
    this.setPosition(this.value);
  },
  methods: {
    isRealNum(val) {
      if (val === "" || val == null) {
        return false;
      }
      // eslint-disable-next-line
      if (!isNaN(val)) {
        return true;
      }
      return false;
    },
    setPosition(val) {
      if (val) {
        const arr = val.split(this.split);
        if (arr.length === 2) {
          // eslint-disable-next-line
          this.x = parseInt(arr[0]);
          // eslint-disable-next-line
          this.y = parseInt(arr[1]);
        }
      } else {
        this.x = 1;
        this.y = 1;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.position {
  display: flex;
  justify-content: space-between;
  max-width: 400px;
}
/deep/ .ant-input-number {
  width: 100%;
}
</style>
