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

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundStore";
import { checkPermission } from "@/utils/permissions";

import type { DataPost } from "@/modules/09_leave/interface/request/changeRound";

import Dialogform from "@/modules/09_leave/components/03_ChangeRound/DialogForm.vue";

/** useStore */
const mixin = useCounterMixin();
const {
  showLoader,
  hideLoader,
  success,
  messageError,
  dialogMessageNotify,
  dialogConfirm,
} = mixin;
const dataStore = useChangeRoundDataStore();

/** use */
const $q = useQuasar();

const modal = ref<boolean>(false);
const dateWork = ref<string>("NORMAL");
const modalFix = ref<boolean>(false);
const editCheck = ref<string>("");
const DataRow = ref<any>();
const formData = reactive<DataPost>({
  cardId: "",
  firstName: "",
  lastName: "",
  page: 1,
  pageSize: 10,
});

/**
 * Function openPopup
 * @param check action edit,history
 * @param detail รายละเอียดข้อมูลรอบการปฏิบัติของผู้ใช้งาน
 */
async function Openmodal(check: string, detail: any) {
  DataRow.value = detail;
  modal.value = true;
  dataStore.setProfileId(DataRow.value.profileId);
  editCheck.value = check;
  if (check === "history") {
    modal.value = true;
    dataStore.changePage(1, dataStore.pageSize, "emp");
    // dataStore.fetchDatainHistory();
  }
}

/**
 * function เรียกข้อมูลปฏิทินวันทำงาน
 * @param id profileId
 */
