<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: "lastUpdatedAt",
    align: "left",
    label: "วันที่ส่งไปออกคำสั่ง",
    sortable: true,
    field: "lastUpdatedAt",
    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>
