<script setup lang="ts">
import {
  ref,
  computed,
  watchEffect,
  watch,
  type PropType,
  onMounted,
} 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";

const $q = useQuasar();
const mixin = useCounterMixin();
const { showLoader, success, messageError, dialogConfirm, hideLoader,date2Thai } = mixin;
const listCheck = 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: "directions",
    align: "left",
    label: "คำสั่ง",
    sortable: true,
    field: "directions",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "dateDirections",
    align: "left",
    label: "วันที่ส่งไปออกคำสั่ง",
    sortable: true,
    field: "dateDirections",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

onMounted(() => {
  const data = [
    {
      id: "1",
      directions: "จำลอง1",
      dateDirections: date2Thai(new Date(),false,true),
    },
    {
      id: "2",
      directions: "จำลอง2",
      dateDirections: date2Thai(new Date(),false,true),
    },
  ];

  rows.value = data;
});
</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>
