<script setup>
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import VnRow from 'components/ui/VnRow.vue';
import FormModel from 'components/FormModel.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnInput from 'components/common/VnInput.vue';
import VnInputTime from 'components/common/VnInputTime.vue';

const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const defaultInitialData = {
    etd: Date.vnNew().toISOString(),
};
const onSave = (data, response) => {
    router.push({ name: 'RoadmapSummary', params: { id: response?.id } });
};
</script>
<template>
    <VnSubToolbar />
    <FormModel
        :url="null"
        url-create="Roadmaps"
        model="roadmap"
        :observe-form-changes="false"
        :auto-load="false"
        :form-initial-data="defaultInitialData"
        @on-data-saved="onSave"
    >
        <template #form="{ data }">
            <VnRow class="row q-gutter-md q-mb-md">
                <div class="col">
                    <VnInput
                        v-model="data.name"
                        :label="t('Roadmap')"
                        clearable
                    />
                </div>
                <div class="col">
                    <VnInputDate v-model="data.etd" :label="t('ETD date')" />
                </div>
                <div class="col">
                    <VnInputTime v-model="data.etd" :label="t('ETD hour')" />
                </div>
            </VnRow>
        </template>
    </FormModel>
</template>
<i18n>
es:
    Roadmap: Troncal
    ETD date: Fecha ETD
    ETD hour: Hora ETD
</i18n>
