<template>
  <ui-input
    v-bind="$attrs"
    v-on="$listeners"
    v-model="weight"
    label="Вес, гр"
    name="products.0.weight"
  />
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import DeliveryCalculatorStore, {
  getDeliveryCalculatorStore,
} from '../utils/DeliveryCalculatorStore'
import UiInput from '../../../form/UiInput.vue'

@Component({
  components: { UiInput },
  inheritAttrs: false,
})
export default class WeightField extends Vue {
  calculatorStore!: DeliveryCalculatorStore

  created() {
    this.calculatorStore = getDeliveryCalculatorStore(this.$store)
  }

  get weight(): null | number {
    return this.calculatorStore.weight
  }

  set weight(value: null | number) {
    this.calculatorStore.setWeight(value)
  }
}
</script>
