<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";

/** import type*/
import type { QTableProps } from "quasar";
import type {
  FormDetailPosition,
  Position,
} from "@/modules/02_organizationalNew/interface/index/organizational";

/** importComponents*/
import DialogHeader from "@/components/DialogHeader.vue";

/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";

/**use*/
const $q = useQuasar();
const mixin = useCounterMixin();
const store = useOrganizational();
const { showLoader, hideLoader, messageError, date2Thai } = mixin;

/**Props*/
const modal = defineModel<boolean>("positionDetail", { required: true });
const prosp = defineProps({
  dataDetailPos: { type: Object, require: true },
});

/** formData*/
const formData = reactive<FormDetailPosition>({
  positionNo: "", //*เลขที่ตำแหน่ง
  positionType: "", //*ตำแหน่งประเภท
  positionPathSide: "", //*ตำแหน่งในสายงาน
  positionLine: "", //*สายงาน
  positionSide: "", //*ด้าน/สาขา
  positionLevel: "", //*ระดับตำแหน่ง
  positionExecutive: "", //*ตำแหน่งทางการบริหาร
  positionExecutiveSide: "", //*ด้านทางการบริหาร
  status: "", //*สถานะตำแหน่ง
});

// const columns = ref<QTableProps["columns"]>([
//   {
//     name: "no",
//     align: "left",
//     label: "ลำดับ",
//     sortable: false,
//     field: "no",
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//   },
//   {
//     name: "positionName",
//     align: "left",
//     label: "ตำแหน่งในสายงาน",
//     sortable: true,
//     field: "positionName",
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//   },
//   {
//     name: "positionField",
//     align: "left",
//     label: "สายงาน",
//     sortable: true,
//     field: "positionField",
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//   },
//   {
//     name: "posTypeName",
//     align: "left",
//     label: "ประเภทตำเเหน่ง",
//     sortable: true,
//     field: "posTypeName",
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//   },
//   {
//     name: "posLevelName",
//     align: "left",
//     label: "ระดับตำแหน่ง",
//     sortable: true,
//     field: "posLevelName",
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//   },
//   {
//     name: "posExecutiveName",
//     align: "left",
//     label: "ตำแหน่งทางการบริหาร",
//     sortable: true,
//     field: "posExecutiveName",
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//   },
//   {
//     name: "positionExecutiveField",
//     align: "left",
//     label: "ด้านทางการบริหาร",
//     sortable: true,
//     field: "positionExecutiveField",
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//   },
//   {
//     name: "positionArea",
//     align: "left",
//     label: "ด้าน/สาขา",
//     sortable: true,
//     field: "positionArea",
//     headerStyle: "font-size: 14px",
//     style: "font-size: 14px",
//   },
// ]);
// const row = ref<Position[]>([]);

/** function ปิด popup*/
function close() {
  modal.value = false;
}

