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

/** importType*/
import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
import type { DataPerson } from "@/modules/04_registryNew/interface/response/Main";
import type { FormFilter } from "@/modules/04_registryNew/interface/request/Main";

/** importComponents*/
import TableView from "@/modules/04_registryNew/components/TableView.vue";
import avatar from "@/assets/avatar_user.jpg";

/** importStore*/
import { useRegistryNewDataStore } from "@/modules/04_registryNew/store";
import { useCounterMixin } from "@/stores/mixin";

const $q = useQuasar();
const store = useRegistryNewDataStore();
const { showLoader, hideLoader, messageError } = useCounterMixin();

const mode = ref<"table" | "card">("table");

const isShowFilter = ref<boolean>(false);
const isShowBtnFilter = ref<boolean>(true);
const empType = ref<string>("officer"); // ประเภท ขรก./ลูกจ้างประจำ/ลูกจ้างชั่วคราว
const labelOption = reactive({
  type: "ข้าราชการ กทม.สามัญ",
  posType: "ทั้งหมด",
  posLevel: "ทั้งหมด",
  retireYear: "",
});

const searchType = ref<string>("fullName");
const formFilter = reactive<FormFilter>({
  page: 1,
  pageSize: 12,
  keyword: "",
  type: "",
  posType: "",
  posLevel: "",
  retireYear: "",
  rangeYear: { min: 0, max: 60 },
  isShowRetire: null,
  isProbation: null,
});
const maxPage = ref<number>(1);

const dataPersonMain = ref<DataPerson[]>([]);

const conditionTotal = computed(() => {
  let num: string = "";
  if (formFilter.isProbation && formFilter.isShowRetire) {
    num = "(2)";
  } else if (formFilter.isProbation || formFilter.isShowRetire) {
    num = "(1)";
  } else "";

  return num;
});

