<script lang="ts" setup>
defineProps<{
  data: {
    no: number;
    refNo: string;
    fullName: string;
    birthDate: string;
    age: string;
    nationality: string;
    docExpireDate: string;
  };
  color?: 'male' | 'female' | 'none';
}>();
</script>
<template>
  <div
    class="surface-1 rounded row bordered worker-item items-center"
    :class="{
      'worker-item__male': color === 'male',
      'worker-item__female': color === 'female',
    }"
    style="padding-block: var(--size-2)"
  >
    <div class="col-1 text-center">{{ data.no }}</div>
    <div class="col-2 text-center">{{ data.refNo }}</div>
    <div class="col-3">{{ data.fullName }}</div>
    <div class="col-1">{{ data.birthDate }}</div>
    <div class="col-1 text-center">{{ data.age }}</div>
    <div class="col-1 text-center">{{ data.nationality }}</div>
    <div class="col-2 text-center">{{ data.docExpireDate }}</div>
    <div class="col-1 text-center">
      <q-btn
        id="btn-delete-work"
        icon="mdi-trash-can-outline"
        dense
        flat
        round
        size="12px"
        color="negative"
        @click="$emit('delete')"
      />
    </div>
  </div>
</template>

<style scoped>
.worker-item {
  --side-color: var(--brand-1);
  position: relative;
  overflow-x: hidden;

  &.worker-item__female {
    --side-color: hsl(var(--gender-female));
  }

  &.worker-item__male {
    --side-color: hsl(var(--gender-male));
  }
}

.worker-item::before {
  position: absolute;
  content: ' ';
  left: 0;
  width: 7px;
  top: 0;
  bottom: 0;
  background: var(--side-color);
}
</style>
