<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";

/** importComponents*/
import TreeView from "@/modules/16_positionEmployee/components/TreeView.vue";

/** importStore*/
import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
import { useCounterMixin } from "@/stores/mixin";

/** use*/
const $q = useQuasar();
const { showLoader, hideLoader, messageError } = useCounterMixin();
const store = usePositionEmp();

/** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
async function fetchOrganizationActive() {
  showLoader();
  await http
    .get(config.API.activeOrganization)
    .then((res) => {
      const data = res.data.result;
      if (data) {
        store.fetchDataActive(data);
      }
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** lifecycleHook */
onMounted(async () => {
  await fetchOrganizationActive();
});
</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-card class="my-card">
      <q-card-section style="padding: 0px">
        <TreeView />
      </q-card-section>
    </q-card>
  </q-card>
</template>

<style scoped></style>
