<script setup>
import SalaryRow from '@/components/viewer/SalaryRow.vue';

const salaries = [
  {
    empcode: 'EMP001',
    empname: 'Nguyễn Văn An',
    basic_salary: '25000000.00',
    commission: '5000000.00',
    kpi_bonus: '3000000.00',
    deduction: '1500000.00',
    net: '31500000.00',
  },
  {
    empcode: 'EMP002',
    empname: 'Trần Thị Bình',
    basic_salary: '15000000.00',
    commission: '2000000.00',
    kpi_bonus: '1500000.00',
    deduction: '800000.00',
    net: '17700000.00',
  },
  {
    empcode: 'EMP003',
    empname: 'Lê Hoàng Cường',
    basic_salary: '12000000.00',
    commission: '3500000.00',
    kpi_bonus: '1000000.00',
    deduction: '600000.00',
    net: '15900000.00',
  },
  {
    empcode: 'EMP004',
    empname: 'Phạm Thị Dung',
    basic_salary: '20000000.00',
    commission: '0',
    kpi_bonus: '2000000.00',
    deduction: '1000000.00',
    net: '21000000.00',
  },
];
</script>
<template>
  <div class="columns">
    <div class="column is-3">
      <div class="card">
        <div class="card-content">
          <p>Lương cơ bản</p>
          <p class="fsb-21 mt-5">72M</p>
          <p class="fs-13 has-text-grey">VNĐ</p>
        </div>
      </div>
    </div>
    <div class="column is-3">
      <div class="card">
        <div class="card-content">
          <p>Hoa hồng</p>
          <p class="fsb-21 mt-5">11M</p>
          <p class="fs-13 has-text-grey">VNĐ</p>
        </div>
      </div>
    </div>
    <div class="column is-3">
      <div class="card">
        <div class="card-content">
          <p>Thưởng KPI</p>
          <p class="fsb-21 mt-5">8M</p>
          <p class="fs-13 has-text-grey">VNĐ</p>
        </div>
      </div>
    </div>
    <div class="column is-3">
      <div class="card">
        <div class="card-content">
          <p>Tổng chi lương</p>
          <p class="fsb-21 mt-5">86M</p>
          <p class="fs-13 has-text-grey">VNĐ</p>
        </div>
      </div>
    </div>
  </div>
  <div>
    <p class="mb-4">Cấu hình tính lương</p>
    <div class="columns">
      <div class="column is-4">
        <div class="card">
          <div class="card-content">
            <p class="fsb-18 mb-1">Lương cứng</p>
            <p class="has-text-grey fs-14">
              Lương cơ bản theo vị trí và cấp bậc
            </p>
            <button class="button is-small mt-2">Cấu hình</button>
          </div>
        </div>
      </div>
      <div class="column is-4">
        <div class="card">
          <div class="card-content">
            <p class="fsb-18 mb-1">Hoa hồng doanh số</p>
            <p class="has-text-grey fs-14">% hoa hồng theo doanh số bán hàng</p>
            <button class="button is-small mt-2">Cấu hình</button>
          </div>
        </div>
      </div>
      <div class="column is-4">
        <div class="card">
          <div class="card-content">
            <p class="fsb-18 mb-1">Thưởng KPI</p>
            <p class="has-text-grey fs-14">Thưởng đạt và vượt KPI</p>
            <button class="button is-small mt-2">Cấu hình</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <p class="my-4">Bảng lương tháng 2026/02</p>
    <table class="table is-bordered is-narrow is-hoverable is-fullwidth fs-14">
      <thead>
        <tr>
          <th>Mã NV</th>
          <th>Họ tên</th>
          <th>Lương cơ bản</th>
          <th>Hoa hồng</th>
          <th>Thưởng KPI</th>
          <th>Khấu trừ</th>
          <th>Thực lãnh</th>
          <th>Thao tác</th>
        </tr>
      </thead>
      <tbody>
        <SalaryRow v-for="row in salaries" key="row.empcode" :row="row" />
      </tbody>
    </table>
  </div>
</template>
<style scoped>
th:nth-child(3),
th:nth-child(4),
th:nth-child(5),
th:nth-child(6),
th:nth-child(7),
th:nth-child(8) {
  text-align: right;
}
</style>