/** callblack function ทำเมื่อเปิด popup set เลขที่ตำแหน่ง และสถานะตำแหน่ง */
watch(
  () => modal.value,
  () => {
    if (modal.value == true) {
      if (prosp.dataDetailPos) {
        formData.positionNo = prosp.dataDetailPos.posMasterNo;
        formData.status =
          store.typeOrganizational === "current"
            ? "ปกติ"
            : store.typeOrganizational === "draft"
            ? "แบบร่าง"
            : "ยุบเลิก";
            formData.positionType = prosp.dataDetailPos.posTypeName
            formData.positionPathSide = prosp.dataDetailPos.positionName
            formData.positionLine = prosp.dataDetailPos.positionField
            formData.positionSide = prosp.dataDetailPos.positionArea ? prosp.dataDetailPos.positionArea : "-"
            formData.positionLevel = prosp.dataDetailPos.posLevelName
            formData.positionExecutive = prosp.dataDetailPos.posExecutiveName ? prosp.dataDetailPos.posExecutiveName : "-"
            formData.positionExecutiveSide = prosp.dataDetailPos.positionExecutiveField ? prosp.dataDetailPos.positionExecutiveField : "-"
          
          // row.value = prosp.dataDetailPos.positions.map((e: Position) => ({
        //   ...e,
        //   positionName: e.positionName ? e.positionName : "-",
        //   positionField: e.positionField ? e.positionField : "-",
        //   posTypeName: e.posTypeName ? e.posTypeName : "-",
        //   posLevelName: e.posLevelName ? e.posLevelName : "-",
        //   posExecutiveName: e.posExecutiveName ? e.posExecutiveName : "-",
        //   positionExecutiveField: e.positionExecutiveField
        //     ? e.positionExecutiveField
        //     : "-",
        //   positionArea: e.positionArea ? e.positionArea : "-",
        // }));
      }
    }
  }
);
</script>
<template>
  <template>
    <q-dialog v-model="modal" persistent>
      <q-card :style="$q.screen.gt.md ? 'min-width: 40vw' : 'min-width: 80vw'">
        <DialogHeader :tittle="`รายละเอียดตำแหน่ง`" :close="close" />
        <q-separator />
        <q-card-section>
          <div class="q-px-md">
            <div class="row q-col-gutter-sm q-mb-xs">
              <div class="col-4 text-bold">
                <div>
                  <p>เลขที่ตำแหน่ง</p>
                </div>
              </div>
              <div class="col-8 text-grey-8">
                <p>{{ formData.positionNo }}</p>
              </div>
            </div>
            <div class="row q-col-gutter-sm q-mb-xs">
              <div class="col-4 text-bold">
                <div>
                  <p>ตำแหน่งประเภท</p>
                </div>
              </div>
              <div class="col-8 text-grey-8">
                <p>{{ formData.positionType }}</p>
              </div>
            </div> 

             <div class="row q-col-gutter-sm q-mb-xs">
              <div class="col-4 text-bold">
                <div>
                  <p>ตำแหน่งในสายงาน</p>
                </div>
              </div>
              <div class="col-8 text-grey-8">
                <p>{{ formData.positionPathSide }}</p>
              </div>
            </div> 

             <div class="row q-col-gutter-sm q-mb-xs">
              <div class="col-4 text-bold">
                <div>
                  <p>สายงาน</p>
                </div>
              </div>
              <div class="col-8 text-grey-8">
                <p>{{ formData.positionLine }}</p>
              </div>
            </div> 

            <div class="row q-col-gutter-sm q-mb-xs">
              <div class="col-4 text-bold">
                <div>
                  <p>ด้าน/สาขา</p>
                </div>
              </div>
              <div class="col-8 text-grey-8">
                <p>{{ formData.positionSide }}</p>
              </div>
            </div> 

            <div class="row q-col-gutter-sm q-mb-xs">
              <div class="col-4 text-bold">
                <div>
                  <p>ระดับตำแหน่ง</p>
                </div>
              </div>
              <div class="col-8 text-grey-8">
                <p>{{ formData.positionLevel }}</p>
              </div>
            </div> 

             <div class="row q-col-gutter-sm q-mb-xs">
              <div class="col-4 text-bold">
                <div>
                  <p>ตำแหน่งทางการบริหาร</p>
                </div>
              </div>
              <div class="col-8 text-grey-8">
                <p>{{ formData.positionExecutive }}</p>
              </div>
            </div> 

            <div class="row q-col-gutter-sm q-mb-xs">
              <div class="col-4 text-bold">
                <div>
                  <p>ด้านทางการบริหาร</p>
                </div>
              </div>
              <div class="col-8 text-grey-8">
                <p>{{ formData.positionExecutiveSide }}</p>
              </div>
            </div> 

            <div class="row q-col-gutter-sm q-mb-xs">
              <div class="col-4 text-bold">
                <div>
                  <p>สถานะตำแหน่ง</p>
                </div>
              </div>
              <div class="col-8 text-grey-8">
                <p>{{ formData.status }}</p>
              </div>
            </div>

            <!-- <div class="row q-col-gutter-sm q-mb-xs">
              <div class="col-12">
                <d-table
                  flat
                  :columns="columns"
                  :rows="row"
                  row-key="id"
                  dense
                  hide-bottom
                  class="custom-header-table-expand"
                >
                  <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">{{ col.label }}</span>
                      </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 v-else>
                          {{ col.value }}
                        </div>
                      </q-td>
                    </q-tr>
                  </template>
                </d-table>
              </div>
            </div> -->
          </div>
        </q-card-section>
      </q-card>
    </q-dialog>
  </template>
</template>
