<script setup>
const props = defineProps({
  row: Object,
});

function shortenCurrency(amount) {
  return new Intl.NumberFormat('en', { notation: 'compact' }).format(
    Number(amount),
  );
}
</script>
<template>
  <tr>
    <td>{{ row.empcode }}</td>
    <td>{{ row.empname }}</td>
    <td>{{ shortenCurrency(row.basic_salary) }}</td>
    <td>{{ shortenCurrency(row.commission) }}</td>
    <td>{{ shortenCurrency(row.kpi_bonus) }}</td>
    <td>{{ shortenCurrency(row.deduction) }}</td>
    <td>{{ shortenCurrency(row.net) }}</td>
    <td>
      <button class="button is-white">
        <span class="icon">
          <SvgIcon
            v-bind="{ name: 'eye-autodesk-on.svg', size: 18, type: 'primary' }"
          />
        </span>
      </button>
    </td>
  </tr>
</template>
<style scoped>
td {
  vertical-align: middle;
}

td:nth-child(3),
td:nth-child(4),
td:nth-child(5),
td:nth-child(6),
td:nth-child(7),
td:nth-child(8) {
  text-align: right;
}
</style>
