<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="normalizeTableColumns(columns)"
        :data="props.item.times"
    >
      <template #state-cell="{ row }">
                <span
                    v-if="row.original.state === 'Entwurf'"
                    class="text-error-500"
                >{{ row.original.state }}</span>
        <span
            v-if="row.original.state === 'Eingereicht'"
            class="text-cyan-500"
        >{{ row.original.state }}</span>
        <span
            v-if="row.original.state === 'Bestätigt'"
            class="text-primary-500"
        >{{ row.original.state }}</span>
      </template>
      <template #user-cell="{ row }">
        {{ row.original.profile ? row.original.profile.fullName : "" }}
      </template>

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

      </template>
      <template #project-cell="{ row }">
        {{ row.original.project ? row.original.project.name : "" }}
      </template>
      <template #empty>
        <TableEmptyState label="Noch keine Einträge" />
      </template>
    </UTable>
  </UCard>

</template>

<style scoped>

</style>
