<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(() => props.params, getShipment)
</script>

<template>
  <div class="d-inlineFlex items-center gap-5px">
    <div class="tags are-small">
    <span v-if="shipment?.TrackingNo" class="tag is-white greenbt is-rounded">Versandt</span>
    <span v-if="shipment?.id" class="tag is-white orangebt is-rounded">Bearbeitung</span>
    <span v-if="!shipment?.id" class="tag bluebt is-rounded">Wartet</span>
<!--    <span v-if="props.params.data.docStatus == 'Voided'" class="tag redbt is-rounded">X</span>-->
<!--    <span v-else >{{ props.params.data.docStatus }}</span>-->
      </div>
  </div>
</template>

<style scoped>
.tag {
  width: auto;
  height: 20px;
}
.greenbt {
  color: lightgrey;
  border: 1px solid lightgrey;
}

.bluebt {
  color: lightblue;
  border: 1px solid lightblue;
  background-color: none;
}

.orangebt {
  color: orange;
  border: 1px solid orange;
  background-color: none;

}


.greybt {
  color: grey;
  border: 1px solid #00a500;
}

.redbt {
  color: red;
  border: 2px solid red;
}

</style>