83 lines
2.3 KiB
Vue
83 lines
2.3 KiB
Vue
<template>
|
|
<div>
|
|
<div class="text-center">Autóbérlés vége</div>
|
|
<div class="flex flex-col p-3">
|
|
<DatePicker inline :min-date="minDate" v-model="selectedDate" />
|
|
</div>
|
|
|
|
<div class="flex flex-col p-3">
|
|
Időpont
|
|
<Dropdown :options="timeList" v-model="rent.auto_leadas_idopont" />
|
|
</div>
|
|
<div class="p-3">
|
|
<Button @click="next()" class="max-sm:w-full min-w-20"
|
|
v-if="rent.auto_leadas_datum && rent.auto_leadas_idopont">Tovább</Button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const { rent } = storeToRefs(useAuthStore())
|
|
definePageMeta({
|
|
rentStep: 3,
|
|
title: 'Autóbérlés vége'
|
|
})
|
|
|
|
// Helyi Date objektum a DatePicker-hez
|
|
const selectedDate = ref<Date | null>(rent.value.auto_leadas_datum ? new Date(rent.value.auto_leadas_datum) : null)
|
|
|
|
// Min dátum a felvételi dátumból
|
|
const minDate = computed(() => {
|
|
return rent.value.auto_felvetel_datum ? new Date(rent.value.auto_felvetel_datum) : new Date()
|
|
})
|
|
|
|
// Ha változik a kiválasztott dátum, szöveggé alakítjuk (YYYY-MM-DD)
|
|
watch(selectedDate, (newDate) => {
|
|
if (newDate) {
|
|
const year = newDate.getFullYear()
|
|
const month = String(newDate.getMonth() + 1).padStart(2, '0')
|
|
const day = String(newDate.getDate()).padStart(2, '0')
|
|
rent.value.auto_leadas_datum = `${year}-${month}-${day}`
|
|
} else {
|
|
rent.value.auto_leadas_datum = null
|
|
}
|
|
})
|
|
|
|
function next() {
|
|
navigateTo('/rent/place-to')
|
|
}
|
|
const rentDays = computed(() => {
|
|
// Dátum stringek összehasonlítása
|
|
const kezdoDatumObj = new Date(rent.value.auto_felvetel_datum);
|
|
const vegDatumObj = new Date(rent.value.auto_leadas_datum);
|
|
|
|
// A két dátum közötti különbség millimásodpercben
|
|
const kulonbsegMs = vegDatumObj.getTime() - kezdoDatumObj.getTime();
|
|
|
|
// Átváltás napokba (egy nap 86400000 millimásodperc)
|
|
const napok = Math.floor(kulonbsegMs / 86400000);
|
|
|
|
return napok + 1;
|
|
})
|
|
const timeList = computed(() => {
|
|
let a = []
|
|
for (let i = 0; i < 24; i++) {
|
|
if (rent.value.auto_leadas_datum == rent.value.auto_felvetel_datum) {
|
|
if (rent.value.auto_felvetel_idopont < i + ':00') {
|
|
a.push(i + ':00')
|
|
}
|
|
if (rent.value.auto_felvetel_idopont < i + ':30') {
|
|
a.push(i + ':30')
|
|
}
|
|
} else {
|
|
a.push(i + ':00')
|
|
a.push(i + ':30')
|
|
}
|
|
|
|
}
|
|
return a
|
|
})
|
|
|
|
</script>
|
|
|
|
<style></style> |