<!-- page:จัดการรอบการสอบ สรรหา -->
<template>
  <div class="toptitle text-dark col-12 row items-center">
    จัดการรอบสอบแข่งขัน
  </div>
  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
    <div>
      <Table
        style="max-height: 80vh"
        :rows="rows"
        :columns="columns"
        :filter="filter"
        :visible-columns="visibleColumns"
        v-model:inputfilter="filter"
        v-model:inputvisible="visibleColumns"
        :pagination="initialPagination"
        :nornmalData="true"
        :add="clickAdd"
        :paging="true"
        :titleText="''"
      >
        <template #columns="props">
          <q-tr :props="props" class="cursor-pointer">
            <q-td
              v-for="col in props.cols"
              :key="col.name"
              :props="props"
              @click="clickDetail(props.row.id)"
            >
              <div v-if="col.name == 'no'">
                {{ props.rowIndex + 1 }}
              </div>
              <div v-else-if="col.name == 'name'" class="table_ellipsis2">
                {{ col.value }}
              </div>
              <div v-else-if="col.name == 'year'" class="table_ellipsis2">
                {{ col.value + 543 }}
              </div>
              <div v-else-if="col.name == 'scoreCount'" class="table_ellipsis2">
                <q-btn
                  flat
                  dense
                  size="12px"
                  round
                  color="green"
                  @click.stop.prevent="clickEdit(props.row.id)"
                  v-if="col.value == null"
                >
                  <q-icon name="mdi-file-excel-outline" size="20px" />
                  <!-- นำเข้าไฟล์ผลคะแนนสอบ -->
                  <q-tooltip>นำเข้าไฟล์ผลคะแนนสอบ</q-tooltip>
                </q-btn>
                <div v-else>
                  {{ col.value }}
                  <q-btn
                    dense
                    size="12px"
                    flat
                    round
                    color="green"
                    @click.stop.prevent="clickEdit(props.row.id)"
                    icon="mdi-file-excel-outline"
                  >
                    <q-tooltip>นำเข้าไฟล์ผลคะแนนสอบอีกครั้ง</q-tooltip>
                  </q-btn>

                  <q-btn
                    dense
                    size="12px"
                    flat
                    round
                    color="indigo"
                    @click.stop.prevent="clickPassExam(props.row.id)"
                    icon="mdi-clipboard-arrow-down"
                  >
                    <q-tooltip>ดาวน์โหลดรายชื่อผู้สอบแข่งขันได้</q-tooltip>
                  </q-btn>
                </div>
              </div>
              <div v-else-if="col.name == 'examCount'" class="table_ellipsis2">
                <q-btn
                  flat
                  dense
                  size="12px"
                  color="green"
                  round
                  @click.stop.prevent="clickUpload(props.row.id)"
                  v-if="col.value == null || col.value == '0'"
                >
                  <q-icon name="mdi-file-excel-outline" size="20px" />
                  <q-tooltip>นำเข้าไฟล์ผู้สมัครสอบ</q-tooltip>
                </q-btn>
                <div v-else>
                  {{ col.value }}

                  <q-btn
                    dense
                    size="12px"
                    flat
                    round
                    color="green"
                    @click.stop.prevent="clickUpload(props.row.id)"
                    icon="mdi-file-excel-outline"
                  >
                    <q-tooltip>นำเข้าไฟล์ผู้สมัครสอบอีกครั้ง</q-tooltip>
                  </q-btn>

                  <q-btn
                    dense
                    size="12px"
                    flat
                    round
                    color="indigo"
                    @click.stop.prevent="clickCandidateList(props.row.id)"
                    icon="mdi-clipboard-arrow-down"
                  >
                    <q-tooltip>ดาวน์โหลดรายชื่อผู้มีสิทธิ์สอบ</q-tooltip>
                  </q-btn>
                </div>
              </div>
              <div v-else>
                {{ col.value }}
              </div>
            </q-td>
            <q-td>
              <q-btn
                dense
                size="12px"
                flat
                round
                color="primary"
                @click="clickEditPeriod(props.row.id)"
                icon="mdi-pencil-outline"
              >
                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
              </q-btn>
              <q-btn
                dense
                size="12px"
                flat
                round
                color="red"
                @click="clickDelete(props.row.id)"
                icon="mdi-delete"
              >
                <q-tooltip>ลบข้อมูล</q-tooltip>
              </q-btn>

              <q-btn
                color="info"
                flat
                dense
                round
                size="12px"
                icon="mdi-history"
                @click="clickHistory(props.row.id)"
              >
                <q-tooltip>แสดงประวัติการทำงาน</q-tooltip>
              </q-btn>
            </q-td>
          </q-tr>
        </template>
      </Table>
    </div>
  </q-card>

  <HistoryTable
    :rows="rowsHistory"
    :columns="columnsHistory"
    :filter="filterHistory"
    :visible-columns="visibleColumnsHistory"
    v-model:modal="modalHistory"
    v-model:inputvisible="visibleColumnsHistory"
    v-model:tittle="tittleHistory"
    v-model:inputfilter="filterHistory"
  >
    <template #columns="props">
      <q-tr :props="props">
        <q-td v-for="col in props.cols" :key="col.name" :props="props">
          <div v-if="col.name == 'isActive'" class="">
            <q-icon
              v-if="col.value == false"
              name="mdi-close"
              color="red"
              class="text-h5"
            />
            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
          </div>
          <div v-else-if="col.name == 'createdAt'" class="">
            {{ textDate(col.value) }}
          </div>

          <div v-else class="">
            {{ col.value }}
          </div>
        </q-td>
      </q-tr>
    </template>
  </HistoryTable>

  <!-- popup Edit window-->
  <q-dialog v-model="modalAdd" persistent>
    <q-card style="width: 600px">
      <q-form ref="myForm">
        <DialogHeader :tittle="textTittle" :close="clickClose" />
        <q-separator />
        <q-card-section>
          <div class="col-12 row items-center q-col-gutter-sm">
            <div class="col-12">
              <q-input
                outlined
                v-model="name"
                label="ชื่อการสอบแข่งขัน"
                dense
                autogrow
                lazy-rules
                autofocus
                hide-bottom-space
              ></q-input>
            </div>
            <div class="col-12">
              <q-input
                outlined
                v-model="order"
                label="ครั้งที่"
                dense
                autogrow
                lazy-rules
                autofocus
                hide-bottom-space
              ></q-input>
            </div>
            <div class="col-12">
              <q-input
                outlined
                v-model="year"
                label="ปีงบประมาณ"
                dense
                autogrow
                lazy-rules
                autofocus
                hide-bottom-space
              ></q-input>
            </div>
            <div class="col-12">
              <q-file
                v-model="files"
                dense
                label="เลือกไฟล์รายชื่อผู้สมัครสอบแข่งขัน"
                outlined
                use-chips
                multiple
              >
                <template v-slot:prepend>
                  <q-icon name="attach_file" />
                </template>
              </q-file>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions class="text-primary q-py-sm">
          <q-space />
          <q-btn
            flat
            round
            color="public"
            @click="checkSave"
            icon="mdi-content-save-outline"
          >
            <q-tooltip>บันทึก</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>

  <q-dialog v-model="modalScore" persistent>
    <q-card style="width: 600px">
      <q-form ref="myFormScore">
        <DialogHeader :tittle="textTittleScore" :close="clickCloseScore" />
        <q-separator />
        <q-card-section>
          <div class="col-12 row items-center q-col-gutter-sm">
            <div class="col-12">
              <q-file
                v-model="files_score"
                dense
                label="เลือกไฟล์ผลคะแนนสอบแข่งขัน"
                outlined
                use-chips
                multiple
              >
                <template v-slot:prepend>
                  <q-icon name="attach_file" />
                </template>
              </q-file>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions class="text-primary q-py-sm">
          <q-space />
          <q-btn
            flat
            round
            color="public"
            @click="checkSaveScore"
            icon="mdi-content-save-outline"
          >
            <q-tooltip>บันทึก</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>

  <q-dialog v-model="modalCandidate" persistent>
    <q-card style="width: 600px">
      <q-form ref="myFormScore">
        <DialogHeader
          :tittle="textTittleCandidate"
          :close="clickCloseCandidate"
        />
        <q-separator />
        <q-card-section>
          <div class="col-12 row items-center q-col-gutter-sm">
            <div class="col-12">
              <q-file
                v-model="files_candidate"
                dense
                label="เลือกไฟล์ผู้สมัครสอบแข่งขัน"
                outlined
                use-chips
                multiple
              >
                <template v-slot:prepend>
                  <q-icon name="attach_file" />
                </template>
              </q-file>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions class="text-primary q-py-sm">
          <q-space />
          <q-btn
            flat
            round
            color="public"
            @click="checkSaveCandidate"
            icon="mdi-content-save-outline"
          >
            <q-tooltip>บันทึก</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import type {
  ResponseRecruitPeriod,
  ResponseHistoryObject,
} from "@/modules/03_recruiting/interface/response/Period";
import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
import Table from "@/modules/03_recruiting/components/Table.vue";
import DialogHeader from "@/components/DialogHeader.vue";

