<template>
  <div>
    <div class="flex items-center relative-position">
      <currency-select @change="submit" />
    </div>
    <calculator-deliveries
      v-if="calculatorStore.deliveries.length"
      title="Курьерская доставка"
      :deliveries="calculatorStore.deliveries"
    />
    <calculator-deliveries
      v-if="calculatorStore.deliveryPoints.length"
      title="Пункты выдачи"
      :deliveries="calculatorStore.deliveryPoints"
    />
  </div>
</template>

<script lang="ts">
import { Emit, Vue, Component } from 'vue-property-decorator'
import { getDeliveryCalculatorStore } from './utils/DeliveryCalculatorStore'
import CalculatorDeliveries from './CalculatorResult/CalculatorDeliveries.vue'
import CurrencySelect from './CalculatorResult/CurrencySelect.vue'
import DeliveryCalculatorStore from './utils/DeliveryCalculatorStore'
import UiBtnClose from '../../buttons/UiBtnClose.vue'
import { QSpace } from 'quasar'

@Component({
  components: { UiBtnClose, CurrencySelect, CalculatorDeliveries, QSpace },
})
export default class CalculatorResult extends Vue {
  calculatorStore!: DeliveryCalculatorStore

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

  @Emit()
  submit() {
    return true
  }
}
</script>
