<template>
  <div class="inputNumber">
    <div class="jian" @click="jian">-</div>
    <input type="text" @blur="numInput" v-model="num" :min="0" :max="max" />
    <div class="jia" @click="jia">+</div>
  </div>
</template>

<script>
export default {
  name: "inputNumber",
  props: ["numb", "max"],
  data() {
    return {
      num: this.numb ? parseInt(this.numb) : 0,
      loading: false,
      maxHeight: "0",
      tableData: [],
    };
  },
  async created() {},
  mounted() {},
    watch: {
    numb: function (val) {
      this.num= val ? parseInt(val) : 0
    },
  },
  methods: {
    isnumber(s) {
      return /^[0-9]*$/.test(s);
    },
    numInput() {
      this.leix();
      let rs = "";
      let s = this.num + "";
      for (let i = 0; i < s.length; i++) {
        if (this.isnumber(s[i])) {
          rs += s[i];
        }
      }
      if (rs === "") {
        this.num = 0;
      } else {
        this.num = parseInt(rs);
      }

      if (this.num > this.max) {
        this.num = this.max;
      }
      if (this.num < 0) {
        this.num = 0;
      }
      this.$emit("backNum", this.num);
    },
    jian() {
      this.leix();
      if (this.num > 0) {
        this.num--;
        this.$emit("backNum", this.num);
      }
    },
    jia() {
      this.leix();
      this.num = parseInt(this.num);
      if (this.num < this.max) {
        this.num++;
        this.$emit("backNum", this.num);
      }
    },

    leix() {
      if (isNaN(this.num)) {
        this.num = 0;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.inputNumber {
  position: relative;
  display: inline-block;
  width: 140px;
  height: 36px;
  border-radius: 19px;
  overflow: hidden;
  box-sizing: border-box;
  vertical-align: top;
  padding: 0;
  margin: 0;

  input {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    border: 0;
    vertical-align: top;
    padding: 0 31px;
    text-align: center;
    margin: 0;
    height: 36px;
    line-height: 36px;
    background: #ffffff;
  }
  .jian,
  .jia {
    position: absolute;
    top: 0;
    z-index: 2;
    height: 36px;

    width: 32px;
    text-align: center;
    line-height: 36px;
    color: #787878;
    padding: 0 0 0 0;
    margin: 0;
  }
  .jian {
    left: 0;
    font-size: 20px;
    padding: 0 0 0 2px;
    line-height: 35px;
    font-weight: lighter;
  }
  .jia {
    right: 0;
    font-size: 17px;
    line-height: 39px;
    padding: 0 2px 0 0;
  }
}
</style>