import http from "@/plugins/http";
import config from "@/app.config";
import HistoryTable from "@/components/TableHistory.vue";

const $q = useQuasar(); // show dialog
const router = useRouter();
const name = ref<string>("");
const year = ref<number>(new Date().getFullYear() + 543);
const order = ref<number>(1);
const mixin = useCounterMixin();
const { success, dateToISO, dateText, showLoader, hideLoader } = mixin;
const files = ref<any>(null);
const files_score = ref<any>(null);
const files_candidate = ref<any>(null);
const modalAdd = ref<boolean>(false);
const modalScore = ref<boolean>(false);
const modalCandidate = ref<boolean>(false);
const selected_row_id = ref<string>("");
const rowsHistory = ref<ResponseHistoryObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติการนำเข้าข้อมูล"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const modalError = ref<boolean>(false); // modal สำหรับแจ้งเตือนerror
const modalErrorTittle = ref<string>(""); // tittle modal error
const modalErrorDetail = ref<string>(""); // detail modal error
const statusCode = ref<number>();
const filter = ref<string>(""); //search data table
const textTittle = ref<string>("");
const { messageError } = mixin;
const textTittleScore = ref<string>("");
const textTittleCandidate = ref<string>("");
const rows = ref<any>([]);
const initialPagination = ref<Pagination>({
  rowsPerPage: 0,
});
const visibleColumns = ref<String[]>([
  "no",
  "name",
  "order",
  "year",
  "examCount",
  "scoreCount",
]);

