<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import { useQuasar } from "quasar";

import type { QTableProps } from "quasar";
import type {
  FormGroupTarget,
  FormGroupRelate,
} from "@/modules/15_development/interface/request/Main";

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

import { useCounterMixin } from "@/stores/mixin";

const $q = useQuasar();
const { showLoader, hideLoader, dialogConfirm, dialogRemove, success } =
  useCounterMixin();

const columnsGroup = ref<QTableProps["columns"]>([
  {
    name: "groupTarget",
    align: "left",
    label: "กลุ่มเป้าหมาย ",
    sortable: true,
    field: "groupTarget",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "type",
    align: "left",
    label: "ประเภท",
    sortable: true,
    field: "type",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },

  {
    name: "amount",
    align: "left",
    label: "จำนวน(คน)",
    sortable: true,
    field: "amount",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const columnsRelated = ref<QTableProps["columns"]>([
  {
    name: "related",
    align: "left",
    label: "ผู้เกี่ยวข้อง ",
    sortable: true,
    field: "related",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },

  {
    name: "amount",
    align: "left",
    label: "จำนวน(คน)",
    sortable: true,
    field: "amount",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

const rows1 = ref<any>([
  {
    groupTarget: "ข้าราชการ",
    type: "บริหาร",
    amount: 20,
  },
]);
const rows2 = ref<any>([{ related: "เจ้าหน้าที่", amount: 10 }]);
const rows3 = ref<any>([
  {
    groupTarget: "ข้าราชการ",
    type: "บริหาร",
    amount: 20,
  },
]);
const rows4 = ref<any>([{ related: "เจ้าหน้าที่", amount: 10 }]);
const options = ref<any>([
  "ข้าราชการกรุงเทพมหานคร",
  "ข้าราชการกรุงเทพมหานครสามัญ",
  "เจ้าหน้าที่ดำเนิดการ",
]);

const modalGroupTarget = ref<boolean>(false);
const modalRelate = ref<boolean>(false);

const formGroupTarget = reactive<FormGroupTarget>({
  groupTarget: "",
  groupTargetSub: "",
  position: "",
  posType: "",
  level: "",
  type: "",
  amount: null,
});

const formGroupRelate = reactive<FormGroupRelate>({
  relate: "",
  amount: null,
});

function onClickOpenDialog(type: string) {
  if (type === "group") {
    modalGroupTarget.value = true;
  } else {
    modalRelate.value = true;
  }
}

function onSubmitGroup() {
  dialogConfirm($q, () => {
    success($q, "บันทึกข้อมูลสำเร็จ");
    onClickCloseDialog();
  });
}

function onSubmitRelate() {
  dialogConfirm($q, () => {
    success($q, "บันทึกข้อมูลสำเร็จ");
    onClickCloseDialog();
  });
}

function onclickDelete() {
  dialogRemove($q, () => {
    success($q, "ลบข้อมูลสำเร็จ");
  });
}

function cleanFormData() {
  formGroupTarget.groupTarget = "";
  formGroupTarget.groupTargetSub = "";
  formGroupTarget.position = "";
  formGroupTarget.posType = "";
  formGroupTarget.level = "";
  formGroupTarget.type = "";
  formGroupTarget.amount = null;
  formGroupRelate.relate = "";
  formGroupRelate.amount = null;
}

function onClickCloseDialog() {
  modalGroupTarget.value = false;
  modalRelate.value = false;
  cleanFormData();
}

onMounted(() => {
  console.log("เป้าหมาย");
});
</script>
<template>
  <!-- CARD เป้าหมายตามแผน -->
  <q-card bordered style="border: 1px solid #d6dee1">
    <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
      เป้าหมายตามแผน
      <q-btn flat round dense icon="add" color="primary">
        <q-menu>
          <q-list style="min-width: 100px">
            <q-item clickable v-close-popup @click="onClickOpenDialog('group')">
              <q-item-section>กลุ่มเป้าหมาย</q-item-section>
            </q-item>
            <q-item
              clickable
              v-close-popup
              @click="onClickOpenDialog('relate')"
            >
              <q-item-section>ผู้เกี่ยวข้อง</q-item-section>
            </q-item>
            <q-separator />
          </q-list>
        </q-menu>
        <q-tooltip>เพิ่ม</q-tooltip>
      </q-btn>
    </div>
    <div class="col-12"><q-separator /></div>
    <div class="row col-12 q-col-gutter-md q-pa-md">
      <div class="col-12">
        <d-table
          for="table"
          ref="table"
          :columns="columnsGroup"
          :rows="rows1"
          row-key="id"
          flat
          bordered
          dense
          class="custom-header-table"
          hide-pagination
        >
          <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-th auto-width />
            </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 class="table_ellipsis">
                  {{ col.value ? col.value : "-" }}
                </div>
              </q-td>
              <q-td>
                <q-btn
                  flat
                  round
                  dense
                  icon="delete"
                  color="red"
                  @click="onclickDelete"
                >
                  <q-tooltip>ลบข้อมูล</q-tooltip>
                </q-btn>
              </q-td>
            </q-tr>
          </template>
        </d-table>
      </div>

      <div class="col-12">
        <d-table
          for="table"
          ref="table"
          :columns="columnsRelated"
          :rows="rows2"
          row-key="id"
          flat
          bordered
          dense
          class="custom-header-table"
          hide-pagination
        >
          <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-th auto-width />
            </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 class="table_ellipsis">
                  {{ col.value ? col.value : "-" }}
                </div>
              </q-td>
              <q-td>
                <q-btn
                  flat
                  round
                  dense
                  icon="delete"
                  color="red"
                  @click="onclickDelete"
                >
                  <q-tooltip>ลบข้อมูล</q-tooltip>
                </q-btn>
              </q-td>
            </q-tr>
          </template>
        </d-table>
      </div>
    </div>
  </q-card>

  <!--CARD เป้าหมายตามจริง -->
  <q-card bordered style="border: 1px solid #d6dee1" class="q-mt-md">
    <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
      เป้าหมายตามจริง
      <q-btn flat round dense icon="add" color="primary">
        <q-menu>
          <q-list style="min-width: 100px">
            <q-item clickable v-close-popup @click="onClickOpenDialog('group')">
              <q-item-section>กลุ่มเป้าหมาย</q-item-section>
            </q-item>
            <q-item
              clickable
              v-close-popup
              @click="onClickOpenDialog('relate')"
            >
              <q-item-section>ผู้เกี่ยวข้อง</q-item-section>
            </q-item>
            <q-separator />
          </q-list>
        </q-menu>
        <q-tooltip>เพิ่ม</q-tooltip>
      </q-btn>
    </div>
    <div class="col-12"><q-separator /></div>
    <div class="row col-12 q-col-gutter-md q-pa-md">
      <div class="col-12">
        <d-table
          for="table"
          ref="table"
          :columns="columnsGroup"
          :rows="rows3"
          row-key="id"
          flat
          bordered
          dense
          class="custom-header-table"
          hide-pagination
        >
          <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-th auto-width />
            </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 class="table_ellipsis">
                  {{ col.value ? col.value : "-" }}
                </div>
              </q-td>
              <q-td>
                <q-btn
                  flat
                  round
                  dense
                  icon="delete"
                  color="red"
                  @click="onclickDelete"
                >
                  <q-tooltip>ลบข้อมูล</q-tooltip>
                </q-btn>
              </q-td>
            </q-tr>
          </template>
        </d-table>
      </div>

      <div class="col-12">
        <d-table
          for="table"
          ref="table"
          :columns="columnsRelated"
          :rows="rows4"
          row-key="id"
          flat
          bordered
          dense
          class="custom-header-table"
          hide-pagination
        >
          <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-th auto-width />
            </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 class="table_ellipsis">
                  {{ col.value ? col.value : "-" }}
                </div>
              </q-td>
              <q-td>
                <q-btn
                  flat
                  round
                  dense
                  icon="delete"
                  color="red"
                  @click="onclickDelete"
                >
                  <q-tooltip>ลบข้อมูล</q-tooltip>
                </q-btn>
              </q-td>
            </q-tr>
          </template>
        </d-table>
      </div>
    </div>
  </q-card>

  <q-dialog v-model="modalGroupTarget" persistent>
    <q-card style="width: 700px">
      <q-form greedy @submit.prevent @validation-success="onSubmitGroup">
        <DialogHeader tittle="เพิ่มกลุ่มเป้าหมาย" :close="onClickCloseDialog" />
        <q-separator />
        <q-card-section class="q-p-sm">
          <div class="row col-12 q-col-gutter-md">
            <div class="col-xs-6 col-sm-6 col-md-6">
              <q-select
                dense
                outlined
                v-model="formGroupTarget.groupTarget"
                :options="options"
                label="กลุ่มเป้าหมาย"
                hide-bottom-space
                lazy-rules
                :rules="[
                (val:string) =>
                  !!val || `${'กรุณาเลือกกลุ่มเป้าหมาย'}`,
              ]"
              />
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6">
              <q-select
                dense
                outlined
                v-model="formGroupTarget.groupTargetSub"
                :options="options"
                label="กลุ่มเป้าหมายย่อย"
                hide-bottom-space
                lazy-rules
                :rules="[
                (val:string) =>
                  !!val || `${'กรุณาเลือกกลุ่มเป้าหมายย่อย'}`,
              ]"
              />
            </div>
            <div class="col-xs-6 col-sm-4 col-md-4">
              <q-input
                outlined
                dense
                hide-bottom-space
                v-model="formGroupTarget.position"
                label="ตำแหน่ง"
                :rules="[
                (val:string) =>
                  !!val || `${'กรุณากรอกตำแหน่ง'}`,
              ]"
              />
            </div>
            <div class="col-xs-6 col-sm-4 col-md-4">
              <q-input
                outlined
                dense
                hide-bottom-space
                v-model="formGroupTarget.posType"
                label="ประเภทตำแหน่ง"
                :rules="[
                (val:string) =>
                  !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`,
              ]"
              />
            </div>
            <div class="col-xs-6 col-sm-4 col-md-4">
              <q-input
                outlined
                dense
                hide-bottom-space
                v-model="formGroupTarget.level"
                label="ระดับ"
                :rules="[
                (val:string) =>
                  !!val || `${'กรุณากรอกระดับ'}`,
              ]"
              />
            </div>
            <div class="col-xs-6 col-sm-6 col-md-8">
              <q-input
                outlined
                dense
                hide-bottom-space
                v-model="formGroupTarget.type"
                label="ประเภท(กลุ่มอาชีพ คุณสมบัติ)"
                :rules="[
              (val:string) =>
                !!val || `${'กรุณากรอกประเภท(กลุ่มอาชีพ คุณสมบัติ)'}`,
            ]"
              />
            </div>
            <div class="col-xs-6 col-sm-6 col-md-4">
              <q-input
                outlined
                dense
                hide-bottom-space
                v-model="formGroupTarget.amount"
                label="จำนวน(คน)"
                mask="#####"
                :rules="[
              (val:string) =>
                !!val || `${'กรุณากรอกจำนวน(คน)'}`,
            ]"
              />
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <div class="text-right q-pa-sm">
          <q-btn
            dense
            unelevated
            label="บันทึก"
            id="onSubmit"
            type="submit"
            color="public"
            class="q-px-md"
          >
            <q-tooltip>บันทึกข้อมูล</q-tooltip>
          </q-btn>
        </div>
      </q-form>
    </q-card>
  </q-dialog>

  <q-dialog v-model="modalRelate" persistent>
    <q-card style="width: 400px">
      <q-form greedy @submit.prevent @validation-success="onSubmitRelate">
        <DialogHeader tittle="เพิ่มผู้เกี่ยวข้อง" :close="onClickCloseDialog" />
        <q-separator />
        <q-card-section class="q-p-sm">
          <div class="row col-12 q-col-gutter-md">
            <div class="col-xs-6 col-sm-12 col-md-12">
              <q-select
                dense
                outlined
                v-model="formGroupRelate.relate"
                :options="options"
                label="ผู้เกี่ยวข้อง"
                hide-bottom-space
                lazy-rules
                :rules="[
                (val:string) =>
                  !!val || `${'กรุณาเลือกผู้เกี่ยวข้อง'}`,
              ]"
              />
            </div>
            <div class="col-xs-6 col-sm-12 col-md-12">
              <q-input
                outlined
                dense
                hide-bottom-space
                v-model="formGroupRelate.amount"
                label="จำนวน(คน)"
                mask="#####"
                :rules="[
            (val:string) =>
              !!val || `${'กรุณากรอกจำนวน(คน)'}`,
          ]"
              />
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <div class="text-right q-pa-sm">
          <q-btn
            dense
            unelevated
            label="บันทึก"
            id="onSubmit"
            type="submit"
            color="public"
            class="q-px-md"
          >
            <q-tooltip>บันทึกข้อมูล</q-tooltip>
          </q-btn>
        </div>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
