<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>{{ row.title }}</td>
    <td>{{ shortenCurrency(row.target) }}</td>
    <td>{{ shortenCurrency(row.reached) }}</td>
    <td>
      <div class="is-flex is-align-items-center is-gap-1">
        <progress
          class="progress is-small is-primary m-0"
          style="width: 100px; background-color: #ddd !important"
          :value="row.progress"
          max="100"
        ></progress>
        <span class="fs-13">{{ row.progress }}%</span>
      </div>
    </td>
    <td>{{ row.evaluation }}</td>
    <td>
      <button class="button">
        <span class="icon">
          <SvgIcon v-bind="{ name: 'pen1.svg', size: 16, type: 'primary' }" />
        </span>
      </button>
    </td>
  </tr>
</template>
<style scoped>
td {
  vertical-align: middle;
}

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