<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 mt-1">
    <span class="tf-icon ti ti-clipboard-list ti-md cursor-pointer" :style="{color: shipment?.id ? '#00a500' : 'inherit'}"></span>
    <span class="tf-icon ti ti-package ti-md cursor-pointer" :style="{color: shipment?.IsCommissioned ? '#00a500' : 'inherit'}"></span>
    <span class="tf-icon ti ti-truck ti-md cursor-pointer" :style="{color: shipment?.TrackingNo ? '#00a500' : 'inherit'}"></span>
    <span class="tf-icon ti ti-user-check ti-md cursor-pointer" :style="{color: shipment?.IsCommissionedConfirmed ? '#00a500' : 'inherit'}"></span>
  </div>
</template>

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

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

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


span[class^='i-mdi'] {
  font-size: 19px;
  margin-top: 4px;
}
</style>