<template>
  <div>
    <div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
      <div class="col-12 row q-pb-sm items-center">
        <q-btn flat round color="primary" @click="refresh" icon="mdi-refresh">
          <q-tooltip>อัปเดตข้อมูล</q-tooltip>
        </q-btn>
        <q-space />
        <div class="items-center" style="display: flex">
          <!-- ค้นหาข้อความใน table -->
          <q-input
            standout
            dense
            v-model="filter"
            ref="filterRef"
            outlined
            debounce="300"
            placeholder="ค้นหา"
            style="max-width: 200px"
            class="q-ml-sm"
          >
            <template v-slot:append>
              <q-icon v-if="filter == ''" name="search" />
              <q-icon
                v-if="filter !== ''"
                name="clear"
                class="cursor-pointer"
                @click="resetFilter"
              />
            </template>
          </q-input>
          <!-- แสดงคอลัมน์ใน table -->
          <q-select
            v-model="visibleColumns"
            :display-value="$q.lang.table.columns"
            multiple
            outlined
            dense
            :options="columns"
            options-dense
            option-value="name"
            map-options
            emit-value
            style="min-width: 150px"
            class="gt-xs q-ml-sm"
          />
        </div>
      </div>
      <d-table
        :rows="rows"
        :columns="columns"
        :visible-columns="visibleColumns"
        :filter="filter"
        row-key="name"
        selection="multiple"
        v-model:selected="selected"
      >
        <!-- <template v-slot:header-selection="scope">
          <q-checkbox
            keep-color
            color="primary"
            dense
            v-model="scope.selected"
          />
        </template> -->

        <template v-slot:header="props">
          <q-tr :props="props">
            <q-th auto-width>
              <q-checkbox
                keep-color
                color="primary"
                dense
                v-model="props.selected"
              />
            </q-th>
            <q-th v-for="col in props.cols" :key="col.name" :props="props">
              <span class="text-weight-medium">{{ col.label }}</span>
            </q-th>

            <q-th auto-width />
            <q-th auto-width />
          </q-tr>
        </template>
        <template v-slot:body="props">
          <q-tr :props="props" class="cursor-pointer">
            <q-td>
              <q-checkbox
                keep-color
                color="primary"
                dense
                v-model="props.selected"
              />
            </q-td>
            <q-td
              v-for="col in props.cols"
              :key="col.name"
              :props="props"
              @click="selectModal(props.row)"
              >{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
            >
            <q-td auto-width>
              <q-btn
                dense
                size="12px"
                flat
                round
                :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
                :disable="props.rowIndex + 1 == 1"
                @click="upDown(props)"
                icon="mdi-arrow-up-bold"
              >
                <!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
              </q-btn>
            </q-td>
            <q-td auto-width>
              <q-btn
                dense
                size="12px"
                flat
                round
                :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
                :disable="rows.length == props.rowIndex + 1"
                @click="upDown(props, false)"
                icon="mdi-arrow-down-bold"
              >
                <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
              </q-btn>
            </q-td>
          </q-tr>
        </template>
      </d-table>
    </div>
    <q-separator />
    <div class="flex justify-end q-pa-sm q-gutter-sm">
      <q-btn
        dense
        outline
        color="primary"
        icon="chevron_left"
        @click="previous"
        class="q-pr-md"
        label="กรอกรายละเอียด"
      >
      </q-btn>
      <q-btn
        dense
        unelevated
        label="บันทึก"
        color="public"
        @click="save"
        class="q-px-md"
        ><!-- icon="mdi-content-save-outline"
        <q-tooltip>บันทึก</q-tooltip> -->
      </q-btn>
      <!-- <q-btn dense flat round color="primary" icon="chevron_right" @click="next">
        <q-tooltip>ต่อไป</q-tooltip>
      </q-btn> -->
    </div>
  </div>

  <q-dialog v-model="modal" persistent>
    <q-card style="width: 70vw; max-width: 70vw">
      <q-form ref="myForm">
        <DialogHeader :tittle="titleName" :close="modalOpenClose" />
        <q-separator />
        <q-card-section class="q-pa-sm bg-grey-1">
          <div class="row col-12 q-col-gutter-sm">
            <div class="col-xs-12 col-sm-6 row">
              <q-card flat bordered class="fit q-pa-sm">
                <!-- style="height: 70vh" -->
                <q-scroll-area visible> </q-scroll-area>
              </q-card>
            </div>
            <div class="col-xs-12 col-sm-6">
              <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
                <div class="col-xs-6 col-sm-6 col-md-6">
                  <q-input
                    outlined
                    dense
                    lazy-rules
                    v-model="modalData.salaryAmount"
                    :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
                    :label="`${'เงินเดือน'}`"
                    type="number"
                    hide-bottom-space
                  />
                </div>

                <div class="col-xs-6 col-sm-6 col-md-6">
                  <q-input
                    outlined
                    dense
                    lazy-rules
                    v-model="modalData.positionSalaryAmount"
                    :label="`${'เงินประจำตำแหน่ง'}`"
                    type="number"
                    hide-bottom-space
                  />
                  <!-- :rules="[
                      (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
                    ]" -->
                </div>

                <div class="col-xs-6 col-sm-6 col-md-6">
                  <q-input
                    outlined
                    dense
                    lazy-rules
                    v-model="modalData.mouthSalaryAmount"
                    :label="`${'เงินค่าตอบแทนรายเดือน'}`"
                    type="number"
                    hide-bottom-space
                  />
                  <!-- :rules="[
                      (val) => !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
                    ]" -->
                </div>
              </div>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right">
          <q-btn
            dense
            unelevated
            label="บันทึก"
            color="public"
            @click="saveModal"
            class="q-px-md"
            ><!-- icon="mdi-content-save-outline"
        <q-tooltip>บันทึก</q-tooltip> -->
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useQuasar } from "quasar";
import type { QInput } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import type { QTableProps, QForm } from "quasar";
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";

