<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";

import { OrgChart } from "bma-org-chart";
import "bma-org-chart/org-chart.css";
import { useCounterMixin } from "@/stores/mixin";

import chartData from "@/assets/orgChartData";

const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError } = mixin;
const $q = useQuasar(); // show dialog

const dataSource = ref(chartData);
// const dataSource = ref() // ข้อมูล Chart

const rootOrgID = ref(); // org id ของ root ตัวปัจจุบันที่เลือกอยู่
const dataSourceLock = ref(); // ข้อมูลตั้งต้นของ Chart ใช้ให้กดกลับไปที่ home
const chartRef = ref(); // อ้างอิงไปที่ตัว chart
const savePNG = () => {
  chartRef.value.savePNG();
};
const savePDF = () => {
  chartRef.value.savePDF();
};

onMounted(async () => {
  await fetchTreeRoot();
  await fetchOrgChart();
});

/**
 * อ่าน Root ของข้อมูลทั้งหมดก่อน
 */
const fetchTreeRoot = async () => {
  showLoader();
  let urlRequest = config.API.chartGetTreeRoot;
  await http
    .get(urlRequest)
    .then((response) => {
      if (response.data.result.length > 0) {
        rootOrgID.value = response.data.result[0].organizationId;
      }
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

const fetchOrgChart = async () => {
  showLoader();
  let urlRequest = config.API.chartGetOrg(rootOrgID.value);
  await http
    .get(urlRequest)
    .then((response) => {
      if (response.data.result.length > 0) {
        dataSource.value = response.data.result[0];
        if (dataSourceLock.value === undefined)
          dataSourceLock.value = dataSource.value;
      }
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

/**
 * เมื่อมีการคลิกที่ Chart ให้อ่าน ID ของหน่วยงานที่ถูกคลิก แล้วดึงข้อมูล Chart ของหน่วยงานนั้น ๆ จาก API
 * @param data
 */
const refreshChart = async (data: any) => {
  if (data.value !== undefined) rootOrgID.value = data.value;
  else rootOrgID.value = data;
  if (rootOrgID.value !== 0) await fetchOrgChart();
  if (data.value !== undefined) data.value = 0;
};
</script>

<template>
  <!-- <div class="toptitle text-dark col-12 row items-center">แผนภูมิองค์กร</div> -->
  <div class="text-dark">
    <q-card flat bordered class="col-12 q-mt-sm">
      <div class="q-pa-sm">
        <q-btn flat round color="primary" @click="savePNG()" icon="mdi-image">
          <q-tooltip> ดาวน์โหลด PNG </q-tooltip>
        </q-btn>
        <q-btn
          flat
          round
          color="red-7"
          @click="savePDF()"
          icon="mdi-file-pdf-box"
        >
          <q-tooltip> ดาวน์โหลด PDF </q-tooltip>
        </q-btn>
      </div>
      <q-separator />
      <div style="overflow-x: auto; overflow-y: auto" class="q-pt-md">
        <OrgChart
          style="height: 70vh"
          ref="chartRef"
          class="org"
          :dataSource="dataSource"
          @onElementClick="refreshChart"
        />
      </div>
    </q-card>
  </div>
</template>

<style>
.org .section-list {
  padding: 15px !important;
}

.org .section-list .column-content .header {
  font-size: 1rem;
  line-height: 1.2rem;
  font-weight: 500 !important;
}
.org .section-list .column-content .subheader {
  font-weight: 500 !important;
}

.org .section-list .column-content .caption {
  font-size: 0.9rem;
  line-height: 1.2rem;
  font-weight: 400 !important;
}

.org .element-container .column-content p {
  padding-top: 3px !important;
}

.org .element-container .column-side .side-button {
  background-size: 14px;
}
</style>
