<template>
  <div class="toptitle text-dark col-12 row items-center">
    <q-btn
      icon="mdi-arrow-left"
      unelevated
      round
      dense
      flat
      color="primary"
      class="q-mr-sm"
      @click="router.go(-1)"
    />
    รายละเอียด Exit interview ของ {{ prefix }} {{ fullname }}
  </div>
  <q-card bordered class="row col-12 text-dark">
    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
      <div class="q-pl-sm text-weight-bold text-subtitle2">
        {{ fullname }}
      </div>
      <q-space />
    </div>
    <div class="col-12"><q-separator /></div>
    <div class="row col-12 q-pa-md">
      <div class="col-12 row bg-white q-col-gutter-md">
        <div class="col-xs-3 col-sm-2 col-md-1 row">
          <q-img :src="avata" v-if="avata !== ''" />
          <q-img src="@/assets/avatar_user.jpg" v-else />
        </div>
        <div class="col-xs-6 col-sm-3 row items-center">
          <div class="col-12 q-pl-md">
            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
            <div class="col-12 text-detail">
              {{ Position }}
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-3 row items-center">
          <div class="col-12">
            <div class="col-12 text-top">ระดับ</div>
            <div class="col-12 text-detail">
              {{ PositionLevel }}
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-3 row items-center">
          <div class="col-12">
            <div class="col-12 text-top">สังกัด</div>
            <div class="col-12 text-detail">
              {{ Org }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </q-card>

  <q-card bordered class="row col-12 text-dark q-mt-sm">
    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
      <div class="q-pl-sm text-weight-bold text-dark">
        ข้อมูลการตอบแบบสอบถาม
      </div>
      <q-space />
      <!-- <div class="q-gutter-sm" v-if="!edit">
        <q-btn
          outline
          color="primary"
          dense
          icon-right="mdi-file-edit-outline"
          class="q-px-sm"
          label="แก้ไข"
          style="width: 80px"
          @click="edit = !edit"
        />
      </div>
      <div class="q-gutter-sm" v-else>
        <q-btn
          outline
          color="public"
          dense
          class="q-px-sm"
          label="บันทึก"
          style="width: 80px"
          @click="conditionSave"
        />
        <q-btn
          outline
          color="red"
          dense
          class="q-px-sm"
          label="ยกเลิก"
          style="width: 80px"
          @click="edit = !edit"
        />
      </div> -->
    </div>
    <div class="col-12"><q-separator /></div>
    <q-form ref="myForm">
      <div class="col-12 row q-col-gutter-md q-pa-md">
        <div class="col-xs-12 col-sm-12">
          <q-card bordered flat>
            <div
              class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold"
            >
              แบบสอบถาม
            </div>
            <q-separator />
            <div class="col-12 row q-pa-sm q-col-gutter-sm">
              <div class="col-12 text-top0 items-center">
                1. เหตุใดท่านจึงตัดสินใจร่วมงานกับกรุงเทพมหานคร (เลือกได้มากกว่า
                1 ข้อ)
              </div>
              <q-option-group
                :options="reasonWork_option"
                type="checkbox"
                v-model="reasonWork"
                disable
              />
              <div class="col-12 text-top0 items-center">
                <q-item-label>
                  <q-input
                    v-if="reasonWork.includes(12)"
                    v-model="reasonWorkOther"
                    disable
                    label="กรอกข้อความ"
                    dense
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="bg-white"
                    :rules="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                    ]"
                  />
                </q-item-label>
              </div>
              <div class="col-12 text-top0 items-center">
                2. สำหรับการลาออกในครั้งนี้
                ท่านได้คิดทบทวนอย่างจริงจังเป็นระยะเวลานานเท่าใด
              </div>
              <q-option-group
                :options="timeThink_option"
                type="radio"
                v-model="timeThink"
                disable
              />

              <div class="col-12 text-top0 items-center">
                3. ปัจจัยใดที่ทำให้ท่านตัดสินใจลาออกจากราชการ (เลือกได้มากกว่า 1
                ข้อ )
              </div>
              <q-option-group
                :options="exitFactor_option"
                type="checkbox"
                v-model="exitFactor"
                disable
              />
              <div class="col-12 text-top0 items-center">
                <q-item-label>
                  <q-input
                    v-if="exitFactor.includes(15)"
                    v-model="exitFactorOther"
                    label="กรอกข้อความ"
                    dense
                    disable
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="bg-white"
                    :rules="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                    ]"
                  />
                </q-item-label>
              </div>

              <div class="col-12 text-top0 items-center">
                4. อะไรคือสิ่งที่ท่านเห็นว่าควรปรับปรุง (เลือกได้มากกว่า 1 ข้อ)
              </div>
              <q-list>
                <q-option-group
                  :options="adjust_option"
                  type="checkbox"
                  v-model="adjust"
                  disable
                />
              </q-list>
              <div class="col-12 text-top0 items-center">
                <q-item-label>
                  <q-input
                    v-if="adjust.includes(15)"
                    v-model="adjustOther"
                    label="กรอกอื่นๆ"
                    dense
                    disable
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="bg-white"
                    :rules="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                    ]"
                  />
                </q-item-label>
              </div>
              <div class="col-12 text-top0 items-center">
                5. โปรดระบุสาเหตุที่แท้จริง
                ที่ทำให้ท่านตัดสินใจลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร ?
              </div>
              <q-input
                class="col-12"
                dense
                disable
                outlined
                v-model="realReason"
                label="  "
                type="textarea"
              />

              <div class="col-12 text-top0 items-center">
                6. ปัจจัยใดที่จะช่วยทำให้ท่านเปลี่ยนใจ
                ไม่อยากลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร
              </div>
              <q-input
                class="col-12"
                dense
                outlined
                disable
                v-model="notExitFactor"
                label="  "
                type="textarea"
              />

              <div class="col-12 text-top0 items-center">
                7. ท่านมีงานใหม่หรือไม่ ถ้ามี (โปรดระบุ
                ชื่อบริษัทเอกชน/หน่วยงานภาครัฐ)
                และอะไรคือสิ่งที่ที่ทำงานใหม่ให้กับท่าน
                ซึ่งท่านรู้สึกว่าเป็นที่น่าพอใจมากกว่าการปฏิบัติราชการกับกรุงเทพมหานคร
              </div>
              <q-option-group
                :options="haveJob_option"
                type="radio"
                v-model="haveJob"
                disable
              />
              <div class="col-12 text-top0 items-center">
                <q-item-label>
                  <q-input
                    v-if="haveJob === true"
                    v-model="haveJobReason"
                    label="กรอกอื่นๆ"
                    dense
                    disable
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="bg-white"
                    :rules="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                    ]"
                  />
                </q-item-label>
              </div>
              <div class="col-12 text-top0 items-center">
                8. ท่านจะแนะนำเพื่อนให้มาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่
                โปรดระบุเหตุผล)
              </div>
              <q-option-group
                :options="suggestFriends_option"
                type="radio"
                v-model="suggestFriends"
                disable
              />
              <div class="col-12 text-top0 items-center">
                <q-item-label>
                  <q-input
                    v-if="suggestFriends === false"
                    v-model="suggestFriendsReason"
                    label="กรอกข้อความ"
                    dense
                    lazy-rules
                    disable
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    class="bg-white"
                    :rules="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                    ]"
                  />
                </q-item-label>
              </div>
              <div class="col-12 text-top0 items-center">
                9. หากท่านมีโอกาสในอนาคต
                ท่านอยากกลับมาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่
                โปรดระบุเหตุผล)
              </div>
              <q-option-group
                :options="futureWork_option"
                type="radio"
                v-model="futureWork"
                disable
              />
              <div class="col-12 text-top0 items-center">
                <q-item-label>
                  <q-input
                    v-if="futureWork === false"
                    v-model="futureWorkReason"
                    label="กรอกข้อความ"
                    dense
                    lazy-rules
                    type="text"
                    autogrow
                    hide-bottom-space
                    outlined
                    disable
                    class="bg-white"
                    :rules="[
                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
                    ]"
                  />
                </q-item-label>
              </div>

              <div class="col-12 text-top0 items-center">
                10. ความคิดเห็นและข้อเสนอแนะอื่น ๆ
              </div>
              <q-input
                class="col-12"
                dense
                disable
                outlined
                v-model="suggestion"
                label="  "
                type="textarea"
              />

              <q-separator />
            </div>
          </q-card>
        </div>
      </div>
    </q-form>
  </q-card>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";

