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

const locationIndicator = computed(() => {
  const shipName = props.params.data.partnerLocation?.Name || ''
  const shipAddress = props.params.data.partnerLocation?.C_Location_ID?.identifier || ''

  const billName = props.params.data.billPartnerLocation?.Name || ''
  const billAddress = props.params.data.billPartnerLocation?.C_Location_ID?.identifier || ''
  return (shipName == billName && shipAddress == billAddress) ? true : false
})


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 v-if="props.params.data.docStatus == 'Completed'" title="Auftrag Vollständig" class="tf-icon ti ti-circle-check ti-md cursor-pointer" style="color: #00a500;"></span>
    <span v-else-if="props.params.data.docStatus == 'Drafted'" title="Auftrag im Entwurf" class="tf-icon ti ti-alert-circle ti-md cursor-pointer" style="color: grey;"></span>
    <span v-else title="Auftrag Storniert" class="tf-icon ti ti-alert-circle ti-md cursor-pointer" style="color: red;"></span>


    <span v-if="props.params.data.priorityRuleId == 5" title="Normaler Versand" class="tf-icon ti ti-circle ti-md cursor-pointer" style="color: #00a500;"></span>
    <span v-else title="Schneller Versand" class="tf-icon ti ti-bolt ti-md cursor-pointer" style="color: red;"></span>

    <span v-if="locationIndicator" title="Same Address" class="tf-icon ti ti-circle-check ti-md cursor-pointer" style="color: #00a500;"></span>
    <span v-else title="Different Address" class="tf-icon ti ti-alert-circle ti-md cursor-pointer" style="color: #dc3545;"></span>

    <span title="Lieferschein Erstellt" class="tf-icon ti ti-clipboard-list ti-md cursor-pointer" :style="{color: shipment?.id ? '#00a500' : 'grey'}"></span>
<!--    <span title="Kommissioniert" class="tf-icon ti ti-package ti-md cursor-pointer" :style="{color: shipment?.IsCommissioned ? '#00a500' : 'inherit'}"></span>-->
    <span title="Verschickt" class="tf-icon ti ti-truck ti-md cursor-pointer" :style="{color: shipment?.TrackingNo ? '#00a500' : 'grey'}"></span>
<!--    <span title="Tracking übertragen" 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>