<template>
  <div class="register-forms-three-container">
    <input-text
      model-name="dietary_requirements"
      :label="$_tr('dietaryRequirements')"
      :form-id="formId"
    />

    <input-selectbox
      v-if="transports.length"
      :input-data="transports"
      :label="$_tr('transports')"
      :form-id="formId"
      model-name="transports"
      objectLabelKey="title"
      objectValueKey="uuid"
      class="transport"
    />
  </div>
</template>

<script>
import { http } from '@inside-library/helpers/Http'

export default {
  name: 'RegisterFormsThree',
  $_i18nRootPath: 'customs.FORMS.REGISTER',
  props: {
    formId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      transports: []
    }
  },
  created() {
    this.requestTransports()
  },
  methods: {
    async requestTransports() {
      try {
        const { data } = await http.get('content/transports', {
          fields: ['uuid', 'title']
        })
        this.transports = data
      } catch (err) {
        throw new Error(err)
      }
    }
  }
}
</script>
