<template>
  <view class="wrapper">
    <view class="minus-box" @tap="minusTap">
      <uni-icons size="16" custom-prefix="iconfont" type="icon-Less" color="#007AFF"></uni-icons>
      <!-- <uni-icons size="16" type="minus" color="#007AFF"></uni-icons> -->
    </view>
    <view class="" style="padding: 0rpx 4rpx">
      <qn-easyinput
        :inputBorder="false"
        class="quantity-input"
        style="height: 64rpx"
        :clearable="false"
        type="number"
        :value="value"
        placeholder="请输入"
        @blur="blur"
        @confirm="confirm"
        @input="input"
      ></qn-easyinput>
    </view>
    <view class="minus-box" @tap="addTap"><uni-icons size="16" type="plusempty" color="#007AFF"></uni-icons></view>
  </view>
</template>

<script>
export default {
  props: {
    quantity: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      value: 0
    }
  },
  watch: {
    quantity: {
      handler(nv, ov) {
        this.value = nv
      },
      immediate: true
    }
  },
  methods: {
    input(value) {
      this.$emit('input', value)
    },
    blur(e) {
      this.$emit('change', e.detail.value)
    },
    confirm(value) {
      if (value.trim()) {
        this.$emit('change', value)
      }
    },
    minusTap() {
      if (this.value == 0) {
        return
      }
      this.value--
      this.$emit('change', this.value)
    },
    addTap() {
      this.value++
      this.$emit('change', this.value)
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  .minus-box {
    width: 64rpx;
    height: 64rpx;
    line-height: 64rpx;
    text-align: center;
    background: #f2f3f5;
    border-radius: 8rpx;
    color: #007aff;
  }
  .quantity-input {
    width: 120rpx;
    height: 64rpx;
    background: #f2f3f5;
    /deep/ .uni-easyinput__content {
      min-height: 64rpx;
    }
  }
}
</style>
