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

import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";

import type { Permission } from "@/interface/index/workflow/Main";
import type { DataListState } from "@/interface/response/workflow/Main";

import DialogSelectPerson from "@/components/Workflow/DialogSelectPerson.vue";
import DialogApprove from "@/components/Workflow/DialogApprove.vue";

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

const isCheckData = defineModel<boolean>("isCheckData", {
  default: true,
});
const props = defineProps({
  id: { type: String, require: true },
  sysName: { type: String, require: true },
  onUpdateStatus: {
    type: Function,
    defult: () => {
      console.log("No Function");
    },
  },
});

const rejectName = computed(() =>
  props.sysName && ["SYS_RESIGN", "SYS_RESIGN_EMP"].includes(props.sysName)
    ? "ยับยั้ง"
    : "ไม่อนุมัติ"
);

const stateId = ref<string>(""); //id state ปัจุบัน
const state = ref<number>(1); //state ปัจุบัน
const keycloakId = ref<string>("");
const dataUserComment = ref<any>();

const isPermission = ref<boolean>(true); //การเข้าถึง Workflow
const permission = ref<Permission>({
  isChangeState: false, //ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ
  isOperate: false, //เปลี่ยนสถานะ (state) เอกสารได้ ผู้บังคับบัญชา
  isView: false, //ดูเอกสารได้
  isUpdate: false, //แก้ไขเอกสารได้
  isDelete: false, //ลบเอกสารได้ (ถ้ามี)
  isCancel: false, //ลบเอกสารได้ (ถ้ามี)
  isSign: false, //ผู้มีอำนาจ
});
const itemState = ref<DataListState[]>([]);

const modalSelectPerson = ref<boolean>(false);
const modalApprove = ref<boolean>(false);
const typeSelectPerson = ref<string>("");

//รายการระบบที่ต้องการ disable step 3 หรือรองสุดท้าย
const displayArray = <string[]>[
  "REGISTRY_PROFILE",
  "SYS_RESIGN",
  "SYS_LEAVE_LIST",
  "SYS_LEAVE_EMP",
];

async function fetchCheckState() {
  await http
    .post(config.API.workflow + `check-user-now`, {
      refId: props.id,
      system: props.sysName,
    })
    .then(async (res) => {
      await fetchData();
      const data = await res.data.result;

      stateId.value = data.stateId;
      state.value =
        data.stateNo === itemState.value.length
          ? data.stateNo + 1
          : data.stateNo;
      permission.value = {
        isChangeState: data.can_change_state,
        isOperate: data.can_operate,
        isView: data.can_view,
        isUpdate: data.can_update,
        isDelete: data.can_delete,
        isCancel: data.can_cancel,
        isSign: data.can_sign,
      };
      keycloakId.value = data.keycloakId;
      console.log(keycloakId.value);
    })
    .catch(() => {
      isPermission.value = false;
    });
}

async function fetchData() {
  await http
    .post(config.API.workflow + `check-state-all`, {
      refId: props.id,
      system: props.sysName,
    })
    .then(async (res) => {
      const data = await res.data.result;
      itemState.value = data;
    })
    .catch((err) => {
      messageError($q, err);
    });
}

