<template>

  <div class=" input-number middle">
    <span @click="minusHandle" :class="currentValue==currentMin ? 'disable':''">-</span>
    <input type="text" name="" v-model="currentValue" @change="changeVal" value=""/>
    <span @click="addHandle" :class="currentValue==currentMax ? 'disable':''">+</span>
  </div>

</template>

<script>
  export default {
    name: "ZghSelectNumber",
    props: {
      value: {
        default() {
          return 1;
        }
      },
      max: {
        default() {
          return 100000000;
        }
      },
      min: {
        default() {
          return 1;
        }
      }
    },
    data() {
      return {
        currentValue: this.value,
        currentMax: this.max,
        currentMin: this.min
      }
    },
    watch: {
      currentValue(val) {
        this.$emit('input', val);
        this.$emit('change', val);
      },
      value() {
        this.currentValue = this.value;

      }
    },
    computed: {},
    mounted() {

    },
    methods: {
      addHandle() {
        console.log(this.currentMax, 555)
        if (this.currentValue >= this.currentMax) {
          this.currentValue = this.currentMax;
          return;
        }
        this.currentValue++;
      },
      minusHandle() {
        if (this.currentValue <= this.currentMin) {
          this.currentValue = this.currentMin;
          return;
        }
        this.currentValue--;
      },
      changeVal() {
        this.addHandle()
        this.minusHandle()
      }
    }
  }
</script>

<style lang="less">
  @import url("../../assets/config.less");

  @common_color: 'red';
  .input-number {
    @h: 30px;
    height: @h;
    line-height: @h - 2px;
    margin-right: 10px;
    background: #fff;
    span {
      float: left;
      display: block;
      width: 30px;
      height: 100%;
      text-align: center;
      background: #ddd;
      border: 1px solid #ddd;
      cursor: pointer;
      -webkit-user-select: none;
      &.disable {
        background: #eee;
        border: 1px solid #eee;
        cursor: no-drop;
      }
    }
    input {
      display: block;
      float: left;
      height: 100%;
      width: 50px;
      text-align: center;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
    }
  }
</style>
