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

import { useCounterMixin } from "@/stores/mixin";

import type { QTableProps } from "quasar";
import type { DataOption } from "@/modules/18_command/interface/index/Main";

import DialogHeader from "@/components/DialogHeader.vue";

const $q = useQuasar();
const { dialogConfirm, dialogMessageNotify } = useCounterMixin();

const step = ref<number>(4); //ขั้นตอนการลงนาม

//แบบร่าง
const isDraft = ref<boolean>(false); //ทำแบบร่างเสร็จสิ้น

// แบบร่าง
const isCheckDraft = ref<boolean>(true); //เช็คทำแบบร่างเสร็จสิ้น
const isAttachment = ref<boolean>(true); //เช็คบัญชีแนบท้าย
const fileUploadOrder = ref<any>(null); //ไฟล์คำสั่ง
const fileUploadTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
const fileOrder = ref<any>(null); //ไฟล์คำสั่ง
const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
const orderNo = ref<string>(""); //เลขที่คำสั่ง
const affectDate = ref<Date | null>(null); //วันที่ลงนาม
const excecuteDate = ref<Date | null>(null); //วันที่คำสั่งมีผล
const modalSelect = ref<boolean>(false); //popup เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
const typeFilter = ref<string>("firstname");
const search = ref<string>("");
const typeFilterOp = ref<DataOption[]>([
  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
  { id: "firstname", name: "ชื่อ" },
  { id: "lastname", name: "นามสกุล" },
]);
const rows = ref<any[]>([
  {
    citizenId: "6796519798790",
    firstName: "ว่าที่ร้อยตรีวรรนิมมามานา วงศ์วโรทัย",
  },
]); //รายชื่อผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
const selected = ref<any[]>([]); //เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
const columns = ref<QTableProps["columns"]>([
  {
    name: "citizenId",
    align: "left",
    label: "เลขประจำตัวประชาชน",
    sortable: true,
    field: "citizenId",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },

  {
    name: "fullName",
    align: "left",
    label: "ชื่อ-นามสกุล",
    sortable: true,
    field: "fullName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },

  {
    name: "position",
    align: "left",
    label: "ตำแหน่ง",
    sortable: true,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

//รอผู้มีอำนาจลงนามอนุมัติ
const rowsAuthority = ref<any[]>([
  {
    fullName: "ว่าที่ร้อยตรีวรรนิมมามานา วงศ์วโรทัย",
    comment: "ความคิดเห็น",
    position: "หัวหน้าสำนัก",
  },
  {
    fullName: "นายศรัณย์ ศิลาดี",
    comment: "",
    position: "ผู้อำนวนการ",
  },
]); //รายชื่อผู้อำนาจลงนามอนุมัติ
const modalComment = ref<boolean>(false); //popup แสดงความเห็น
const reason = ref<string>("");

//รอออกคำสั่ง
const isCheckOrder = ref<boolean>(true); //เช็ครอออกคำสั่ง

/**
 * ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ
 */
function onConfirmDraft() {
  if (
    orderNo.value !== "" ||
    affectDate.value !== null ||
    excecuteDate.value !== null
  ) {
  } else {
    dialogMessageNotify(
      $q,
      "ไม่สามารถดำเนินการต่อได้ กรุณากรอกเลขที่คำสั่ง วันที่ลงนาม และวันที่คำสั่งมีผลให้ครบ"
    );
  }
}

function onSearchData() {}

function onConfirmSendToCommander() {
  dialogConfirm(
    $q,
    () => {
      step.value++;
      isCheckDraft.value = true;
      onCloseDialog();
    },
    "ยืนยันการส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ",
    "คุณต้องการส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจใช่หรือไม่?"
  );
}

function updateSelect() {
  search.value = "";
}

function onComment() {
  modalComment.value = true;
}

function onSubmitComment() {
  dialogConfirm($q, () => {
    rowsAuthority.value[1].comment = reason.value;
    onCloseDialog();
  });
}

function onCloseDialog() {
  modalSelect.value = false;
  modalComment.value = false;
}
</script>

<template>
  <div class="q-px-lg q-py-md">
    <q-timeline color="blue-5">
      <!-- แบบร่าง -->
      <q-timeline-entry
        title="แบบร่าง"
        :icon="step === 1 ? 'mdi-pencil' : step > 1 ? 'done' : ''"
      >
        <div class="row q-col-gutter-sm">
          <div :class="isAttachment ? 'col-12' : 'col-6'">
            <fieldset class="border q-px-lg q-py-sm">
              <legend class="text-header q-px-sm">
                อัปโหลดเอกสารสแกนกลับเข้าสู่ระบบ
              </legend>
              <div class="row q-col-gutter-md q-mb-md">
                <!-- คำสั่ง -->
                <div :class="isAttachment ? 'col-6' : 'col-12'">
                  <label class="text-file">คำสั่ง</label>
                  <div class="text-right" v-if="fileOrder">
                    <q-btn flat dense color="primary" icon="mdi-eye" rounded>
                      <q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
                    </q-btn>
                    <!-- :href="OrderPDFUpload" -->
                    <q-btn
                      rounded
                      type="a"
                      flat
                      dense
                      color="red"
                      icon="mdi-download"
                      target="_blank"
                    >
                      <q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
                    </q-btn>
                  </div>
                  <q-file
                    outlined
                    dense
                    v-model="fileUploadOrder"
                    label="เลือกไฟล์คำสั่ง"
                    hide-bottom-space
                    :rules="[(val:string) => val || 'กรุณาเลือกไฟล์ไฟล์คำสั่ง']"
                    accept=".pdf"
                  >
                    <template v-slot:prepend>
                      <q-icon name="attach_file" />
                    </template>
                  </q-file>
                </div>

                <!-- เอกสารแนบท้าย -->
                <div v-if="isAttachment" class="col-6">
                  <label class="text-file">เอกสารแนบท้าย</label>
                  <div class="text-right" v-if="fileTailer">
                    <q-btn flat dense color="primary" icon="mdi-eye" rounded>
                      <q-tooltip>ดูเอกสารแนบท้าย</q-tooltip>
                    </q-btn>
                    <!-- :href="TailerPDFUpload" -->
                    <q-btn
                      type="a"
                      rounded
                      flat
                      dense
                      color="red"
                      icon="mdi-download"
                      target="_blank"
                    >
                      <q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
                    </q-btn>
                  </div>

                  <q-file
                    outlined
                    dense
                    v-model="fileUploadTailer"
                    label="เลือกไฟล์เอกสารแนบท้าย"
                    hide-bottom-space
                    :rules="[(val:string) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
                    accept=".pdf"
                  >
                    <template v-slot:prepend>
                      <q-icon name="attach_file" />
                    </template>
                  </q-file>
                </div>
              </div>
            </fieldset>
          </div>

          <div class="col-12" v-if="!isCheckDraft">
            <q-btn
              @click.prevent="onConfirmDraft"
              label="เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง"
              color="public"
              :disable="fileOrder === null || fileTailer === null"
            />
          </div>
        </div>
      </q-timeline-entry>

      <!-- รอผู้มีอำนาจลงนามอนุมัติ -->
      <q-timeline-entry
        title="รอผู้มีอำนาจลงนามอนุมัติ"
        :icon="step === 2 ? 'mdi-pencil' : step > 2 ? 'done' : ''"
        :color="step < 2 ? 'grey-4' : ''"
      >
        <div class="row q-col-gutter-sm" v-if="isCheckDraft">
          <div class="">
            <q-list bordered separator>
              <q-item v-for="(item, index) in rowsAuthority" :key="index">
                <q-item-section>
                  <q-item-label
                    >{{ item.fullName }}
                    {{ `(${item.position})` }}</q-item-label
                  >
                  <q-item-label caption lines="2">{{
                    item.comment
                  }}</q-item-label>
                </q-item-section>

                <q-item-section
                  side
                  top
                  v-if="
                    index === rowsAuthority.length - 1 && item.comment === ''
                  "
                >
                  <q-item-label caption>
                    <q-btn
                      flat
                      dense
                      color="info"
                      icon="info"
                      round
                      @click.prevent="onComment"
                    >
                      <q-tooltip>แสดงความเห็น </q-tooltip>
                    </q-btn>
                  </q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </div>

          <div
            class="col-12"
            v-if="rowsAuthority[rowsAuthority.length - 1].comment !== ''"
          >
            <q-btn
              @click.prevent="onConfirmDraft"
              label="เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง"
              color="public"
            />
          </div>
        </div>
      </q-timeline-entry>

      <!-- รอออกคำสั่ง -->
      <q-timeline-entry
        title="รอออกคำสั่ง"
        :icon="step === 3 ? 'mdi-pencil' : step > 3 ? 'done' : ''"
        :color="step < 3 ? 'grey-4' : ''"
      >
        <!-- <div class="row q-col-gutter-sm" v-if="isCheckAuthority">
          <div class="col-12">รอออกคำสั่ง</div>
        </div> -->
      </q-timeline-entry>

      <!-- รอออกคำสั่ง -->
      <q-timeline-entry
        title="ออกคำสั่งเสร็จสิ้น"
        :icon="step === 4 ? 'mdi-pencil' : step > 4 ? 'done' : ''"
        :color="step < 4 ? 'grey-4' : ''"
      >
        <div class="row q-col-gutter-sm" v-if="isCheckOrder">
          <div class="q-pa-md q-gutter-sm">
            <q-btn
              color="blue-5"
              icon-right="mdi-download"
              label="ดาวน์โหลดคำสั่งที่เซ็นต์แล้ว"
            />
            <q-btn
              color="blue-5"
              icon-right="mdi-download"
              label="ดาวน์โหลดบัญชีแนบท้ายที่เซ็นต์แล้ว"
            />
          </div>
        </div>
      </q-timeline-entry>
    </q-timeline>
  </div>

  <!-- เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง -->
  <q-dialog v-model="modalSelect" persistent>
    <q-card style="min-width: 70%">
      <DialogHeader
        :tittle="'เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง'"
        :close="onCloseDialog"
      />
      <q-separator />

      <q-card-section>
        <div class="col-12 q-col-gutter-sm">
          <div class="col-12 row q-col-gutter-md items-start">
            <div class="col-12 col-sm-6 col-md-3">
              <q-select
                label="ค้นหาจาก"
                v-model="typeFilter"
                :options="typeFilterOp"
                emit-value
                dense
                @update:model-value="updateSelect"
                map-options
                outlined
                option-label="name"
                option-value="id"
              />
            </div>

            <div class="col-12 col-sm-6 col-md-6">
              <q-input
                v-model="search"
                outlined
                clearable
                hide-bottom-space
                dense
                label="คำค้น"
                @clear="search = ''"
              />
            </div>

            <div class="col-12 col-sm-6 col-md-3">
              <q-btn
                color="primary"
                icon="search"
                label="ค้นหา"
                class="full-width q-pa-sm"
                @click.prevent="onSearchData"
              >
              </q-btn>
            </div>
          </div>

          <div class="col-12">
            <d-table
              flat
              :columns="columns"
              :rows="rows"
              row-key="id"
              dense
              selection="single"
              v-model:selected="selected"
            >
              <template v-slot:header-selection="scope">
                <q-checkbox
                  keep-color
                  color="primary"
                  dense
                  v-model="scope.checkBox"
                />
              </template>
              <template v-slot:header="props">
                <q-tr :props="props">
                  <q-th class="text-center"> </q-th>

                  <q-th
                    v-for="col in props.cols"
                    :key="col.name"
                    :props="props"
                  >
                    <span class="text-weight-medium">{{ col.label }}</span>
                  </q-th>
                </q-tr>
              </template>
              <template v-slot:body="props">
                <q-tr :props="props">
                  <q-td class="text-center">
                    <q-checkbox
                      keep-color
                      color="primary"
                      dense
                      v-model="props.selected"
                    />
                  </q-td>

                  <q-td
                    v-for="col in props.cols"
                    :key="col.name"
                    :props="props"
                  >
                    <div>
                      {{ col.value ?? "-" }}
                    </div>
                  </q-td>
                </q-tr>
              </template>
            </d-table>
          </div>
        </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right">
        <q-btn
          :disable="selected.length === 0"
          @click.prevent="onConfirmSendToCommander"
          label="ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ"
          color="public"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>

  <!-- แสดงความเห็น -->
  <q-dialog v-model="modalComment" persistent>
    <q-card style="min-width: 40%">
      <q-form greedy @submit.prevent @validation-success="onSubmitComment">
        <DialogHeader :tittle="'แสดงความเห็น'" :close="onCloseDialog" />
        <q-separator />

        <q-card-section>
          <div class="row col-12 q-col-gutter-sm">
            <div class="col-12">
              <q-input
                dense
                outlined
                v-model="reason"
                label="ความเห็น"
                type="textarea"
                :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกความเห็น'}`]"
                hide-bottom-space
                lazy-rules
              />
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right">
          <q-btn color="secondary" label="บันทึกความเห็น" type="onSubmit" />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style lang="scss" scoped>
.border {
  border-radius: 10px;
  border: 1px solid #e9eaec;
}

.text-header {
  color: #34373c;
  font-size: 1rem;
  font-weight: 300;
}
</style>