const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: true,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "name",
    align: "left",
    label: "รอบสอบแข่งขัน",
    sortable: true,
    field: "name",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "order",
    align: "left",
    label: "ครั้งที่",
    sortable: true,
    field: "order",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "year",
    align: "left",
    label: "ปีงบประมาณ",
    sortable: true,
    field: "year",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "examCount",
    label: "จำนวนผู้สอบทั้งหมด",
    align: "right",
    field: "examCount",
    sortable: true,
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "scoreCount",
    label: "จำนวนที่บันทึกผลสอบ",
    align: "right",
    field: "scoreCount",
    sortable: true,
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

const columnsHistory = ref<QTableProps["columns"]>([
  {
    name: "description",
    align: "left",
    label: "รายละเอียด",
    sortable: true,
    field: "description",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "createdAt",
    align: "center",
    label: "วันที่ดำเนินการ",
    sortable: true,
    field: "createdAt",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "createdFullName",
    align: "left",
    label: "ผู้ดำเนินการ",
    sortable: true,
    field: "createdFullName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

const visibleColumnsHistory = ref<String[]>([
  "description",
  "createdAt",
  "createdFullName",
]);

onMounted(async () => {
  hideLoader();
  await fetchData();
});

/**
 * ฟังก์ชันแปลง date เป็นภาษาไทย
 * @param value วันที่ type datetime ที่จะแปลงเป็นไทย
 */
const textDate = (value: Date) => {
  return dateText(value);
};

const fetchData = async () => {
  showLoader();
  await http
    .get(config.API.getCandidates)
    .then((res) => {
      const data = res.data.result;
      let result: ResponseRecruitPeriod[] = [];
      if (data.length > 0) {
        data.map((r: ResponseRecruitPeriod) => {
          if (r.score != null) {
            r.scoreCount = r.score.scoreCount;
            r.scoreImportDate = r.score.importDate;
          }
          result.push(r);
        });
      }

      rows.value = result;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

const clickPassExam = (id: string) => {
  window.open(config.API.exportPassExamList(id));
};

const clickCandidateList = (id: string) => {
  window.open(config.API.exportCandidateList(id));
};

const clickDetail = (id: string) => {
  router.push(`/compete/import/${id}`);
};

const clickEdit = async (id: string) => {
  modalScore.value = true;
  textTittleScore.value = "นำเข้าผลคะแนนสอบแข่งขัน";
  selected_row_id.value = id;
};

const clickUpload = async (id: string) => {
  modalCandidate.value = true;
  textTittleCandidate.value = "นำเข้าผู้สมัครสอบแข่งขัน";
  selected_row_id.value = id;
};

const clickEditPeriod = (id: string) => {
  router.push(`/compete/period/${id}`);
};

const clickHistory = async (id: string) => {
  modalHistory.value = true;
  showLoader();
  await http
    .get(config.API.getImportHistory(id))
    .then((res) => {
      const data = res.data.result;
      rowsHistory.value = [];
      if (data.length > 0) {
        data.map((i: ResponseHistoryObject) => {
          rowsHistory.value.push({
            createdAt: i.createdAt,
            createdFullName: i.createdFullName,
            createdUserId: i.createdUserId,
            id: i.id,
            isActive: i.isActive,
            lastUpdateFullName: i.lastUpdateFullName,
            lastUpdateUserId: i.lastUpdateUserId,
            lastUpdatedAt: i.lastUpdatedAt,
            description: i.description,
          });
        });
      }
    })
    .catch((e) => {
      modalError.value = true;
      modalErrorTittle.value = "ไม่พบประวัติการเผยแพร่";
      modalErrorDetail.value = e.response.data.message;
      statusCode.value = e.response.data.status;
    })
    .finally(async () => {
      hideLoader();
    });
};

const clickDelete = (id: string) => {
  $q.dialog({
    title: "ยืนยันการลบข้อมูล",
    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
    cancel: {
      flat: true,
      color: "negative",
    },
    persistent: true,
  })
    .onOk(async () => {
      showLoader();
      await http
        .delete(config.API.deleteCandidates(id))
        .then((res) => {
          success($q, "ลบข้อมูลการสอบสำเร็จ");
          fetchData();
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    })
    .onCancel(() => {})
    .onDismiss(() => {});
};

const clickAdd = () => {
  router.push({ name: "competePeriodAdd" });
};

const clickClose = async () => {
  modalAdd.value = false;
  await fetchData();
};

const clickCloseScore = async () => {
  modalScore.value = false;
  await fetchData();
};

const clickCloseCandidate = async () => {
  modalCandidate.value = false;
  await fetchData();
};

const checkSaveCandidate = async () => {
  const fd = new FormData();
  fd.append("attachment", files_candidate.value[0]);
  showLoader();
  await http
    .post(config.API.uploadCandidates(selected_row_id.value), fd)
    .then((res) => {
      success($q, "นำเข้าข้อมูลผู้สมัครสอบสำเร็จ");
      modalCandidate.value = false;
      selected_row_id.value = "";
      fetchData();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

const checkSaveScore = async () => {
  const fd = new FormData();
  fd.append("attachment", files_score.value[0]);
  showLoader();
  await http
    .post(config.API.saveScores(selected_row_id.value), fd)
    .then((res) => {
      success($q, "นำเข้าข้อมูลผลคะแนนสอบสำเร็จ");
      modalScore.value = false;
      selected_row_id.value = "";
      fetchData();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

const checkSave = async () => {
  const fd = new FormData();
  fd.append("attachment", files.value[0]);
  fd.append("year", year.value.toString());
  fd.append("order", order.value.toString());
  fd.append("name", name.value);
  showLoader();
  await http
    .post(config.API.saveCandidates, fd)
    .then((res) => {
      success($q, "นำเข้าข้อมูลผู้สมัครสอบแข่งขันสำเร็จ");
      modalAdd.value = false;
      fetchData();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};
</script>

<style></style>
