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

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

/** importType*/
import type { FormCommand } from "@/modules/12_evaluatePersonal/interface/index/evalute";

/**use*/
const $q = useQuasar();
const route = useRoute();
const mixin = useCounterMixin();
const { date2Thai, showLoader, hideLoader, messageError } = mixin;

const id = ref<string>(route.params.id as string); //id ประเมิน
//ผู้เซ็นเอกสาร
const formCommand = reactive<FormCommand>({
  elementaryFullName: "", //ชื่อ-นามสกุลผู้บังคับบัญชาชั้นต้น
  elementaryPosition: "", //ตำแหน่งผู้บังคับบัญชาชั้นต้น
  elementaryPositionOld: "", //ตำแหน่งเดิมผู้บังคับบัญชาชั้นต้น
  elementaryOrg: "", //สังกัดผู้บังคับบัญชาชั้นต้น
  elementaryOrgOld: "", //สังกัดเดิมผู้บังคับบัญชาชั้นต้น
  abovelevelFullname: "", //ชื่อ-นามสกุลผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
  abovelevelPosition: "", //ตำแหน่งผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
  abovelevelPositionOld: "", //ตำแหน่งเดิมผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
  abovelevelOrg: "", //สังกัดผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
  abovelevelOrgOld: "", //สังกัดเดิมผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
});
const author = ref<string>(""); //เจ้าของผลงาน
const subject = ref<string[]>([""]); //ชื่อผลงาน
const assignedPosition = ref<string>(""); //ตำแหน่งที่ได้รับ
const dateEndPrepareDoc2 = ref<string | null>(); //วันสุดท้ายของการส่งผลงาน

/** function เรียกข้อมูลวันที่ประกาศ*/
async function getDate() {
  await http
    .get(config.API.evaluationDateAnnounce(id.value))
    .then((res) => {
      const data = res.data.result;
      const endDate = new Date(data.dateEndAnnounce);
      endDate.setDate(endDate.getDate() + 180);
      dateEndPrepareDoc2.value = date2Thai(endDate);
    })
    .catch((e) => {
      messageError($q, e);
    });
}

const assignedPosLevel = ref<string>(""); //ระดับตำแหน่งที่ได้รับ

/**
 * function เรียกข้อมูลผลงาน
 */
async function getSigner() {
  await http
    .get(config.API.evaluationSigner(id.value, 2))
    .then((res) => {
      const data = res.data.result;
      if (data) {
        formCommand.elementaryFullName = data.commanderFullnameDoc2;
        formCommand.elementaryPosition = data.commanderPositionDoc2;
        formCommand.elementaryPositionOld = data.commanderPositionOldDoc2;
        formCommand.elementaryOrg = data.commanderOrgDoc2;
        formCommand.elementaryOrgOld = data.commanderOrgOldDoc2;
        formCommand.abovelevelFullname = data.commanderAboveFullnameDoc2;
        formCommand.abovelevelPosition = data.commanderAbovePositionDoc2;
        formCommand.abovelevelPositionOld = data.commanderAbovePositionOldDoc2;
        formCommand.abovelevelOrg = data.commanderAboveOrgDoc2;
        formCommand.abovelevelOrgOld = data.commanderAboveOrgOldDoc2;
        author.value = data.authorDoc2;
        subject.value = data.subjectDoc2;
        assignedPosition.value = data.assignedPosition;
        assignedPosLevel.value = data.assignedPosLevel;
      }
    })
    .catch((e) => {
      messageError($q, e);
    });
}

onMounted(async () => {
  try {
    showLoader();
    await Promise.all([getSigner(), getDate()]);
  } catch (error) {
    console.log(error);
  } finally {
    hideLoader();
  }
});
</script>

