<template>
  <view class="number-step">
    <view :class="['action', value <= min ? 'disabled' : '']" @click="reduceAction">
      <text>-</text>
    </view>
    <view class="number-block">
      <input class="number-input" type="number" :value="value" @blur="numberInputChange" :disabled="disabled" />
    </view>
    <view :class="['action', disabled ? 'disabled' : '']" @click="addAction">
      <text>+</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: [Number, String],
      default: 0,
    },
    min: {
      type: Number,
      default: 0,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    numberInputChange(e) {
      this.$emit("input", e.target.value);
    },
    addAction() {
      if (this.disabled) return;
      this.$emit("input", this.value + 1);
    },
    reduceAction() {
      if (this.disabled) return;
      this.$emit("input", this.value - 1);
    },
  },
};
</script>

<style scoped lang="scss">
.number-step {
  border: 1px solid #f2f2f2;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  .action {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60rpx;
    position: relative;
    font-weight: bold;

    text {
      position: relative;
      top: -3rpx;
    }

    .disabled {
      color: #cccccc;

      pointer-events: none;
    }
  }

  .number-block {
    width: 70rpx;
    height: 100%;
    display: flex;
    align-items: center;

    .number-input {
      border-left: 1px solid #f2f2f2;
      border-right: 1px solid #f2f2f2;
      width: 100%;
      height: 60rpx;
      font-size: 24rpx;
      font-weight: 600;
      color: #262626;
      display: inline-block;
      text-align: center;
    }
  }
}
</style>