import CurrencyInput from "@/components/CurruncyInput.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";

import type { QTableProps, QForm } from "quasar";
import type {
  TypeFile,
  ResponseDataDetail,
} from "@/modules/06_retirement/interface/response/exit";
import PositionSide from "@/modules/01_metadata/components/positionEmployee/PositionSide.vue";
import FullCalendarComponent from "@fullcalendar/vue3";

const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const mixin = useCounterMixin();

const dataId = route.params.id.toString();
const {
  date2Thai,
  dialogMessage,
  messageError,
  showLoader,
  hideLoader,
  success,
} = mixin;

const myForm = ref<QForm | null>(null);
const roleAdmin = ref<boolean>(false);
const edit = ref<boolean>(false);
const Org = ref<string>("");
const PositionLevel = ref<string>("");
const Position = ref<string>("");
const prefix = ref<string>("");
const exitFactor = ref<any>([]);
const reasonWork = ref<any>([]);
const adjust = ref<any>([]);
const timeThink = ref<any>([]);
const fullname = ref<any>("");
const avata = ref<any>("");
const realReason = ref<any>("");
const notExitFactor = ref<any>("");
const haveJob = ref<any>("");
const suggestFriends = ref<any>([]);
const futureWork = ref<any>([]);
const suggestion = ref<any>("");

