<script setup lang="ts">
import { ref, watch } from "vue";
import { QForm, useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import type { QTableProps } from "quasar";
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
import http from "@/plugins/http";
import config from "@/app.config";

const $q = useQuasar();
const mixin = useCounterMixin();
const {
  showLoader,
  success,
  messageError,
  dialogConfirm,
  hideLoader,
  date2Thai,
} = mixin;
const listCheck = ref<string>("");
const id = ref<string>("");
const props = defineProps({
  modal: Boolean,
  personId: {
    type: String,
    default: "",
  },
  close: Function,
});
const rows = ref<any>([]);

const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "commandSubject",
    align: "left",
    label: "คำสั่ง",
    sortable: true,
    field: "commandSubject",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "createdAt",
    align: "left",
    label: "วันที่ส่งไปออกคำสั่ง",
    sortable: true,
    field: "createdAt",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

function getHistory(id: string) {
  showLoader();
  http
    .get(config.API.historyOrderById(id))
    .then((res) => {
      const data = res.data.result;
      rows.value = data.map((item: any) => ({
        commandSubject: item.commandSubject ? item.commandSubject : "-",
        createdAt: item.createdAt
          ? date2Thai(item.createdAt, false, true)
          : "-",
        lastUpdatedAt: item.lastUpdatedAt
          ? date2Thai(item.lastUpdatedAt, false, true)
          : "-",
      }));
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

watch(
  () => props.personId,
  () => {
    if (props.personId) {
      getHistory(props.personId);
    }
  }
);
</script>

<template>
  <q-dialog v-model="props.modal" persistent>
    <q-card style="min-width: 40vw">
      <q-form ref="myForm">
        <DialogHeader :title="`ประวัติการออกคำสั่ง`" :close="props.close" />
        <q-separator />
        <q-card-section>
          <d-table
            ref="table"
            flat
            bordered
            :columns="columns"
            :rows="rows"
            dense
            :rows-per-page-options="[10, 25, 50, 100]"
          >
            <template v-slot:header="props">
              <q-tr :props="props">
                <q-th v-for="col in props.cols" :key="col.name" :props="props">
                  <span class="text-weight-medium" v-html="col.label" />
                </q-th>
              </q-tr>
            </template>
            <template v-slot:body="props">
              <q-tr :props="props" class="cursor-pointer">
                <q-td v-for="col in props.cols" :key="col.name" :props="props">
                  <div v-if="col.name == 'no'">
                    {{ props.rowIndex + 1 }}
                  </div>
                  <div>
                    {{ col.value }}
                  </div>
                </q-td>
              </q-tr>
            </template>
          </d-table>
        </q-card-section>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped>
.my-menu-link {
  background: #ebf9f7 !important;
  border-radius: 5px;
  border: 1px solid #1bb19ab8;
  color: #1bb19ab8 !important;
}
</style>