const props = defineProps({
  next: {
    type: Function,
    default: () => console.log("not function"),
  },
  previous: {
    type: Function,
    default: () => console.log("not function"),
  },
});

const next = () => props.next();
const previous = () => props.previous();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { dialogMessage, messageError, showLoader, hideLoader } = mixin;

const $q = useQuasar();

const modalData = ref<any>({
  salaryAmount: 0,
  positionSalaryAmount: 0,
  mouthSalaryAmount: 0,
});
const myForm = ref<QForm | null>(null);
const modal = ref<boolean>(false);
const titleName = ref<string>("");
const filterRef = ref<QInput>();
const filter = ref<string>("");
const visibleColumns = ref<String[]>(["no", "idcard", "name", "educate"]);
const columns = ref<QTableProps["columns"]>([
  { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
  {
    name: "idcard",
    align: "left",
    label: "เลขประจำตัวประชาชน",
    field: "idcard",
    sortable: true,
  },
  {
    name: "name",
    align: "left",
    label: "ชื่อ-สกุล",
    field: "name",
    sortable: true,
  },
  {
    name: "educate",
    align: "left",
    label: "วุฒิการศึกษาในการออกคำสั่ง",
    field: "educate",
    sortable: true,
  },
]);

const rows = ref<any>([
  {
    no: "0ac56905-1a74-4606-a120-233340adde95",
    name: "นางนัทธ์ เหล่าสกุล",
    idcard: "9158455632145",
    educate: "ปริญญาตรี",
  },
  {
    no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
    name: "นางขรรค์ จันทรสมบัติ",
    idcard: "8558455632126",
    educate: "ปริญญาตรี",
  },
  {
    no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
    name: "นางโอภาส จรัสวงศ์",
    idcard: "8158455635425",
    educate: "ปริญญาตรี",
  },
  {
    no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
    name: "นางธิญา หงษ์ทอง",
    idcard: "4558455632145",
    educate: "ปริญญาตรี",
  },
  {
    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
    name: "นางธนวิทย์ พิกุลเทพ",
    idcard: "5542455632145",
    educate: "ปริญญาตรี",
  },
  {
    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
    name: "นางหนึ่ง สตาภิรมย์",
    idcard: "7448455632145",
    educate: "ปริญญาตรี",
  },
  {
    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
    name: "นางสัจพร คมคาย",
    idcard: "1236455632145",
    educate: "ปริญญาตรี",
  },
  {
    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
    name: "นางตุลยากร ปรีดาศิริกุล",
    idcard: "1523455632145",
    educate: "ปริญญาตรี",
  },
  {
    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
    name: "นางบัลลังค์ จิรวาณิชย์",
    idcard: "1258455632145",
    educate: "ปริญญาตรี",
  },
  {
    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
    name: "นางคมคาย เรืองรังสรรค์",
    idcard: "8548455632145",
    educate: "ปริญญาตรี",
  },
  {
    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
    name: "นางพรทิพา คมคาย",
    idcard: "6598455632145",
    educate: "ปริญญาตรี",
  },
]);
const selected = ref([]);

const upDown = (value: any, up: boolean = true) => {
  const indexCurrent = value.rowIndex;
  if (up) {
    rows.value[indexCurrent] = rows.value[indexCurrent - 1];
    rows.value[indexCurrent - 1] = value.row;
  } else {
    rows.value[indexCurrent] = rows.value[indexCurrent + 1];
    rows.value[indexCurrent + 1] = value.row;
  }
};

const saveModal = () => {
  if (myForm.value !== null) {
    myForm.value.validate().then(async (result: boolean) => {
      if (result) {
        modalOpenClose();
      }
    });
  }
};

const selectModal = (e: any) => {
  titleName.value = e.name;
  modalData.value = {
    salaryAmount: 0,
    positionSalaryAmount: 0,
    mouthSalaryAmount: 0,
  };
  modalOpenClose();
};

const modalOpenClose = () => {
  modal.value = !modal.value;
  if (!modal.value) {
    titleName.value = "";
  }
};

const click = (e: any) => {
  console.log(e);
  console.log(rows.value.length);
};

const save = () => {
  if (selected.value.length > 0) {
    next();
  } else {
    dialogMessage(
      $q,
      "ข้อความแจ้งเตือน",
      "กรุณาเลือกรายชื่อ",
      "warning",
      undefined,
      "orange",
      undefined,
      undefined,
      true
    );
  }
};

const selectData = (row: any) => {};

const refresh = () => {};

const resetFilter = () => {
  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
  filter.value = "";
  filterRef.value!.focus();
};

const getClass = (val: boolean) => {
  return {
    "full-width inputgreen cursor-pointer": val,
    "full-width cursor-pointer": !val,
  };
};
</script>
<style lang="scss"></style>