const reasonWorkOther = ref("");
const reasonWork_option = ref<any>([
  { label: "ความมั่นคงในการทำงาน ", value: 0 },
  { label: "สิทธิประโยชน์/สวัสดิการ", value: 1 },
  { label: "อัตราเงินเดือน ", value: 2 },
  { label: "ลักษณะงาน ", value: 3 },
  { label: "วัฒนธรรมการทำงานของข้าราชการ ", value: 4 },
  { label: "นโยบายของหน่วยงาน ", value: 5 },
  { label: "ระบบการทำงาน", value: 6 },
  { label: "สมดุลชีวิตการทำงาน ", value: 7 },
  { label: "บรรยากาศในการทำงาน  ", value: 8 },
  { label: "การพัฒนาในสายอาชีพ  ", value: 9 },
  { label: "โอกาสความก้าวหน้า  ", value: 10 },
  { label: "การได้รับการยอมรับจากสังคม  ", value: 11 },
  { label: "อื่น ๆ (ระบุ)  ", value: 12 },
]);
const exitFactorOther = ref("");
const exitFactor_option = ref<any>([
  { label: "อัตราเงินเดือน ", value: 0 },
  { label: "สวัสดิการ", value: 1 },
  { label: "ลักษณะงาน ", value: 2 },
  { label: "ระบบการทำงาน ", value: 3 },
  { label: "ระบบสนับสนุนการปฏิบัติงาน ", value: 4 },
  { label: "การมอบหมายงานที่ชัดเจนและเหมาะสม ", value: 5 },
  { label: "การบริหารงานของผู้บังคับบัญชา", value: 6 },
  { label: "การทำงานเป็นทีมกับเพื่อนร่วมงาน ", value: 7 },
  { label: "ระบบบริหารงานภายในหน่วยงาน  ", value: 8 },
  { label: "บรรยากาศในการทำงาน  ", value: 9 },
  { label: "การปฏิบัติอย่างเป็นธรรม  ", value: 10 },
  { label: "การยอมรับความแตกต่างหลากหลาย  ", value: 11 },
  { label: "การดูแลและให้ความช่วยเหลือในช่วงเริ่มต้นปฏิบัติงาน  ", value: 12 },
  { label: "การพัฒนาอย่างเป็นระบบและต่อเนื่อง ", value: 13 },
  { label: "โอกาสความก้าวหน้า  ", value: 14 },
  { label: "อื่น ๆ (ระบุ)  ", value: 15 },
]);
const suggestFriendsReason = ref("");
const suggestFriends_option = ref<any>([
  { label: "แนะนำ  ", value: true },
  { label: "ไม่แนะนำ (ระบุ)", value: false },
]);
const timeThink_option = ref<any>([
  { label: "น้อยกว่า 2 สัปดาห์ ", value: 0 },
  { label: "1 เดือน - 3 เดือน", value: 1 },
  { label: "3 เดือน - 6 เดือน  ", value: 2 },
  { label: "6 เดือนขึ้นไป  ", value: 3 },
]);
const haveJobReason = ref<any>("");
const haveJob_option = ref<any>([
  { label: "มี  (ระบุ) ", value: true },
  { label: "ไม่มี", value: false },
]);
const futureWorkReason = ref<any>("");
const futureWork_option = ref<any>([
  { label: "อยาก  ", value: true },
  { label: "ไม่อยาก (ระบุ)", value: false },
]);
const adjustOther = ref("");
const adjust_option = ref<any>([
  { label: "อัตราเงินเดือน ", value: 0 },
  { label: "สวัสดิการ", value: 1 },
  { label: "ลักษณะงาน ", value: 2 },
  { label: "ระบบการทำงาน ", value: 3 },
  { label: "ระบบสนับสนุนการปฏิบัติงาน ", value: 4 },
  { label: "การมอบหมายงานที่ชัดเจนและเหมาะสม ", value: 5 },
  { label: "การบริหารงานของผู้บังคับบัญชา", value: 6 },
  { label: "การทำงานเป็นทีมกับเพื่อนร่วมงาน ", value: 7 },
  { label: "ระบบบริหารงานภายในหน่วยงาน  ", value: 8 },
  { label: "บรรยากาศในการทำงาน  ", value: 9 },
  { label: "การปฏิบัติอย่างเป็นธรรม  ", value: 10 },
  { label: "การยอมรับความแตกต่างหลากหลาย  ", value: 11 },
  { label: "การดูแลและให้ความช่วยเหลือในช่วงเริ่มต้นปฏิบัติงาน  ", value: 12 },
  { label: "การพัฒนาอย่างเป็นระบบและต่อเนื่อง ", value: 13 },
  { label: "โอกาสความก้าวหน้า  ", value: 14 },
  { label: "อื่น ๆ (ระบุ)  ", value: 15 },
]);

