<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import type { QForm } from "quasar";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import type { treeTab } from "@/modules/05_placement/interface/index/Main";
import type { ResponseOrganiz } from "@/modules/05_placement/interface/response/Order";
import type { complaintLists } from "@/modules/10_order/interface/response/Order";
import type { QTableProps } from "quasar";
import type {
  DataOption1,
  OrederResult,
} from "@/modules/10_order/interface/index/Main";

import { useOrderPlacementDataStore } from "@/modules/10_order/store";

const DataStore = useOrderPlacementDataStore();
const mixin = useCounterMixin();
const {
  date2Thai,
  messageError,
  showLoader,
  hideLoader,
  success,
  dialogConfirm,
  dialogMessageNotify,
} = mixin;
const $q = useQuasar(); //ใช้ noti quasar
const route = useRoute();
const router = useRouter();

const orderId = route.params.id;
const orderId_paramsName = route.name;

const props = defineProps({
  next: {
    type: Function,
    default: () => console.log("not function"),
  },
  previous: {
    type: Function,
    default: () => console.log("not function"),
  },
});
const next = () => props.next();

const myForm = ref<QForm>();
//option
const typeOrderOption = ref<DataOption1[]>([]);
const byOrderOptionMain = ref<DataOption1[]>([]);
const byOrderOption = ref<DataOption1[]>([]);
const CommandOption = ref<DataOption1[]>([]);
const salaryRoundOptionMain = ref<DataOption1[]>([]);
const salaryRoundOption = ref<DataOption1[]>([]);

//Main
const typeOrder = ref<any>();
const nameOrder = ref<any>("");
const command = ref<number | "">();
const dateYear = ref<number | null>(null);
const dateCommand = ref<Date | null>(null);
const byOrder = ref<string>("");
const nameCommand = ref<any>();
const positionCommand = ref<string>("");
const year = ref<number>(0);
const SalaryRound = ref<any>(null);

// 33-34-35
const input33 = ref<string>("");
const input34 = ref<string>("");
const input35 = ref<string>("");

const typeOrderFilter = ref<any>({
  typeOrderOption: [],
});

onMounted(async () => {
  if (orderId) {
    await fecthTypeOption("hasData");
  } else {
    await fecthTypeOption("noData");
  }
});
// เลือกคำสั่งโดย
watch(byOrder, async () => {
  await http
    .get(config.API.approverOC(byOrder.value))
    .then((res) => {
      CommandOption.value = res.data.result;
    })
    .catch((e) => {
      messageError($q, e);
    });
});
//เลือกผู้ลงนาม
watch(nameCommand, async () => {
  if (positionCommand.value === "" || positionCommand.value === undefined) {
    positionCommand.value = nameCommand.value.positionName;
  }
});

const commandCodes = ref<string[]>([
  "C-PM-33",
  "C-PM-34",
  "C-PM-35",
  "C-PM-36",
  "C-PM-37",
]);
// เรียกคำสั่ง
const fecthTypeOption = async (actions: string) => {
  showLoader();
  await http
    .get(config.API.typeOrder())
    .then((res) => {
      const response = res.data.result;
      const filterRes = response.filter((e: any) =>
        commandCodes.value.includes(e.commandCode)
      );

      const data =
        orderId_paramsName === "OrderDetail" ||
        orderId_paramsName === "OrderAdd"
          ? response
          : filterRes;

      typeOrderOption.value = data.map((e: OrederResult) => ({
        id: e.id,
        name: e.name,
        category: e.category,
        commandCode: e.commandCode,
        fullname: e.name,
      }));
      typeOrderFilter.value = data.map((e: OrederResult) => ({
        id: e.id,
        name: e.name,
        category: e.category,
        commandCode: e.commandCode,
        fullname: e.name,
      }));
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      await fecthCommand();
      if (actions == "hasData") {
        await fetchdetailOrder(); // เมื่อแก้ไขจะเรียกข้อมูลรายละเอียด
      }
      hideLoader();
    });
};
// เรียกรายละเอียดของคำสั่ง
const fetchdetailOrder = async () => {
  let orderIdString = orderId.toString();
  await http
    .get(config.API.detailOrder(orderIdString))
    .then(async (res: any) => {
      const data = res.data.result;

      const orderTypeCode = await data.orderTypeCode.toUpperCase();

      typeOrder.value = typeOrderOption.value.find(
        (e) => e.id === data.orderTypeValue
      );
      nameOrder.value = data.orderTitle;
      command.value = data.orderNo;
      dateYear.value = Number(data.orderYear);
      dateCommand.value = data.orderDate;
      byOrder.value = data.orderBy;
      nameCommand.value = data.signatoryBy;
      positionCommand.value = data.signatoryPosition;
      SalaryRound.value = data.salaryPeriodId;
      year.value = Number(data.year);

      fetchSalaryRound();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      // await fecthCommand();
      hideLoader();
    });
};

