<script setup lang="ts">
import { ref } from "vue";
import { useRoute } from "vue-router";

import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";

/** importComponents*/
import PositionSalary from "@/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue"; //ตำแหน่งเงินเดือน
import NotReceiveSalary from "@/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue"; //วันที่ไม่ได้รับเงินเดิอน

const route = useRoute();
const storeRegistry = useRegistryNewDataStore();

const salaryText = ref<string>(
  route.name === "registryNewByid" ? "เงินเดือน" : "ค่าจ้าง"
);

const tab = ref<string>("1");
</script>
<template>
  <div class="row items-center q-my-md">
    <div class="text-dark row items-center q-px-md">
      <q-icon name="mdi-account" class="q-mr-md" size="22px" />
      <div class="text-subtitle1 text-weight-bold">
        {{ `ข้อมูล${salaryText}` }}
      </div>
    </div>
  </div>

  <q-separator />
  <q-tabs
    v-model="tab"
    active-color="blue-8"
    align="left"
    bordered
    narrow-indicator
    indicator-color="transparent"
    dense
    class="text-grey q-pl-sm"
  >
    <q-tab name="1" :label="salaryText" />
    <q-tab name="2" :label="`บันทึกวันที่ไม่ได้รับเงิน${salaryText}ฯ`" />
  </q-tabs>
  <q-separator />

  <q-tab-panels v-model="tab" animated>
    <q-tab-panel name="1">
      <PositionSalary
        :is-leave="storeRegistry.isLeave"
        :citizen-id="storeRegistry.citizenId"
      />
    </q-tab-panel>
    <q-tab-panel name="2">
      <NotReceiveSalary :is-leave="storeRegistry.isLeave" />
    </q-tab-panel>
  </q-tab-panels>
</template>

<style scoped></style>