async function fetchDataCalendarWork(id: string) {
  showLoader();
  await http
    .get(config.API.leaveWorkByidEMP(id))
    .then((res) => {
      dateWork.value = res.data.result.work;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

const detailByid = ref();
async function OpenmodalFix(detail: any) {
  detailByid.value = detail;
  modalFix.value = true;
  await fetchDataCalendarWork(detail.profileId);
}

/** Function closePopup */
function closeDialog() {
  modal.value = false;
  modalFix.value = false;
}

function save() {
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .put(config.API.leaveWorkByidEMP(detailByid.value.profileId), {
        work: dateWork.value,
      })
      .then(async () => {
        // await searchData();
        success($q, "บันทึกข้อมูลสำเร็จ");
        closeDialog();
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * function updatePagination
 * @param newPagination ข้อมูล Pagination ใหม่
 */
function updatePagination(newPagination: any) {
  formData.pageSize = newPagination.rowsPerPage;
}

/** Function ค้นหาข้อมูล */
async function searchData() {
  if (formData.cardId || formData.firstName || formData.lastName) {
    await dataStore.fetchDataForCardId(formData, "emp");
  } else {
    dialogMessageNotify($q, "กรุณากรอกข้อมูลอย่างน้อย 1 ช่อง");
  }
}

watch(
  () => formData.pageSize,
  () => {
    formData.page = 1;
    searchData();
  }
);

onMounted(() => {
  dataStore.rows = [];
});
</script>
<template>
  <div class="toptitle text-dark col-12 row items-center">
    เปลี่ยนแปลงรอบการปฏิบัติงานของลูกจ้างประจำ
  </div>
  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
    <div class="row col-12 q-mb-sm">
      <q-card flat bordered class="bg-grey-2 col-12 bg-white q-pa-lg">
        <div class="text-dark col-12 text-weight-bold text-subtitle1">
          ค้นหารายชื่อ
        </div>
        <div class="row justify-between q-gutter-y-sm">
          <q-input
            :readonly="!checkPermission($route)?.attrIsGet"
            v-model="formData.cardId"
            outlined
            label="เลขประจำตัวประชาชน"
            class="col-6 col-md-4 bg-white inputgreen"
            dense
            hide-bottom-space
            maxlength="13"
          />
          <q-input
            :readonly="!checkPermission($route)?.attrIsGet"
            v-model="formData.firstName"
            outlined
            label="ชื่อ"
            class="col-5 col-md-3 bg-white inputgreen"
            dense
            hide-bottom-space
          />
          <q-input
            :readonly="!checkPermission($route)?.attrIsGet"
            v-model="formData.lastName"
            outlined
            label="นามสกุล"
            class="col-6 col-md-3 bg-white inputgreen"
            dense
            hide-bottom-space
          />
          <q-btn
            v-if="checkPermission($route)?.attrIsGet"
            @click="(formData.page = 1), searchData()"
            for="#search"
            dense
            unelevated
            color="primary"
            class="q-px-sm col-5 col-md-1"
            style="max-height: 40px"
            >ค้นหา</q-btn
          >
        </div>
      </q-card>
    </div>
    <div v-if="dataStore.rows.length === 0 && dataStore.checkCilck === true">
      <q-card
        flat
        bordered
        class="bg-grey-2 col-12 q-pa-lg text-center text-subtitle1 text-bold"
        >ไม่พบข้อมูล</q-card
      >
    </div>
    <div v-if="dataStore.rows.length !== 0" class="col-12 q-mt-xl">
      <d-table
        ref="table"
        :columns="dataStore.columns"
        :rows="dataStore.rows"
        row-key="interrogated"
        flat
        bordered
        dense
        class="custom-header-table"
        :visible-columns="dataStore.visibleColumns"
        :rows-per-page-options="[10, 25, 50, 100]"
        @update:pagination="updatePagination"
      >
        <!-- :paging="true" -->
        <template v-slot:header="props">
          <q-tr :props="props">
            <q-th auto-width />
            <q-th
              v-for="col in props.cols"
              :key="col.name"
              :props="props"
              style="color: #000000; font-weight: 500"
            >
              <span class="text-weight-medium">{{ col.label }}</span>
            </q-th>
          </q-tr>
        </template>
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td>
              <div>
                <q-btn
                  flat
                  icon="mdi-dots-horizontal-circle-outline"
                  color="secondary"
                  for="#cancel"
                  dense
                  round
                >
                  <q-menu>
                    <q-list>
                      <q-item
                        v-if="checkPermission($route)?.attrIsUpdate"
                        clickable
                        v-close-popup
                        @click="Openmodal('edit', props.row)"
                      >
                        <q-item-section style="min-width: 0px" avatar>
                          <q-icon
                            color="primary"
                            name="mdi-shuffle-variant"
                            size="xs"
                          />
                        </q-item-section>

                        <q-item-section>
                          <q-item-label>เปลี่ยนรอบการลงเวลา</q-item-label>
                        </q-item-section>
                      </q-item>
                      <q-item
                        v-if="checkPermission($route)?.attrIsUpdate"
                        clickable
                        v-close-popup
                        @click="OpenmodalFix(props.row)"
                      >
                        <q-item-section style="min-width: 0px" avatar>
                          <q-icon color="edit" name="edit" size="xs" />
                        </q-item-section>

                        <q-item-section>
                          <q-item-label>แก้ไขปฏิทินวันทำงาน</q-item-label>
                        </q-item-section>
                      </q-item>
                      <q-item
                        clickable
                        v-close-popup
                        @click="Openmodal('history', props.row)"
                      >
                        <q-item-section style="min-width: 0px" avatar>
                          <q-icon
                            color="deep-purple"
                            name="mdi-history"
                            size="xs"
                          />
                        </q-item-section>
                        <q-item-section>
                          <q-item-label>ประวัติการเปลี่ยนรอบ</q-item-label>
                        </q-item-section>
                      </q-item>
                    </q-list>
                  </q-menu>
                </q-btn>
              </div>
            </q-td>
            <q-td v-for="col in props.cols" :key="col.name" :props="props">
              <div>
                {{ col.value ?? "-" }}
              </div>
            </q-td>
          </q-tr>
        </template>
        <template v-slot:pagination="scope">
          ทั้งหมด {{ dataStore.totalListMain }} รายการ
          <q-pagination
            v-model="formData.page"
            active-color="primary"
            color="dark"
            :max="Number(dataStore.maxPageMain)"
            size="sm"
            boundary-links
            direction-links
            :max-pages="5"
            @update:model-value="dataStore.fetchDataForCardId(formData)"
          ></q-pagination>
        </template>
      </d-table>
    </div>
  </q-card>

  <!-- popup เปลี่ยนรอบการปฏิบัติงาน ,ประวัติการเปลี่ยนรอบการปฏิบัติงาน  -->
  <Dialogform
    :modal="modal"
    :closeDialog="closeDialog"
    :editCheck="editCheck"
    :DataRow="DataRow"
    :personId="DataRow == null ? '' : DataRow.profileId"
    @update:change-page="dataStore.changePage"
    :type="'emp'"
  />

  <!-- แก้ไขปฏิทินวันทำงาน -->
  <q-dialog v-model="modalFix" persistent>
    <q-card style="min-width: 800px"
      ><q-toolbar>
        <q-toolbar-title class="text-subtitle1 text-bold">
          {{ "แก้ไขปฏิทินวันทำงาน" }}
        </q-toolbar-title>
        <q-btn
          icon="close"
          unelevated
          round
          dense
          @click="closeDialog"
          style="color: #ff8080; background-color: #ffdede"
        />
      </q-toolbar>
      <q-separator color="grey-4" />
      <q-form @submit="save" class="q-gutter-md">
        <div class="q-pa-md">
          <q-radio
            name="dateWork"
            v-model="dateWork"
            val="NORMAL"
            label="ทำงาน 5 วัน"
          />
          <q-radio
            name="dateWork"
            v-model="dateWork"
            val="6DAY"
            label="ทำงาน 6 วัน"
          />
        </div>
        <q-separator color="grey-4" />
        <div class="q-pa-xs">
          <div class="row justify-end q-mr-sm q-py-sm">
            <q-btn
              id="onSubmit"
              type="submit"
              unelevated
              label="บันทึก"
              class="q-px-md items-center"
              color="secondary"
            />
          </div>
        </div>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped lang="scss">
.q-table tbody td:before.no-background {
  background: none;
}
</style>
