<script setup lang="ts">
import { ref, reactive, watch, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import type {
  MyObjectRef,
  RequestItemsHistoryObject,
  FormMain,
} from "@/modules/04_registryNew/interface/index/government";
import DialogHeader from "@/components/DialogHeader.vue";
import { useQuasar } from "quasar";
import type { QTableProps } from "quasar";
import { useRoute } from "vue-router";

import http from "@/plugins/http";
import config from "@/app.config";

/** ฟังชั่นกลาง */
const route = useRoute();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
  date2Thai,
  dateToISO,
  dialogConfirm,
  messageError,
  showLoader,
  hideLoader,
} = mixin;

const profileId = ref<string>(route.params.id.toString());
/** ตัวแปรข้อมูลหลัก */
const formMain = reactive<FormMain>({
  ocId: "", //สังกัด
  positionId: "", //ตำแหน่ง
  positionLine: "", //สายงาน
  positionLevel: "", //ระดับ
  numberId: "", //เลขที่ตำแหน่ง
  positionExecutive: "", //ตำแหน่งทางการบริหาร
  positionExecutiveSide: "", //ด้านตำแหน่งทางการบริหาร
  positionType: "", //ประเภท
  positionPathSide: "", //ด้าน/สาขา

  containDate: null, //วันที่สั่งบรรจุ
  workDate: null, //วันที่เริ่มปฏิบัติราชการ
  reasonSameDate: "",
  retireDate: null, //วันเกษียณอายุ
  ageAll: {
    year: 0,
    month: 0,
    day: 0,
  }, //อายุราชการ
  absent: 0, //ขาดราชการ
  age: 0, //อายุราชการเกื้อกูล
});

/** dialog */
const modalEdit = ref<boolean>(false);
const modalHistory = ref<boolean>(false);
const rowsHistory = ref<RequestItemsHistoryObject[]>([]);

const filterKeyword = ref<string>("");

const containDate = ref<Date | null>(null);
const workDate = ref<Date | null>(null);
const reasonSameDate = ref<string | null>(null);
const containDateRef = ref<object | null>(null);
const workDateRef = ref<object | null>(null);
const reasonSameDateRef = ref<object | null>(null);

const objectRef: MyObjectRef = {
  containDate: containDateRef,
  workDate: workDateRef,
  reasonSameDate: reasonSameDateRef,
};

const fieldLabels = {
  ocId: "สังกัด",
  positionId: "ตำแหน่ง",
  numberId: "เลขที่ตำแหน่ง",
  positionExecutive: "ตำแหน่งทางการบริหาร",
  positionExecutiveSide: "ด้านทางการบริหาร",
  positionLine: "สายงาน",
  positionLevel: "ระดับ",
  positionType: "ประเภท",
  positionPathSide: "ด้าน/สาขา",
};

const visibleColumnsHistory = ref<String[]>([
  "oc",
  "position",
  "positionPathSide",
  "posNo",
  "positionLine",
  "positionType",
  "positionLevel",
  "positionExecutive",
  "positionExecutiveSide",
  "dateAppoint",
  "dateStart",
  "retireDate",
  "govAge",
  "govAgeAbsent",
  "govAgePlus",
  "reasonSameDate",
  "lastUpdateFullName",
  "lastUpdatedAt",
]);

