<script setup>
import FormatNumber from '@/components/datatable/format/FormatNumber.vue';
import EmployeeInfoBlock from '@/components/viewer/EmployeeInfoBlock.vue';

const props = defineProps({
  row: Object,
});
</script>
<template>
  <div>
    <p class="fs-17 font-semibold mb-3">Thông tin cá nhân</p>
    <div class="fixed-grid">
      <div class="grid">
        <EmployeeInfoBlock label="Mã nhân viên">{{
          row.code
        }}</EmployeeInfoBlock>
        <EmployeeInfoBlock label="Họ và tên">{{ row.name }}</EmployeeInfoBlock>
        <EmployeeInfoBlock label="Email">{{ row.email }}</EmployeeInfoBlock>
        <EmployeeInfoBlock label="Số điện thoại">{{
          row.phone
        }}</EmployeeInfoBlock>
        <EmployeeInfoBlock label="Địa chỉ">{{ row.address }}</EmployeeInfoBlock>
      </div>
    </div>
    <p class="fs-17 font-semibold mb-3">Thông tin công việc</p>
    <div class="fixed-grid">
      <div class="grid">
        <EmployeeInfoBlock label="Phòng ban">{{
          row.department
        }}</EmployeeInfoBlock>
        <EmployeeInfoBlock label="Chức vụ">{{ row.title }}</EmployeeInfoBlock>
        <EmployeeInfoBlock label="Showroom">{{
          row.showroom
        }}</EmployeeInfoBlock>
        <EmployeeInfoBlock label="Ngày vào làm">{{
          row.start_date
        }}</EmployeeInfoBlock>
      </div>
    </div>
    <p class="fs-17 font-semibold mb-3">Hợp đồng lao động</p>
    <div class="fixed-grid">
      <div class="grid">
        <EmployeeInfoBlock label="Loại hợp đồng">{{
          row.contract_type
        }}</EmployeeInfoBlock>
        <EmployeeInfoBlock label="Ngày hết hạn">{{
          row.contract_exp
        }}</EmployeeInfoBlock>
        <EmployeeInfoBlock label="Lương cơ bản">
          <FormatNumber :value="row.contract_basic_salary" /> VNĐ
        </EmployeeInfoBlock>
        <EmployeeInfoBlock label="Trạng thái">
          <span class="tag">{{ row.status }}</span>
        </EmployeeInfoBlock>
      </div>
    </div>
  </div>
</template>
