<template>
  <ui-input v-model="price" :label="priceLabel" name="delivery-price" />
</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 },
})
export default class PriceField extends Vue {
  calculatorStore!: DeliveryCalculatorStore

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

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

  set price(value: number | null) {
    this.calculatorStore.setPrice(value)
  }

  get priceLabel(): string {
    return `Цена, ${this.calculatorStore.currency.symbol}`
  }
}
</script>
