<script setup>
const props = defineProps({
  params: Object
})
console.log(props.params.data)
</script>

<template>
  <div class="d-inlineFlex items-center gap-5px">
    <div class="tags are-small">
      <span alt="Noch nicht gedruckt" v-if="!props.params.data.isPrinted && !props.params.data.trackingNo" class="tag is-info">Erstellt</span>
      <span alt="Gedruckt. Wird gepickt." v-if="props.params.data.isPrinted && !props.params.data.trackingNo" class="tag is-warning">In Bearbeitung</span>
      <span v-if="props.params.data.IsCommissioned || props.params.data.trackingNo" class="tag is-success">Verschickt</span>

<!--      <span v-if="props.params.data.docStatus == 'Completed'" class="tag is-success">In Bearbeitung</span>-->
<!--      <span v-if="props.params.data.docStatus == 'Drafted'" class="tag is-info">Entwurf</span>-->
<!--      <span v-if="props.params.data.docStatus == 'Closed'" class="tag is-dark">Geschloßen</span>-->
<!--      <span v-if="props.params.data.docStatus == 'Voided'" class="tag is-warning">Gelöscht</span>-->


      <!--    <span v-else >{{ props.params.data.docStatus }}</span>-->
    </div>
  </div>
</template>

<style scoped>
.tag {
  //width: 40px;
  height: 20px;
  color: white;
}


.greenbt {
  background-color: #00a500;
  border: 2px solid #00a500;
}

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

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

</style>