const fecthCommand = async () => {
  await http
    .get(config.API.organizationsOrder())
    .then((res) => {
      byOrderOptionMain.value = res.data.result;
      byOrderOption.value = res.data.result;
    })
    .catch((e) => {
      messageError($q, e);
    });
};

function casePm(val: string) {
  switch (val) {
    case "C-PM-33":
      return "เลื่อนเงินเดือนและให้ข้าราชการกรุงเทพมหานครสามัญ ได้รับเงินเดือนสูงกว่าขั้นสูงของตำแหน่งที่ได้รับแต่งตั้ง";
    case "C-PM-34":
      return "ให้ข้าราชการกรุงเทพมหานครสามัญได้รับค่าตอบแทนพิเศษ";
    case "C-PM-35":
      return `เลื่อนเงินเดือนและให้ข้าราชการกรุงเทพมหานครสามัญที่เกษียณอายุราชการ ในสิ้นปีงบประมาณ พ.ศ. ${
        new Date().getFullYear() + 543
      } ได้รับเงินเดือนสูงกว่าชั้นสูงของตำแหน่งที่ได้รับแต่งตั้ง`;
    case "C-PM-36":
      return "เลื่อนขั้นค่าจ้างและให้ลูกจ้างประจำกรุงเทพมหานครได้รับอัตราค่าจ้าง สูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ";
    case "C-PM-37":
      return "ให้ลูกจ้างประจำกรุงเทพมหานครได้รับค่าตอบแทนพิเศษ";
    default:
      return null;
  }
}

async function selectCMP(selectOrder: OrederResult) {
  if (selectOrder != null) {
    const orderTypeCode = await selectOrder.commandCode.toUpperCase();
    nameOrder.value = casePm(orderTypeCode);
  }
}

// บันทึกข้อมูล
const submit = async () => {
  let signBy = null;
  // หาคนออกคำสั่ง
  if (!nameCommand.value.length) {
    signBy = await nameCommand.value.name;
  } else if (nameCommand.value !== "") {
    signBy = await nameCommand.value;
  } else {
    const name2 = await CommandOption.value.find(
      (x: any) => x.name == nameCommand.value
    );
    signBy = await name2?.name;
  }

  const orderByOrganizationName = await byOrderOption.value.find(
    (x: any) => x.id == byOrder.value
  )?.name;

  const formdata = {
    orderTypeValue: typeOrder.value.id,
    orderTitle: nameOrder.value,
    orderNo:
      command.value == undefined || command.value == "" ? "" : command.value,
    orderYear: dateYear.value,
    orderDate: dateCommand.value,
    orderBy: byOrder.value,
    orderByOrganizationName: orderByOrganizationName,
    registerPosition: "",
    signatoryBy: signBy === "" ? nameCommand.value : signBy,
    signatoryPosition: positionCommand.value,
    year: year.value,
    salaryPeriodId: SalaryRound.value.id,
    salaryPeriod: SalaryRound.value.code,
  };
  // if (
  //   typeOrder.value.commandCode == "C-PM-33" ||
  //   typeOrder.value.commandCode == "C-PM-34" ||
  //   typeOrder.value.commandCode == "C-PM-35"
  // ) {
  //   Object.assign(formdata, {
  //     // examRound: examRound.value,
  //     // conclusionRegisterNo: conclusionRegisterNo.value,
  //     // conclusionRegisterDate: conclusionRegisterDate.value,
  //     // conclusionResultNo: conclusionResultNo.value.toString(),
  //     // conclusionResultDate: conclusionResultDate.value,
  //   });
  // }

  // เช็คค่าว่าง
  // await myForm.value!.validate().then((result: boolean) => {
  //   if (result) {
  dialogConfirm($q, () => {
    // ถ้ามี orderId ให้ อัพเดท ไม่มีให้สร้าง
    if (!orderId) {
      createListOrder(formdata, typeOrder.value.commandCode);
    } else {
      let orderIdString = orderId.toString();
      updateOrder(formdata, orderIdString, typeOrder.value.commandCode);
    }
  });
  // }
  // });
};

