<script setup lang="ts">
import { format } from 'date-fns'
import type { Order } from '@/models/Order'
import OrderOms from '@/views/pages/order/view/OrderOms.vue'

const props = defineProps<Props>()

interface Props {
  orderData: Order
}
</script>

<template>
  <VRow>
    <VCol cols="12">
      <VCard
        v-if="props.orderData"
        class="mb-4"
      >
        <!-- 👉 Order Details -->
        <VCardText>
          <div class="text-disabled text-uppercase text-sm">
            {{ $t('Order Details') }}
          </div>
          <VList class="card-list mt-2">
            <VListItem>
              <div class="text-body-1">
                <span class="font-weight-bold me-2">{{ $t('Origin request') }}:</span>
                <span>
                  {{ props.orderData.common.requestingLocationCd }} / {{ props.orderData.common.requestingSystemCd }}
                </span>
              </div>
            </VListItem>
            <VListItem>
              <div class="text-body-1">
                <span class="font-weight-bold me-2">{{ $t('Cust Id') }}:</span>
                <span>
                  {{ props.orderData.common.customerId }}
                </span>
              </div>
            </VListItem>
            <VListItem>
              <div class="text-body-1">
                <span class="font-weight-bold me-2">{{ $t('Created') }}:</span>
                <span>
                  {{ format(props.orderData.common.fdateCreation, "EEEE d MMMM yyyy HH:mm:ss") }}
                </span>
              </div>
            </VListItem>
            <VListItem>
              <div class="text-body-1">
                <span class="font-weight-bold me-2">{{ $t('Ship for Pickup') }}:</span>
                <span>
                  {{ props.orderData.common.shipforpickupLocationCd }} /  {{ props.orderData.common.shipforpickupSystemCd }}
                </span>
              </div>
            </VListItem>
          </VList>
          <div class="text-disabled text-uppercase mt-4 text-sm">
            {{ $t('Transaction') }}
          </div>
          <VList class="card-list mt-2">
            <VListItem>
              <div class="text-body-1">
                <span class="font-weight-bold me-2">No:</span>
                <span>
                  {{ props.orderData.common.transaction.transactionNo }}
                </span>
              </div>
            </VListItem>
            <VListItem>
              <div class="text-body-1">
                <span class="font-weight-bold me-2">Date:</span>
                <span>
                  {{ format(props.orderData.common.transaction.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}
                </span>
              </div>
            </VListItem>
            <VListItem>
              <div class="text-body-1">
                <span class="font-weight-bold me-2">Type:</span>
                <span>
                  {{ props.orderData.common.transaction.transactionTypeDescription }}
                </span>
              </div>
            </VListItem>
          </VList>
        </VCardText>
      </VCard>

      <!-- 👉 OMS Proximis -->
      <OrderOms :order-data="orderData" />
    </VCol>
  </VRow>
</template>

<style lang="scss">
.card-list {
  --v-card-list-gap: 0.75rem;
}

.text-capitalize {
  text-transform: capitalize !important;
}
</style>
