<script setup>
import dayjs from "dayjs";

const props = defineProps({
  queryStringData: {
    type: String
  },
  item: {
    type: Object,
    required: true
  },
  topLevelType: {
    type: String,
    required: true
  },
  platform: {
    type: String,
    required: true
  }
})


const setup = async () => {

}

setup()

const columns = [
  {
    key:"state",
    label: "Status",
  },
  {
    key: "user",
    label: "Benutzer",
  },
  {
    key:"startDate",
    label:"Start",
  },
  {
    key: "endDate",
    label: "Ende",
  },
  {
    key: "duration",
    label: "Dauer",
  },
  {
    key:"type",
    label:"Typ",
  },
  {
    key: "project",
    label: "Projekt",
  },
  {
    key: "notes",
    label: "Notizen",
  }
]

</script>

<template>
  <UCard class="mt-5">
    <UTable
        class="mt-3"
        :columns="columns"
        :rows="props.item.times"
        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
    >
      <template #state-data="{row}">
                <span
                    v-if="row.state === 'Entwurf'"
                    class="text-rose-500"
                >{{row.state}}</span>
        <span
            v-if="row.state === 'Eingereicht'"
            class="text-cyan-500"
        >{{row.state}}</span>
        <span
            v-if="row.state === 'Bestätigt'"
            class="text-primary-500"
        >{{row.state}}</span>
      </template>
      <template #user-data="{row}">
        {{row.profile ? row.profile.fullName : "" }}
      </template>

      <template #startDate-data="{row}">
        {{dayjs(row.startDate).format("DD.MM.YY HH:mm")}}
      </template>
      <template #endDate-data="{row}">
        {{dayjs(row.endDate).format("DD.MM.YY HH:mm")}}
      </template>
      <template #duration-data="{row}">
        {{Math.floor(dayjs(row.endDate).diff(row.startDate, "minutes")/60)}}:{{String(dayjs(row.endDate).diff(row.startDate, "minutes") % 60).padStart(2,"0")}} h

      </template>
      <template #project-data="{row}">
        {{row.project ? row.project.name : "" }}
      </template>
    </UTable>
  </UCard>

</template>

<style scoped>

</style>