// สร้างคำสัง
const createListOrder = async (formData: Object, type: string) => {
  showLoader();
  await http
    .post(config.API.orderCPM(type), formData)
    .then((res) => {
      const data = res.data.result;
      localStorage.setItem("orderId", data.id);

      router.push(`/salary/command/detail/${data.id}?step=${2}`); // สร้างเสร็จแล้วให้ไป Step 2

      next();
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

const updateOrder = async (formData: Object, orderId: string, type: string) => {
  showLoader();
  await http
    .put(config.API.orderCPMUpdate(type, orderId), formData)
    .then(() => {
      next(); // แก้ไขเสร็จแล้วให้ไป Step 2
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

function filterSelector(val: any, update: Function, fullname: any) {
  switch (fullname) {
    case "typeOrderOption":
      update(() => {
        typeOrderOption.value = typeOrderFilter.value.filter(
          (v: any) => v.fullname.toLowerCase().indexOf(val.toLowerCase()) > -1
        );
      });
      break;
    case "byOrderOption":
      update(() => {
        byOrderOption.value = byOrderOptionMain.value.filter(
          (v: any) => v.name.toLowerCase().indexOf(val.toLowerCase()) > -1
        );
      });
      break;

    case "SalaryRound":
      update(() => {
        salaryRoundOption.value = salaryRoundOptionMain.value.filter(
          (v: any) => v.name.toLowerCase().indexOf(val.toLowerCase()) > -1
        );
      });
      break;

    default:
      break;
  }
}

/**
 * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
 * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
 */
function getClass(val: boolean) {
  return {
    "full-width inputgreen cursor-pointer": val,
    "full-width cursor-pointer": !val,
  };
}

/** ดึงข้อมูลเริ่มต้น */
function fetchSalaryRound() {
  showLoader();
  http
    .get(
      config.API.salaryPeriod() +
        `?page=${1}&pageSise=${10}&keyword=${""}&year=${year.value}`
    )
    .then((res) => {
      const data = res.data.result.data;
      const list = data.map((e: any) => ({
        id: e.id,
        name:
          e.period === "SPECIAL"
            ? "รอบพิเศษ"
            : e.period === "APR"
            ? "รอบเมษายน"
            : e.period === "OCT"
            ? "รอบตุลาคม"
            : "-",
        code: e.period,
      }));
      salaryRoundOptionMain.value = list;

      if (SalaryRound.value) {
        SalaryRound.value = list.find((x: any) => x.id == SalaryRound.value);
      }
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}
</script>

<template>
  <q-form greedy @submit.prevent @validation-success="submit">
    <div class="q-pa-md">
      <!-- Main -->
      <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
        <div class="col-xs-12 col-md-6">
          <q-select
            :class="getClass(true)"
            outlined
            dense
            v-model="typeOrder"
            :rules="[(val) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
            hide-bottom-space
            :label="`${'ประเภทคำสั่ง'}`"
            map-options
            option-label="fullname"
            :options="typeOrderOption"
            option-value="id"
            use-input
            input-debounce="0"
            lazy-rules
            @update:model-value="selectCMP(typeOrder)"
            @filter="(inputValue:any,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
                      ) "
          />
        </div>
        <div class="col-xs-12 col-md-6">
          <q-input
            :class="getClass(true)"
            outlined
            autogrow
            lazy-rules
            dense
            v-model="nameOrder"
            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
            :label="`${'คำสั่งเรื่อง'}`"
            hide-bottom-space
          />
        </div>
        <div class="row col-xs-7 col-md-3">
          <div class="col-6">
            <q-input
              :class="getClass(true)"
              outlined
              dense
              lazy-rules
              v-model="command"
              hide-bottom-space
              :label="`${'คำสั่งเลขที่'}`"
            />
          </div>
          <label class="col-1 flex justify-center items-center text-bold"
            >/</label
          >
          <div class="col-5">
            <datepicker
              v-model="dateYear"
              :locale="'th'"
              autoApply
              year-picker
              :enableTimePicker="false"
            >
              <template #year="{ year }">{{ year + 543 }}</template>
              <template #year-overlay-value="{ value }">{{
                parseInt(value + 543)
              }}</template>
              <template #trigger>
                <q-input
                  class="inputgreen"
                  :model-value="dateYear !== null ? dateYear + 543 : null"
                  :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
                  :label="`${'พ.ศ.'}`"
                  dense
                  outlined
                >
                </q-input>
              </template>
            </datepicker>
          </div>
        </div>
        <div class="col-xs-5 col-md-3">
          <datepicker
            menu-class-name="modalfix"
            v-model="dateCommand"
            :locale="'th'"
            autoApply
            borderless
            :enableTimePicker="false"
            week-start="0"
          >
            <template #year="{ year }">
              {{ year + 543 }}
            </template>
            <template #year-overlay-value="{ value }">
              {{ parseInt(value + 543) }}
            </template>
            <template #trigger>
              <q-input
                outlined
                dense
                class="inputgreen"
                :model-value="
                  dateCommand != null ? date2Thai(dateCommand) : null
                "
                :label="`${'วันที่คำสั่งมีผล'}`"
                :rules="[(val) => !!val || `${'กรุณาเลือกวันที่คำสั่งมีผล'}`]"
              >
                <template v-slot:prepend>
                  <q-icon
                    name="event"
                    class="cursor-pointer"
                    style="color: var(--q-primary)"
                  >
                  </q-icon>
                </template>
              </q-input>
            </template>
          </datepicker>
        </div>
        <div class="col-xs-12 col-md-6">
          <selector
            :class="getClass(true)"
            outlined
            dense
            v-model="byOrder"
            :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
            emit-value
            hide-bottom-space
            :label="`${'คำสั่งโดย'}`"
            map-options
            option-label="name"
            :options="byOrderOption"
            option-value="id"
            use-input
            lazy-rules
            input-debounce="0"
            @update:model-value="(nameCommand = ''), (positionCommand = '')"
            @filter="(inputValue:any,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'byOrderOption'
                      ) "
          />
        </div>
        <div
          class="col-xs-12 col-md-6"
          v-if="byOrder !== '00000000-0000-0000-0000-000000000000'"
        >
          <selector
            :class="getClass(true)"
            outlined
            dense
            lazy-rules
            v-model="nameCommand"
            :rules="[(val: string) => !!val || `${'กรุณาเลือกผู้มีอำนาจลงนาม'}`]"
            hide-bottom-space
            :label="`${'ผู้มีอำนาจลงนาม'}`"
            map-options
            option-label="name"
            :options="CommandOption"
            option-value="id"
            use-input
            input-debounce="0"
          >
            <template v-if="CommandOption.length === 0" v-slot:no-option>
              <q-item>
                <q-item-section class="text-primary">
                  กรุณาเลือกคำสั่งโดยก่อน
                </q-item-section>
              </q-item>
            </template>
          </selector>
        </div>
        <div
          class="col-xs-12 col-md-6"
          v-if="byOrder !== '00000000-0000-0000-0000-000000000000'"
        >
          <q-input
            :class="getClass(true)"
            outlined
            dense
            lazy-rules
            v-model="positionCommand"
            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
            :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
            hide-bottom-space
            disable
          />
        </div>
        <div
          class="col-xs-12 col-md-6"
          v-if="byOrder == '00000000-0000-0000-0000-000000000000'"
        >
          <q-input
            :class="getClass(true)"
            outlined
            lazy-rules
            dense
            v-model="nameCommand"
            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
            :label="`${'ผู้มีอำนาจลงนาม'}`"
            hide-bottom-space
          />
        </div>
        <div
          class="col-xs-12 col-md-6"
          v-if="byOrder == '00000000-0000-0000-0000-000000000000'"
        >
          <q-input
            :class="getClass(true)"
            outlined
            dense
            lazy-rules
            v-model="positionCommand"
            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
            :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
            hide-bottom-space
          />
        </div>

        <div class="col-xs-12 col-md-2">
          <datepicker
            menu-class-name="modalfix"
            v-model="year"
            :locale="'th'"
            autoApply
            year-picker
            :enableTimePicker="false"
            @update:model-value="fetchSalaryRound(), (SalaryRound = '')"
          >
            <template #year="{ year }">{{ year + 543 }}</template>
            <template #year-overlay-value="{ value }">{{
              parseInt(value + 543)
            }}</template>
            <template #trigger>
              <q-input
                dense
                outlined
                :model-value="year === 0 ? null : Number(year) + 543"
                :label="`${'ปีงบประมาณ'}`"
                class="inputgreen"
                :rules="[(val: string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
              >
                <template v-slot:prepend>
                  <q-icon
                    name="event"
                    class="cursor-pointer"
                    style="color: var(--q-primary)"
                  >
                  </q-icon>
                </template>
              </q-input>
            </template>
          </datepicker>
        </div>
        <div class="col-xs-12 col-md-4">
          <q-select
            class="inputgreen"
            outlined
            dense
            v-model="SalaryRound"
            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการขึ้นเงินเดือน'}`]"
            hide-bottom-space
            :label="`${'รอบการขึ้นเงินเดือน'}`"
            option-label="name"
            :options="salaryRoundOption"
            option-value="id"
            use-input
            input-debounce="0"
            lazy-rules
            @filter="(inputValue:any,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'SalaryRound'
                      ) "
          />
        </div>
      </div>
    </div>

    <q-separator />
    <div class="flex justify-end q-pa-sm q-gutter-sm">
      <q-btn unelevated label="บันทึก" type="submit" color="public">
        <q-tooltip>บันทึกข้อมูล</q-tooltip>
      </q-btn>
    </div>
  </q-form>
</template>

<style>
.q-field--with-bottom {
  padding-bottom: 0px;
}
.custom-header-table {
  max-height: 64vh;

  .q-table tr:nth-child(odd) td {
    background: white;
  }

  .q-table tr:nth-child(even) td {
    background: #f8f8f8;
  }

  .q-table thead tr {
    background: #ecebeb;
  }

  .q-table thead tr th {
    position: sticky;
    z-index: 1;
  }

  .q-table thead tr:last-child th {
    top: 48px;
  }

  .q-table thead tr:first-child th {
    top: 0;
  }
}
</style>
