<template>
  <div class="product-qty" :class="{small: small}">
    <b-button @click="sub" :disabled="disabled || qty <= 1" pill >
      <font-awesome-icon icon="minus" class="text-dark" />
    </b-button>
    <b-form-input
      type="number"
      v-model="qty"
      :disabled="disabled"
      id
      class="col-md-5 radius-theme"
      placeholder
    ></b-form-input>
    <b-button @click="add" :disabled="disabled" pill >
      <font-awesome-icon icon="plus" class="text-dark" />
    </b-button>
    <div style="clear:both;"></div>
  </div>
</template>

<script>
export default {
  props: {
    small: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    disabled: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    product: {
      type: Object,
      default: () => {
        return null;
      }
    },
    value: {
      type: Number,
      default: () => {
        return 1;
      }
    }
  },
  model:{
    prop: 'value',
    event: 'change'
  },
  data: () => {
    return {
    // qty: 0
    };
  },
  computed:{

    qty:{
      get(){
        return this.value;
      },
      set(value){
        this.$emit('change',parseInt(value));
      }
    }
  },
  watch: {
    /*qty: function(newValue) {
      this.validateValue();
    },
    product: function(newValue){
      this.qty = 1;
    },
    value: function(newValue){
      this.qty = newValue;
    }*/
  },
  methods: {
    validateValue() {
      this.$emit("input", parseInt(this.qty));
    },
    add() {
      this.qty++;
    },
    sub() {
      if (this.qty <= 1) {
        return;
      }
      this.qty--;
    }
  },
  mounted() {
    this.qty = this.value;
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/main.scss";
.radius-theme {
  border-radius: $main-border-radius;
}

.product-qty {
  button,
  input {
    float: left;
    text-align: center;
  }
  input {
    margin: 0px 5px;
  }
  button {
    border-radius: 50% !important;
    height: 35px;
    width: 35px;
    font-size: 1.2em;
    padding: 3px;
    background: none;
    border: none;
  }
}
.product-qty.small {
  input {
    font-size: 0.8em;
    padding: 0px;
  }
  button {
    height: 21px;
    width: 21px;
    margin-top: 0.4em;
    font-size: 0.8em;
    padding: 1px;
  }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
}
</style>