<script setup>
const props = defineProps({
  params: Object
})

// Get shipping_date from minout (M_InOut)
const shippingDate = computed(() => {
  const dateValue = props.params.data.minout?.[0]?.shipping_date
  if (!dateValue) return null
  return new Date(dateValue)
})

const formattedDate = computed(() => {
  if (!shippingDate.value || isNaN(shippingDate.value.getTime())) {
    return '-'
  }

  // Format as dd.mm HH:MM
  return String(shippingDate.value.getDate()).padStart(2, "0") + "." +
         String(shippingDate.value.getMonth() + 1).padStart(2, "0") + " " +
         String(shippingDate.value.getHours()).padStart(2, "0") + ":" +
         String(shippingDate.value.getMinutes()).padStart(2, "0")
})

const fullDateTitle = computed(() => {
  if (!shippingDate.value || isNaN(shippingDate.value.getTime())) {
    return 'No shipping date'
  }

  // Format as "dd.MM.YYYY - HH:MM"
  return String(shippingDate.value.getDate()).padStart(2, "0") + "." +
         String(shippingDate.value.getMonth() + 1).padStart(2, "0") + "." +
         shippingDate.value.getFullYear() + " - " +
         String(shippingDate.value.getHours()).padStart(2, "0") + ":" +
         String(shippingDate.value.getMinutes()).padStart(2, "0")
})
</script>

<template>
  <div class="d-inlineFlex items-center gap-5px">
    <div class="tags" :title="'Versanddatum: ' + fullDateTitle">
      {{ formattedDate }}
    </div>
  </div>
</template>

<style scoped>
.tags {
  font-size: 13px;
}
</style>
