<template>
  <div class="bg-white relative-position">
    <track-create-header @close="close" />
    <track-form @submit="submit" @cancel="close" :project-host="projectHost" />
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import DeliveryTrackingService from './delivery-tracking/services/DeliveryTrackingService'
import TrackCreateHeader from './delivery-tracking/components/form/TrackCreateHeader.vue'
import TrackForm from './delivery-tracking/components/form/TrackForm.vue'
import { Track } from './delivery-tracking/dto/Track'

@Component({
  components: { TrackForm, TrackCreateHeader },
})
export default class UiDeliveryTrackingForm extends Vue {
  @Prop(String) apiHost!: string
  @Prop(String) projectHost!: string

  created() {
    DeliveryTrackingService.init({ host: this.apiHost })
  }

  @Emit()
  submit(track: Track) {
    return track
  }

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