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

const showEmployeeInfoModal = ref();

function toggleModal() {
  showEmployeeInfoModal.value = {
    component: 'viewer/EmployeeInfo',
    width: '600px',
    height: 'auto',
    vbind: {
      row: props.row,
    },
    title: 'Thông tin chi tiết nhân viên',
  };
}
</script>
<template>
  <tr>
    <td>{{ row.code }}</td>
    <td>
      <div>
        <p>{{ row.name }}</p>
        <p class="has-text-grey fs-13">{{ row.email }}</p>
      </div>
    </td>
    <td>{{ row.department }}</td>
    <td>{{ row.title }}</td>
    <td>{{ row.showroom }}</td>
    <td>
      <span class="tag has-text-secondary">{{ row.status }}</span>
    </td>
    <td>
      <div class="is-flex is-gap-1">
        <button @click="toggleModal" class="button is-white p-1">
          <SvgIcon v-bind="{ name: 'eye.svg', type: 'success', size: 17 }" />
        </button>
        <button class="button is-white p-1">
          <SvgIcon v-bind="{ name: 'pen1.svg', type: 'success', size: 17 }" />
        </button>
        <button class="button is-white p-1">
          <SvgIcon v-bind="{ name: 'bin.svg', type: 'success', size: 17 }" />
        </button>
      </div>
    </td>
    <Modal
      v-bind="showEmployeeInfoModal"
      v-if="showEmployeeInfoModal"
      @close="showEmployeeInfoModal = undefined"
    />
  </tr>
</template>
