<script setup lang="ts">
/** importComponents*/
import TabStructure from "@/modules/13_salary/components/02_salaryEmployee/TabStructure.vue"; //ชื่อผังบัญชีอัตราค่าจ้าง
import TabCriteris from "@/modules/13_salary/components/02_salaryEmployee/TabCriteria.vue"; //หลักเกณฑ์

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

/** use*/
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" class="q-pt-none">
        <div class="q-pa-xs">
          <TabStructure />
        </div>
      </q-tab-panel>

      <q-tab-panel name="criteria" class="q-pt-none">
        <div class="q-pa-xs">
          <TabCriteris />
        </div>
      </q-tab-panel>
    </q-tab-panels>
  </q-card>
</template>