function onChangeState() {
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .post(config.API.workflow + `state-next`, {
        refId: props.id,
        system: props.sysName,
      })
      .then(async () => {
        await fetchCheckState();
        if (
          props.sysName === "SYS_TRANSFER_REQ" &&
          state.value === itemState.value.length - 1
        ) {
          props.onUpdateStatus?.();
        }
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

onMounted(async () => {
  await fetchCheckState();
});

defineExpose({
  permission,
});
</script>

<template>
  <q-card bordered class="row col-12" v-if="isPermission">
    <div class="bg-grey-1 q-pa-sm col-12 row items-center">
      <div class="q-pl-sm text-weight-bold text-dark">สถานะการดำเนินเรื่อง</div>
      <q-space />
    </div>
    <div class="col-12"><q-separator /></div>
    <q-card-section>
      <div class="q-px-lg q-py-md">
        <q-timeline color="primary">
          <q-timeline-entry
            v-for="(step, index) in itemState"
            :key="index"
            :title="step.stateName"
            :icon="
              state === index + 1
                ? 'mdi-pencil'
                : state > index + 1
                ? 'done'
                : `mdi-numeric-${index + 1}`
            "
            :color="state < index + 1 ? 'grey-4' : ''"
          >
            <!-- Darft -->
            <div class="row q-col-gutter-sm" v-if="state === 1 && index === 0">
              <div>
                <q-btn
                  v-if="permission.isChangeState"
                  @click.prevent="onChangeState"
                  label="ดำเนินการต่อ"
                  color="primary"
                />
              </div>
            </div>

            <!-- Operate -->
            <div
              class="q-col-gutter-sm"
              v-if="index > 0 && index < itemState.length - 1 && state > index"
            >
              <div v-if="step.stateUserComments.length !== 0">
                <q-list bordered separator style="min-width: 20vw">
                  <q-item v-for="item in step.stateUserComments">
                    <q-item-section>
                      <q-item-label>
                        {{ `${item.prefix}${item.firstName} ${item.lastName}` }}
                        <!-- {{ `(${item.position})` }} -->
                      </q-item-label>
                      <q-item-label caption lines="2">{{
                        item.isReasonSetting ? item.reason : ""
                      }}</q-item-label>
                    </q-item-section>

                    <q-item-section side top>
                      <q-item-label
                        :class="
                          !item.isApprove && !item.isAccept
                            ? 'text-red'
                            : 'text-green'
                        "
                      >
                        {{
                          item.isAcceptSetting
                            ? item.isAccept
                              ? "รับทราบ"
                              : ""
                            : item.isApproveSetting
                            ? item.isApprove === true
                              ? "อนุมัติ"
                              : item.isApprove === false
                              ? `${rejectName}`
                              : ""
                            : ""
                        }}
                      </q-item-label>

                      <q-btn
                        v-if="
                          item.isComment &&
                          state === index + 1 &&
                          item.isAccept === null &&
                          item.reason === null &&
                          item.isApprove === null
                        "
                        unelevated
                        rounded
                        @click.prevent="
                          (dataUserComment = item), (modalApprove = true)
                        "
                        label="แสดงความเห็น"
                        color="blue"
                      />
                    </q-item-section>
                  </q-item>
                </q-list>
              </div>

              <div v-if="state === index + 1" class="row q-gutter-x-sm">
                <q-btn
                  v-if="permission.isOperate"
                  @click.prevent="
                    (modalSelectPerson = true), (typeSelectPerson = 'operate')
                  "
                  label="ส่งยังไปผู้บังคับบัญชา"
                  color="public"
                />
                <q-btn
                  v-if="permission.isSign"
                  @click.prevent="
                    (modalSelectPerson = true), (typeSelectPerson = 'sign')
                  "
                  label="ส่งไปยังผู้มีอำนาจ"
                  color="public"
                />
              </div>

              <div v-if="permission.isChangeState && state === index + 1">
                <q-btn
                  :disable="
                    props.sysName && displayArray?.includes(props.sysName)
                      ? state === itemState.length - 1
                        ? !isCheckData
                        : false
                      : !isCheckData
                  "
                  @click.prevent="onChangeState"
                  label="ดำเนินการต่อ"
                  color="primary"
                />
              </div>
            </div>
          </q-timeline-entry>
        </q-timeline>
      </div>
    </q-card-section>
  </q-card>

  <DialogSelectPerson
    v-model:modal="modalSelectPerson"
    :state-id="stateId"
    :fetch-data="fetchCheckState"
    :type="typeSelectPerson"
    :sys-name="props.sysName"
    :keycloak-id="keycloakId"
  />

  <DialogApprove
    v-model:modal="modalApprove"
    :data-user-comment="dataUserComment"
    :fetch-data="fetchCheckState"
    :sys-name="props.sysName"
  />
</template>