const responseData = ref<any>({
  Position: "",
  PositionLevel: "",
  Org: "",
  Prefix: "",
  Avatar: "",
  reason: "",
  salary: 0,
  status: "",
  fullname: "",
  ReasonWork: 0,
  ReasonWorkOther: "",
  TimeThink: 0,
  ExitFactor: 0,
  ExitFactorOther: "",
  Adjust: 0,
  AdjustOther: "",
  RealReason: "",
  NotExitFactor: "",
  Havejob: null,
  HavejobReason: "",
  SuggestFriends: null,
  SuggestFriendsReason: "",
  FutureWork: null,
  FutureWorkReason: "",
});

onMounted(async () => {
  if (keycloak.tokenParsed != null) {
    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
    console.log("roleAdmin===>", roleAdmin.value);
  }
  await getData();
});

const getData = async () => {
  showLoader();
  await http
    .get(config.API.ExitInterviewByid(dataId))
    .then((res: any) => {
      const data = res.data.result;
      avata.value = data.avatar ?? "";
      Position.value = data.position ?? "";
      PositionLevel.value = data.positionLevel ?? "";
      Org.value = data.org ?? "";
    
      fullname.value = data.fullname ?? "";
      prefix.value = data.prefix ?? "";
      reasonWork.value = data.reasonWork ?? [];
      reasonWorkOther.value = data.reasonWorkOther ?? "";
      timeThink.value = data.TimeThink ?? 0;
      exitFactor.value = data.exitFactor ?? [];
      exitFactorOther.value = data.exitFactorOther ?? 0;
      adjust.value = data.adjust ?? [];
      adjustOther.value = data.adjustOther ?? "";
      realReason.value = data.realReason ?? "";
      notExitFactor.value = data.notExitFactor ?? "";
      haveJob.value = data.havejob ?? null;
      haveJobReason.value = data.havejobReason ?? "";
      suggestFriends.value = data.suggestFriends ?? null;
      suggestFriendsReason.value = data.suggestFriendsReason ?? "";
      futureWork.value = data.futureWork ?? null;
      futureWorkReason.value = data.futureWorkReason ?? "";
      suggestion.value = data.suggestion ?? "";
      //   console.log(data.value);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

const conditionSave = async () => {
  if (myForm.value !== null) {
    myForm.value.validate().then((success) => {
      if (success) {
        dialogMessage(
          $q,
          "ต้องการแก้ไขข้อมูลหรือไม่?",
          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
          "mdi-help-circle-outline",
          "ตกลง",
          "public",
          async () => await saveData(),
          undefined
        );
      }
    });
  }
};

const saveData = async () => {
  const body = {};
  showLoader();
  await http
    .put(config.API.ExitInterviewByid(dataId), body)
    .then((res: any) => {
      //   const data = res.data.result;
      //   console.log(data);
      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
      edit.value = false;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      await getData();
      hideLoader();
    });
};

const getClass = (val: boolean) => {
  return {
    "full-width inputgreen cursor-pointer": val,
    "full-width cursor-pointer": !val,
  };
};
</script>
<style lang="scss" scope>
.q-img {
  border-radius: 5px;
  height: 70px;
}
.text-top {
  color: gray;
  font-weight: 400;
  padding-bottom: 3px;
}
.text-detail {
  font-weight: 500;
}
</style>
