<script setup lang="ts">
import { QTableProps } from 'quasar';
import KebabAction from 'components/shared/KebabAction.vue';

const props = withDefaults(
  defineProps<{
    rows: QTableProps['rows'];
    columns: QTableProps['columns'];
    flat?: boolean;
    bordered?: boolean;
    grid?: boolean;
    hideHeader?: boolean;
    buttomDownload?: boolean;
  }>(),
  {
    row: () => [],
    column: () => [],
    flat: false,
    bordered: false,
    grid: false,
    hideHeader: false,
    buttomDownload: false,
  },
);

defineEmits<{
  (e: 'view', index: number): void;
  (e: 'edit', index: number): void;
  (e: 'delete', index: number): void;
  (e: 'toggleStatus', row: typeof props.rows): void;
  (e: 'download', index: number): void;
}>();
</script>

<template>
  <q-table v-bind="props" class="full-height">
    <template v-slot:header="props">
      <q-tr
        :style="`background-color:hsla(var(--info-bg) / 0.07) `"
        :props="props"
      >
        <q-th v-for="col in props.cols" :key="col.name" :props="props">
          <span v-if="col.label === 'nameEmployee'">
            {{ $t('fullname') }}
          </span>

          <span v-if="col.label !== ''">
            {{ $t(col.label) }}
          </span>
        </q-th>
      </q-tr>
    </template>

    <template v-slot:body-cell-action="props">
      <q-td class="text-center">
        <q-btn
          icon="mdi-eye-outline"
          size="sm"
          dense
          round
          flat
          @click.stop="$emit('view', props.rowIndex)"
        />

        <q-btn
          v-if="buttomDownload && props.row.id !== undefined"
          icon="mdi-download-outline"
          size="sm"
          dense
          round
          flat
          @click.stop="$emit('download', props.rowIndex)"
        />

        <KebabAction
          hide-toggle
          :id-name="props.row.code"
          :status="props.row.status"
          @view="$emit('view', props.rowIndex)"
          @edit="$emit('edit', props.rowIndex)"
          @delete="$emit('delete', props.rowIndex)"
          @change-status="$emit('toggleStatus', props.row)"
        />
      </q-td>

      <slot name="dialog" :index="props.rowIndex" :row="props.row"></slot>
    </template>
  </q-table>
</template>

<style lang="less" scoped></style>