/** function เรียกข้อมูลประเภทตำแหน่ง*/
function fetchType() {
  http
    .get(config.API.orgPosType)
    .then((res) => {
      store.fetchType(res.data.result);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** function เรียกข้อมูลระดับตำแหน่ง*/
function fetchLevel() {
  http
    .get(config.API.orgPosLevel)
    .then((res) => {
      store.fetchLevel(res.data.result);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

function fetchOptionGroup() {
  showLoader();
  http
    .get(config.API.orgEmployeeType)
    .then((res) => {
      store.fetchType(res.data.result);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

function fetchLevelGroup() {
  showLoader();
  http
    .get(config.API.orgEmployeelevel)
    .then((res) => {
      store.fetchLevel(res.data.result);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

function fetchYearOption() {
  if (store.yearOps.length === 0) {
    const options = [];
    const year = new Date().getFullYear();

    for (let i = year - 40; i <= year + 60; i++) {
      options.push({ id: i.toString(), name: (i + 543).toString() });
    }
    if (options) {
      store.yearOps.push(...options);
    }
  }
}

const total = ref<number>(0);
async function fetchDataPerson(search: boolean = false) {
  showLoader();

  let queryParams: any = {
    page: formFilter.page,
    pageSize: formFilter.pageSize,
  };

  if (search) {
    queryParams = Object.assign({}, queryParams, {
      searchField: searchType.value,
      searchKeyword: formFilter.keyword,
    });
  }

  if (labelOption.posLevel != "ทั้งหมด") {
    queryParams = Object.assign({}, queryParams, {
      posLevel: labelOption.posLevel,
    });
  }

  if (labelOption.posType != "ทั้งหมด") {
    queryParams = Object.assign({}, queryParams, {
      posType: labelOption.posType,
    });
  }

  if (formFilter.isProbation != null) {
    queryParams.isProbation = formFilter.isProbation;
  }

  if (formFilter.isShowRetire != null) {
    queryParams.isRetire = formFilter.isShowRetire;
  }

  if (empType.value !== "officer") {
    queryParams.type = empType.value;
  }

  http
    .get(
      config.API.registryNew(empType.value !== "officer" ? "-employee" : ""),
      { params: queryParams }
    )
    .then((res) => {
      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
      dataPersonMain.value = res.data.result.data;
      total.value = res.data.result.total;
      insertAvatar(res.data.result.data);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

function insertAvatar(items: DataPerson[]) {
  items.map((x: any, index: number) => {
    if (x.avatarName != null) {
      http
        .get(
          config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", x.id, x.avatarName)
        )
        .then((img) => {
          dataPersonMain.value[index] = {
            ...x,
            avatar: img.data.downloadUrl,
          };
        })
        .catch(() => {
          dataPersonMain.value[index] = {
            ...x,
            avatar: avatar,
          };
        });
    } else {
      dataPersonMain.value[index] = {
        ...x,
        avatar: avatar,
      };
    }
  });
}

function onClickShowFilter() {
  isShowFilter.value = !isShowFilter.value;
  isShowBtnFilter.value = false;
  if (isShowFilter.value) {
    fetchType();
    fetchLevel();
    fetchYearOption();
  }
}

function onclickSearch() {
  isShowFilter.value = true;
  isShowBtnFilter.value = false;
  if (isShowFilter.value) {
    fetchType();
    fetchLevel();
    fetchYearOption();
  }
  formFilter.keyword = formFilter.keyword === null ? "" : formFilter.keyword;
  fetchDataPerson(true);
}

function selectType(item: DataOption) {
  labelOption.type = item.name;
  empType.value = item.id;

  labelOption.posType = "ทั้งหมด";
  labelOption.posLevel = "ทั้งหมด";
  if (item.id !== "officer") {
    formFilter.isShowRetire = null;
    formFilter.isProbation = null;
    fetchOptionGroup();
    fetchLevelGroup();
  } else {
    fetchType();
    fetchLevel();
  }

  fetchDataPerson(true);
}

function selectPosType(item: DataOption) {
  labelOption.posType = item.name;
  fetchDataPerson();
}

function selectPosLevel(item: DataOption) {
  labelOption.posLevel = item.name;
  fetchDataPerson();
}

function clearSelect(t: string) {
  if (t === "posType") {
    labelOption.posType = "ทั้งหมด";
  } else if (t === "posLevel") {
    labelOption.posLevel = "ทั้งหมด";
  } else if (t === "retireYear") {
    labelOption.retireYear = "";
  } else if (t === "rangeYear") {
    formFilter.rangeYear.min = 0;
    formFilter.rangeYear.max = 60;
  }

  fetchDataPerson();
}

onMounted(async () => {
  fetchDataPerson();
});
</script>
<template>
  <q-card class="q-mt-md">
    <q-card-section class="card-img q-pb-lg">
      <div class="text-h5 text-center q-py-md text-weight-medium">
        ค้นหาข้อมูลทะเบียนประวัติ
      </div>
      <div class="row justify-center">
        <div
          class="col-xs-12 col-sm-12 col-md-11 q-pa-md bg-Search rounded-borders"
        >
          <q-form @submit="onclickSearch">
            <div class="bg-white row col-12 q-pa-none rounded-borders">
              <div class="row col-11">
                <div class="col-3 row wrap">
                  <q-select
                    borderless
                    bg-color="white"
                    v-model="searchType"
                    :options="store.searchTypeOption"
                    emit-value
                    dense
                    emit-option
                    option-label="name"
                    option-value="id"
                    map-options
                    class="selectS col-11 q-px-md"
                    color="deep-orange"
                    dropdown-icon="mdi-chevron-down"
                  />
                  <q-separator vertical />
                </div>
                <q-input
                  borderless
                  dense
                  bg-color="white"
                  v-model="formFilter.keyword"
                  clearable
                  placeholder="ค้นหา"
                  class="col-9 q-pr-md"
                  @clear="fetchDataPerson"
                >
                  <template v-slot:before>
                    <q-icon name="search" color="deep-orange" />
                  </template>
                </q-input>
              </div>
              <div class="row col-1">
                <q-btn
                  class="fit btnSearch"
                  unelevated
                  color="deep-orange"
                  label="ค้นหา"
                  type="submit"
                />
              </div>
            </div>
          </q-form>
          <div v-if="isShowBtnFilter" class="col-12 row q-mt-sm">
            <q-space />
            <q-btn
              flat
              label="ตัวเลือกเพิ่มเติม"
              icon-right="mdi-tune"
              @click="onClickShowFilter"
              dense
              class="q-px-sm"
            ></q-btn>
          </div>

          <div
            class="row q-mt-sm q-gutter-sm justify-center"
            v-if="isShowFilter"
          >
            <q-btn-dropdown
              flat
              rounded
              dense
              label-color="white"
              dropdown-icon="mdi-chevron-down"
              class="q-px-sm"
            >
              <template v-slot:label>
                {{ `${labelOption.type}` }}
              </template>
              <q-list>
                <q-item
                  v-for="(item, index) in store.employeeClassOps"
                  :key="index"
                  clickable
                  v-close-popup
                  @click="selectType(item)"
                >
                  <q-item-section>
                    <q-item-label>{{ item.name }}</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>

            <q-separator inset vertical class="lineFil" />

            <q-btn-dropdown
              rounded
              flat
              dense
              label-color="white"
              dropdown-icon="mdi-chevron-down"
              class="q-px-sm"
            >
              <template v-slot:label>
                {{
                  labelOption.posType !== "ทั้งหมด"
                    ? labelOption.posType
                    : empType === "officer"
                    ? `ประเภทตำแหน่ง${labelOption.posType}`
                    : `กลุ่มงาน${labelOption.posType}`
                }}
                <q-btn
                  size="10px"
                  flat
                  round
                  color="white"
                  icon="close"
                  v-if="labelOption.posType !== 'ทั้งหมด'"
                  @click.stop.prevent="clearSelect('posType')"
                />
              </template>
              <q-list>
                <q-item
                  v-for="(item, index) in store.posTypeOps"
                  :key="index"
                  clickable
                  v-close-popup
                  @click="selectPosType(item)"
                >
                  <q-item-section>
                    <q-item-label>{{ item.name }}</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>

            <q-separator inset vertical class="lineFil" />

            <q-btn-dropdown
              flat
              dense
              rounded
              label-color="white"
              dropdown-icon="mdi-chevron-down"
              class="q-px-sm"
            >
              <template v-slot:label>
                {{
                  labelOption.posLevel !== "ทั้งหมด"
                    ? labelOption.posLevel
                    : empType === "officer"
                    ? `ระดับตำแหน่ง${labelOption.posLevel}`
                    : `ระดับชั้นงาน${labelOption.posLevel}`
                }}
                <q-btn
                  size="10px"
                  flat
                  round
                  color="white"
                  icon="close"
                  v-if="labelOption.posLevel !== 'ทั้งหมด'"
                  @click.stop.prevent="clearSelect('posLevel')"
                />
              </template>
              <q-list
                :style="store.posLevelOps.length > 9 ? 'height: 450px' : ''"
              >
                <q-item
                  v-for="(item, index) in store.posLevelOps"
                  :key="index"
                  clickable
                  v-close-popup
                  @click="selectPosLevel(item)"
                >
                  <q-item-section>
                    <q-item-label>{{ item.name }}</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>

            <q-separator
              inset
              vertical
              class="lineFil"
              v-if="empType === 'officer'"
            />

            <q-btn-dropdown
              v-if="empType === 'officer'"
              flat
              dense
              rounded
              label-color="white"
              dropdown-icon="mdi-chevron-down"
              :label="`เงื่อนไขอื่นๆ  ${conditionTotal}`"
              class="q-px-sm"
            >
              <q-list>
                <q-item clickable v-close-popup>
                  <q-item-section>
                    <q-toggle
                      v-model="formFilter.isProbation"
                      color="primary"
                      label="ทดลองปฏิบัติหน้าที่ราชการ"
                      @update:model-value="fetchDataPerson"
                    />
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>
                    <q-toggle
                      v-model="formFilter.isShowRetire"
                      color="primary"
                      label="แสดงข้อมูลผู้พ้นจากราชการ"
                      @update:model-value="fetchDataPerson"
                    />
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>
          </div>
        </div>
      </div>
    </q-card-section>

    <q-separator />

    <q-card-section>
      <TableView
        v-model:mode="mode"
        :rows="dataPersonMain"
        v-model:formFilter="formFilter"
        v-model:maxPage="maxPage"
        :fetchData="fetchDataPerson"
        :fetchType="fetchType"
        :total="total"
        :empType="empType"
      />
    </q-card-section>
  </q-card>
</template>

<style scoped>
.card-img {
  background: url("@/assets/registry-banner.png");
  background-size: cover;
  color: white;
}

:deep(.custom-select.q-field--outlined .q-field__control) {
  color: white;
  background-color: #36969f;
}
:deep(.custom-select.q-field--outlined .q-field__control::before) {
  border: 1px solid #fff;
}

:deep(.custom-btn.q-btn--outline::before) {
  background-color: #36969f;
}

.btnSearch {
  border-radius: 0px 4px 4px 0px;
}
.bg-Search {
  background: #00000015;
}
.lineFil {
  transform: rotate(30deg);
  height: 20px;
  margin-top: 15px;
  background: #ffffff7b !important;
}
.selectS .q-field__control .q-field__append .q-icon {
  color: #ff5722 !important;
}
</style>