<template>
  <div class="row q-col-gutter-sm q-pa-sm">
    <div class="col-12">
      <q-banner
        class="text-weight-bold text-red-14 bg-red-1 text-center rounded-borders"
      >
        <div class="text-weight-bold">
          <q-icon name="info_outline" color="red-14" size="24px" />
          วันสุดท้ายของการส่งผลงานคือวันที่ {{ dateEndPrepareDoc2 }}
        </div>
      </q-banner>
    </div>

    <!-- ผลงาน -->
    <div class="col-12">
      <q-card bordered style="border: 1px solid #d6dee1">
        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">ผลงาน</div>
        <div class="col-12"><q-separator /></div>

        <div class="col-12 q-pa-sm">
          <div class="row q-col-gutter-sm">
            <div class="col-12 row q-col-gutter-sm">
              <q-input
                readonly
                class="col-xs-12 col-sm-6"
                dense
                outlined
                v-model="author"
                label="เจ้าของผลงาน"
                lazy-rules
                hide-bottom-space
              />
              <q-input
                readonly
                class="col-xs-12 col-sm-3"
                dense
                outlined
                v-model="assignedPosition"
                label="ตำแหน่งที่ได้รับ"
                lazy-rules
                hide-bottom-space
              />
              <q-input
                readonly
                class="col-xs-12 col-sm-3"
                dense
                outlined
                v-model="assignedPosLevel"
                label="ระดับตำแหน่งที่ได้รับ"
                lazy-rules
                hide-bottom-space
              />
            </div>

            <div
              class="row col-12 q-col-gutter-sm"
              v-for="(item, index) in subject"
              :key="index"
            >
              <div class="col-12">
                <q-input
                  readonly
                  dense
                  outlined
                  label="ชื่อผลงาน"
                  v-model="subject[index]"
                  hide-bottom-space
                  lazy-rules
                />
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </div>

    <!-- เลือกผู้เซ็นเอกสาร -->
    <div class="col-12">
      <q-card bordered style="border: 1px solid #d6dee1">
        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
          เลือกผู้เซ็นเอกสาร
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="col-12 q-pa-sm">
          <div class="row q-col-gutter-sm">
            <div class="col-xs-12 col-sm-12 row">
              <div class="col-xs-12 col-sm-12 row">
                <div class="text-weight-medium q-pl-sm q-py-sm">
                  ผู้บังคับบัญชาชั้นต้น
                </div>
                <div class="row col-12 q-col-gutter-sm q-pa-sm">
                  <q-input
                    readonly
                    dense
                    class="col-xs-12 col-sm-6"
                    outlined
                    label="ชื่อ-นามสกุล"
                    v-model="formCommand.elementaryFullName"
                    hide-bottom-space
                  />
                  <div class="col-12">
                    <div class="row col-12 q-col-gutter-sm">
                      <q-input
                        readonly
                        class="col-xs-6 col-sm-6"
                        dense
                        outlined
                        v-model="formCommand.elementaryPosition"
                        label="ตำแหน่ง"
                        hide-bottom-space
                      />
                      <q-input
                        readonly
                        class="col-xs-6 col-sm-6"
                        dense
                        outlined
                        v-model="formCommand.elementaryOrg"
                        label="สังกัด"
                        hide-bottom-space
                      />
                      <q-input
                        readonly
                        class="col-xs-6 col-sm-6"
                        dense
                        outlined
                        v-model="formCommand.elementaryPositionOld"
                        label="ตำแหน่งเดิม"
                        hide-bottom-space
                      />
                      <q-input
                        readonly
                        class="col-xs-6 col-sm-6"
                        dense
                        outlined
                        v-model="formCommand.elementaryOrgOld"
                        label="สังกัดเดิม"
                        hide-bottom-space
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row q-col-gutter-sm">
              <div class="col-xs-12 col-sm-12 row">
                <div class="text-weight-medium q-pl-sm q-pt-md q-mb-xs">
                  ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
                </div>
                <div class="row col-12 q-col-gutter-sm q-pa-sm">
                  <q-input
                    readonly
                    ref="abovelevelFullnameRef"
                    dense
                    class="col-xs-12 col-sm-6"
                    outlined
                    v-model="formCommand.abovelevelFullname"
                    label="ชื่อ-นามสกุล"
                    hide-bottom-space
                  />

                  <div class="col-12">
                    <div class="row col-12 q-col-gutter-sm">
                      <q-input
                        readonly
                        class="col-xs-6 col-sm-6"
                        dense
                        outlined
                        v-model="formCommand.abovelevelPosition"
                        label="ตำแหน่ง"
                        hide-bottom-space
                      />

                      <q-input
                        readonly
                        class="col-xs-6 col-sm-6"
                        dense
                        outlined
                        v-model="formCommand.abovelevelOrg"
                        label="สังกัด"
                        hide-bottom-space
                      />
                      <q-input
                        readonly
                        class="col-xs-6 col-sm-6"
                        dense
                        outlined
                        v-model="formCommand.abovelevelPositionOld"
                        label="ตำแหน่งเดิม"
                        hide-bottom-space
                      />
                      <q-input
                        readonly
                        class="col-xs-6 col-sm-6"
                        dense
                        outlined
                        v-model="formCommand.abovelevelOrgOld"
                        label="สังกัดเดิม"
                        hide-bottom-space
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </div>
  </div>
</template>

<style scoped></style>
