<script setup lang="ts">
import TabStructure from "@/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue";
import TabCriteris from "@/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue";

import { useSalaryEmployeeChartDataStore } from "@/modules/13_salary/store/SalaryEmployeeChart";

const store = useSalaryEmployeeChartDataStore();
</script>

<template>
  <div class="row items-center">
    <div class="toptitle text-dark row items-center q-py-xs">
      ผังบัญชีค่าจ้างลูกจ้างประจำ
    </div>
  </div>

  <q-card flat bordered>
    <q-tabs
      v-model="store.mainTab"
      dense
      align="left"
      class="text-grey"
      active-color="primary"
      indicator-color="primary"
    >
      <q-tab name="structure" label="ชื่อผังบัญชีอัตราค่าจ้าง" />
      <q-tab name="criteria" label="หลักเกณฑ์" />
    </q-tabs>
    <q-separator />

    <q-tab-panels v-model="store.mainTab" animated>
      <q-tab-panel name="structure">
        <TabStructure />
      </q-tab-panel>

      <q-tab-panel name="criteria">
        <TabCriteris />
      </q-tab-panel>
    </q-tab-panels>
  </q-card>
</template>