const columnsHistory = ref<QTableProps["columns"]>([
  {
    name: "oc",
    align: "left",
    label: "สังกัด",
    sortable: true,
    field: "oc",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "positionPathSide",
    align: "left",
    label: "ตำแหน่ง",
    sortable: true,
    field: "positionPathSide",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "position",
    align: "left",
    label: "ด้าน/สาขา",
    sortable: true,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "posNo",
    align: "left",
    label: "ตำแหน่งเลขที่",
    sortable: true,
    field: "posNo",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "positionLine",
    align: "left",
    label: "สายงาน",
    sortable: true,
    field: "positionLine",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "positionType",
    align: "left",
    label: "ประเภท",
    sortable: true,
    field: "positionType",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "positionLevel",
    align: "left",
    label: "ระดับ",
    sortable: true,
    field: "positionLevel",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "positionExecutive",
    align: "left",
    label: "ตำแหน่งทางการบริหาร",
    sortable: true,
    field: "positionExecutive",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "positionExecutiveSide",
    align: "left",
    label: "ด้านทางการบริหาร",
    sortable: true,
    field: "positionExecutiveSide",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "dateAppoint",
    align: "left",
    label: "วันที่บรรจุ",
    sortable: true,
    field: "dateAppoint",
    format: (v) => date2Thai(v),
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "dateStart",
    align: "left",
    label: "เริ่มปฎิบัติราชการ",
    sortable: true,
    field: "dateStart",
    format: (v) => date2Thai(v),
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "retireDate",
    align: "left",
    label: "วันเกษียณอายุ",
    sortable: true,
    field: "retireDate",
    format: (v) => date2Thai(v),
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "govAge",
    align: "left",
    label: "อายุราชการ",
    sortable: true,
    field: "govAge",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "govAgeAbsent",
    align: "left",
    label: "ขาดราชการ",
    sortable: true,
    field: "govAgeAbsent",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "govAgePlus",
    align: "left",
    label: "อายุราชการเกื้อกูล",
    sortable: true,
    field: "govAgePlus",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "reasonSameDate",
    align: "left",
    label: "เหตุผลกรณีไม่ตรงวัน",
    sortable: true,
    field: "reasonSameDate",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "lastUpdateFullName",
    align: "left",
    label: "ผู้ดำเนินการ",
    sortable: true,
    field: "lastUpdateFullName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "lastUpdatedAt",
    align: "left",
    label: "วันที่แก้ไข",
    sortable: true,
    field: "lastUpdatedAt",
    format: (v) => date2Thai(v),
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);

/** เปิด dialog */
function openDialogEdit() {
  modalEdit.value = true;

  containDate.value = formMain.containDate ? formMain.containDate : null;
  workDate.value = formMain.workDate ? formMain.workDate : null;
  reasonSameDate.value = formMain.reasonSameDate
    ? formMain.reasonSameDate
    : null;
}

function openDialogHistory() {
  modalHistory.value = true;
  getDataHistory();
}
/** ปิด dialog */
function closeDialog() {
  modalEdit.value = false;
  containDate.value = null;
  workDate.value = null;
  reasonSameDate.value = null;
}

/** validate check*/
function validateForm() {
  const hasError = [];
  for (const key in objectRef) {
    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
      const property = objectRef[key];
      if (property.value && typeof property.value.validate === "function") {
        const isValid = property.value.validate();
        hasError.push(isValid);
      }
    }
  }
  if (hasError.every((result) => result === true)) {
    onSubmit();
  }
}

function onSubmit() {
  dialogConfirm($q, () => {
    showLoader();
    http
      .patch(config.API.profileNewGovernmentById(profileId.value), {
        dateAppoint: containDate.value,
        dateStart: workDate.value,
        reasonSameDate:
          dateToISO(containDate.value as Date) ===
          dateToISO(workDate.value as Date)
            ? ""
            : reasonSameDate.value,
      })
      .then((res) => {
        closeDialog();
        getData();
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });

    closeDialog();
  });
}

/** ดึงข้อมูลราชการ */
function getData() {
  showLoader();
  http
    .get(config.API.profileNewGovernmentById(profileId.value))
    .then((res) => {
      const data = res.data.result;
      formMain.ocId = data.org; //สังกัด
      formMain.positionId = data.position; //ตำแหน่ง
      formMain.positionLine = data.positionField; //สายงาน
      formMain.positionLevel = data.posLevel; //ระดับ
      formMain.numberId = data.posMasterNo; //เลขที่ตำแหน่ง
      formMain.positionType = data.posType; //ประเภท
      formMain.positionExecutive = data.posExecutive; //ตำแหน่งทางการ บริหาร
      formMain.positionPathSide = data.positionArea; //ด้านสาขา
      formMain.positionExecutiveSide = data.positionExecutiveField; //ด้านทางการบริหาร

      formMain.containDate = data.dateAppoint;
      formMain.workDate = data.dateStart;
      formMain.reasonSameDate = data.reasonSameDate;
      formMain.retireDate = data.retireDate;
      formMain.ageAll = data.govAge;
      formMain.absent = data.govAgeAbsent;
      formMain.age = data.govAgePlus;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/** ดึงข้อมูลประวัติ */
function getDataHistory() {
  showLoader();
  http
    .get(config.API.profileNewGovernmentHistory(profileId.value))
    .then((res) => {
      let data = res.data.result;
      rowsHistory.value = [];
      data.map((e: RequestItemsHistoryObject) => {
        rowsHistory.value.push({
          oc: e.oc,
          position: e.position,
          positionPathSide: e.positionPathSide,
          posNo: e.posNo,
          positionLine: e.positionLine,
          positionType: e.positionType,
          positionLevel: e.positionLevel,
          positionExecutive: e.positionExecutive,
          positionExecutiveSide: e.positionExecutiveSide,
          dateAppoint: new Date(e.dateAppoint),
          dateStart: new Date(e.dateStart),
          retireDate: e.retireDate,
          govAge: e.govAge,
          govAgeAbsent: e.govAgeAbsent,
          govAgePlus: e.govAgePlus,
          reasonSameDate: e.reasonSameDate,
          createdFullName: e.createdFullName,
          createdAt: new Date(e.createdAt),
          lastUpdatedAt: e.lastUpdatedAt,
          lastUpdateFullName: e.lastUpdateFullName,
        });
      });
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

watch(
  () => modalHistory.value,
  (isOpen) => {
    if (isOpen === true) {
      filterKeyword.value = "";
      getDataHistory();
    }
  }
);

onMounted(() => {
  getData();
});
</script>
<template>
  <div class="row">
    <q-space />
    <div class="q-gutter-x-sm">
      <q-btn
        color="primary"
        icon="mdi-pencil-outline"
        flat
        dense
        round
        @click="openDialogEdit()"
        ><q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
      >
      <q-btn
        color="info"
        icon="mdi-history"
        flat
        dense
        round
        @click="openDialogHistory()"
        ><q-tooltip>ประวิติข้อมูลราชการ</q-tooltip></q-btn
      >
    </div>
  </div>

  <q-card bordered class="bg-grey-1 q-pa-md q-mt-sm">
    <div class="row q-col-gutter-md">
      <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
        <div
          class="row"
          v-for="(field, index) in Object.keys(fieldLabels).slice(0, 5)"
          :key="index"
        >
          <div class="col-12 col-sm-12 col-md-4">
            <span class="text-grey-6 text-weight-medium">{{
              fieldLabels[field as keyof typeof fieldLabels]
            }}</span>
          </div>
          <div class="col-12 col-sm-12 col-md-8">
            <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
        <div
          class="row"
          v-for="(field, index) in Object.keys(fieldLabels).slice(5, 9)"
          :key="index"
        >
          <div class="col-12 col-sm-12 col-md-4">
            <span class="text-grey-6 text-weight-medium">{{
              fieldLabels[field as keyof typeof fieldLabels]
            }}</span>
          </div>
          <div class="col-12 col-sm-12 col-md-8">
            <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
          </div>
        </div>
      </div>
    </div>
    <q-separator color="grey-4" class="q-my-md" />
    <div class="row q-col-gutter-md">
      <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
        <div class="col-12 col-sm-6 col-md-6">
          <div class="row">
            <div class="col-12 col-sm-12 col-md-4">
              <span class="text-grey-6 text-weight-medium"
                >วันที่สั่งบรรจุ</span
              >
            </div>
            <div class="col-12 col-sm-12 col-md-8">
              <span>{{
                formMain.containDate ? date2Thai(formMain.containDate) : "-"
              }}</span>
            </div>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-6">
          <div class="row">
            <div class="col-12 col-sm-12 col-md-4">
              <span class="text-grey-6 text-weight-medium"
                >วันที่เริ่มปฏิบัติราชการ</span
              >
            </div>
            <div class="col-12 col-sm-12 col-md-8">
              <span>{{
                formMain.workDate !== null
                  ? date2Thai(formMain.workDate as Date)
                  : "-"
              }}</span>
            </div>
          </div>
        </div>
        <div
          v-if="dateToISO(formMain.containDate as Date) !== dateToISO(formMain.workDate as Date)"
          class="col-12 col-sm-6 col-md-6"
        >
          <div class="row">
            <div class="col-12 col-sm-12 col-md-4">
              <span class="text-grey-6 text-weight-medium"
                >เหตุผลที่วันที่ไม่ตรงกัน</span
              >
            </div>
            <div class="col-12 col-sm-12 col-md-8">
              <span>{{
                formMain.reasonSameDate !== "" ? formMain.reasonSameDate : "-"
              }}</span>
            </div>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-6">
          <div class="row">
            <div class="col-12 col-sm-12 col-md-4">
              <span class="text-grey-6 text-weight-medium">วันเกษียณอายุ</span>
            </div>
            <div class="col-12 col-sm-12 col-md-8">
              <span>{{
                formMain.retireDate
                  ? date2Thai(formMain.retireDate as Date)
                  : "-"
              }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
        <div class="col-12 col-sm-6 col-md-6">
          <div class="row">
            <div class="col-12 col-sm-12 col-md-4">
              <span class="text-grey-6 text-weight-medium">อายุราชการ</span>
            </div>
            <div class="col-12 col-sm-12 col-md-8">
              <span>{{
                formMain.ageAll
                  ? `${formMain.ageAll.day} วัน ${formMain.ageAll.month} เดือน ${formMain.ageAll.year} ปี`
                  : "-"
              }}</span>
            </div>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-6">
          <div class="row">
            <div class="col-12 col-sm-12 col-md-4">
              <span class="text-grey-6 text-weight-medium">ขาดราชการ</span>
            </div>
            <div class="col-12 col-sm-12 col-md-8">
              <span>{{ formMain.absent ? formMain.absent : 0 }}</span>
            </div>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-6">
          <div class="row">
            <div class="col-12 col-sm-12 col-md-4">
              <span class="text-grey-6 text-weight-medium"
                >อายุราชการเกื้อกูล</span
              >
            </div>
            <div class="col-12 col-sm-12 col-md-8">
              <span>{{ formMain.age ? formMain.age : 0 }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </q-card>

  <!-- dialog edit -->
  <q-dialog v-model="modalEdit" persistent>
    <q-card>
      <form @submit.prevent="validateForm">
        <DialogHeader tittle="แก้ไขข้อมูลราชการ" :close="closeDialog" />
        <q-separator color="grey-4" />

        <q-card-section style="max-height: 50vh" class="scroll">
          <div class="row q-col-gutter-sm">
            <div class="col-6">
              <datepicker
                v-model="containDate"
                :locale="'th'"
                autoApply
                :enableTimePicker="false"
                week-start="0"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    ref="containDateRef"
                    class="full-width inputgreen cursor-pointer"
                    hide-bottom-space
                    dense
                    outlined
                    :model-value="containDate !== null
          ? date2Thai(containDate as Date)
          : null
        "
                    :rules="[
                      (val) => !!val || 'กรุณาเลือก วัน/เดือน/ปี ที่บรรจุ',
                    ]"
                    label="วัน/เดือน/ปี ที่บรรจุ"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        :style="'color: var(--q-primary)'"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
            <div class="col-6">
              <datepicker
                v-model="workDate"
                :locale="'th'"
                autoApply
                :enableTimePicker="false"
                week-start="0"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    ref="workDateRef"
                    class="full-width inputgreen cursor-pointer"
                    hide-bottom-space
                    dense
                    outlined
                    :model-value="workDate !== null
                      ? date2Thai(workDate as Date)
                      : null
                    "
                    :rules="[
                      (val) => !!val || 'กรุณาเลือกเริ่มปฎิบัติราชการ',
                    ]"
                    label="วัน/เดือน/ปี เริ่มปฎิบัติราชการ"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        :style="'color: var(--q-primary)'"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
            <div
              class="col-12"
              v-if="containDate && workDate ? dateToISO(containDate as Date) !== dateToISO(workDate as Date) : false"
            >
              <q-input
                ref="reasonSameDateRef"
                class="full-width inputgreen cursor-pointer"
                label="เหตุผลกรณีไม่ตรงกัน"
                type="textarea"
                outlined
                dense
                hide-bottom-space
                :rules="[(val) => !!val || 'กรุณากรอก เหตุผลกรณีไม่ตรงกัน']"
                v-model="reasonSameDate"
              />
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right">
            <q-btn
              dense
              unelevated
              label="บันทึก"
              id="onSubmit"
              type="submit"
              color="public"
              class="q-px-md"
            >
              <q-tooltip>บันทึกข้อมูล</q-tooltip>
            </q-btn>
          </q-card-actions>
      </form>
    </q-card>
  </q-dialog>

  <!-- dialog History -->
  <q-dialog v-model="modalHistory" persistent>
    <q-card style="min-width: 80%">
      <DialogHeader
        tittle="ประวัติแก้ไขข้อมูลราชการ"
        :close="() => (modalHistory = !modalHistory)"
      />
      <q-separator color="grey-4" />

      <q-card-section style="max-height: 50vh" class="scroll">
        <div class="row q-pb-sm q-gutter-x-sm">
          <q-space />
          <q-input
            standout
            dense
            v-model="filterKeyword"
            ref="filterRef"
            outlined
            placeholder="ค้นหา"
            class="col-2"
            debounce="300"
          >
            <template v-slot:append>
              <q-icon
                v-if="filterKeyword == ''"
                name="search"
                @click.stop.prevent="filterKeyword = ''"
                class="cursor-pointer"
              />
              <q-icon
                v-if="filterKeyword"
                name="cancel"
                @click.stop.prevent="filterKeyword = ''"
                class="cursor-pointer"
              />
            </template>
          </q-input>
          <q-select
            v-model="visibleColumnsHistory"
            multiple
            outlined
            dense
            options-dense
            :display-value="$q.lang.table.columns"
            emit-value
            map-options
            :options="columnsHistory"
            option-value="name"
            options-cover
            style="min-width: 150px"
          />
        </div>
        <d-table
          ref="table"
          :columns="columnsHistory"
          :rows="rowsHistory"
          flat
          bordered
          :paging="true"
          dense
          class="custom-header-table"
          :filter="filterKeyword"
          :visible-columns="visibleColumnsHistory"
        >
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th
                v-for="col in props.cols"
                :key="col.name"
                :props="props"
                style="color: #000000; font-weight: 500"
              >
                <span class="text-weight-medium">{{ col.label }}</span>
              </q-th>
              <q-th auto-width></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>
                  {{ col.value ? col.value : "-" }}
                </div>
              </q-td>
            </q-tr>
          </template>
        </d-table>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
