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

const shipment = ref({})
const getShipment = async () => {
  if(props.params.data.id) {
    const res = await $fetch(`/api/inouts/${props?.params?.data?.id}/order`)
    if(res) {
      shipment.value = res
    }
  }
}
onMounted(getShipment)
watch(() => getShipment)
// console.log(props.params.data)
//console.log(props.params.data.minout)
console.log(props?.params?.data?.docStatus)
</script>

<template>
  <div class="d-inlineFlex items-center gap-5px">
    <div class="tags are-small">
      <span v-if="props?.params?.data?.docStatus === 'Completed' && !shipment?.DocStatus?.id && !shipment?.TrackingNo" class="tag is-rounded" style="margin-top: 3px; height: 19px; min-width: 90px; font-weight: bold; text-align: left; padding-left: 8px; padding-right: 8px; display: inline-block; background-color: lightskyblue; color: royalblue;"><i style="font-size: 14px; color: royalblue; margin-right: 5px;"class="ti ti-plane"></i>Incoming</span>
      <span v-if="props?.params?.data?.docStatus === 'Completed' && shipment?.DocStatus?.id === 'CO' && !shipment?.TrackingNo" class="tag is-rounded" style="margin-top: 3px; height: 19px; min-width: 90px; font-weight: bold; text-align: left; padding-left: 8px; padding-right: 8px; display: inline-block; background-color: mediumpurple ; color: rebeccapurple;"><i style="font-size: 14px; color: rebeccapurple; margin-right: 5px;"class="ti ti-clock"></i>Packen</span>
      <span v-if="shipment?.DocStatus?.id === 'CO' && shipment?.TrackingNo" class="tag is-rounded" style="margin-top: 3px; height: 19px; min-width: 90px; font-weight: bold; text-align: left; padding-left: 8px; padding-right: 8px; display: inline-block; background-color: #d4f8d4; color: #2e7d32;"><i style="font-size: 14px; color: #2e7d32; margin-right: 5px;"class="ti ti-send"></i>Verschickt</span>
      <span v-if="props?.params?.data?.docStatus === 'Voided'" class="tag is-rounded" style="margin-top: 3px; height: 19px; min-width: 90px; font-weight: bold; text-align: left; padding-left: 8px; padding-right: 8px; display: inline-block; background-color: lightpink; color: palevioletred;"><i style="font-size: 14px; color: palevioletred; margin-right: 5px;"class="ti ti-ban"></i>Storniert</span>
      <span v-if="props?.params?.data?.docStatus === 'Drafted'" class="tag is-rounded" style="margin-top: 3px; height: 19px; min-width: 90px; font-weight: bold; text-align: left; padding-left: 8px; padding-right: 8px; display: inline-block; background-color: lightgrey; color: dimgrey;"><i style="font-size: 14px; color: dimgrey; margin-right: 5px; "class="ti ti-writing"></i>Entwurf</span>
      <span v-if="props?.params?.data?.docStatus === 'In Progress'" class="tag is-rounded" style="margin-top: 3px; height: 19px; min-width: 90px; font-weight: bold; text-align: left; padding-left: 8px; padding-right: 8px; display: inline-block; background-color: lightgrey; color: dimgrey;"><i style="font-size: 14px; color: dimgrey; margin-right: 5px; "class="ti ti-edit"></i>Geöffnet</span>

    </div>
  </div>
</template>