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

import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
import { useCounterMixin } from "@/stores/mixin";

import type {
  DataOption,
  DataPerson,
  DateSelectPerson,
} from "@/modules/18_command/interface/index/Main";

import DialogOrgSelectOneStep from "@/components/Dialogs/DialogOrgSelectOneStep.vue";

const $q = useQuasar();
const route = useRoute();
const store = useCommandDetail();
const {
  dialogConfirm,
  dialogRemove,
  messageError,
  showLoader,
  hideLoader,
  success,
} = useCounterMixin();

const isChangeData = defineModel<boolean>("isChangeData", { required: true });
const { onCheckChangeData } = defineProps({
  onCheckChangeData: { type: Function, required: true },
});

const filter = ref<string>("");
const rows = ref<DataPerson[]>([]);
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    field: (row) => rows.value.indexOf(row) + 1,
    sortable: false,
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "citizenId",
    align: "left",
    label: "เลขประจำตัวประชาชน",
    field: "citizenId",
    sortable: true,
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },

  {
    name: "fullName",
    align: "left",
    label: "ชื่อ-นามสกุล",

    field: (row) => `${row.prefix}${row.firstName} ${row.lastName}`,
    sortable: true,
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "position",
    align: "left",
    label: "ตำแหน่ง",
    field: "position",
    sortable: true,
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "org",
    align: "left",
    label: "หน่วยงาน",
    field: "org",
    sortable: true,
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "send",
    align: "left",
    label: "ช่องทางการส่งสำเนา",
    field: "send",
    sortable: true,
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const visibleColumns = ref<String[]>([
  "no",
  "citizenId",
  "fullName",
  "position",
  "org",
  "send",
]);

const optionSelect = ref<DataOption[]>([
  { id: "EMAIL", name: "อีเมล" },
  { id: "INBOX", name: "กล่องข้อความ" },
]);

const commandId = ref<string>(route.params.id.toString());

const modal = ref<boolean>(false);
const selectedModal = ref<DateSelectPerson[]>([]);

async function fetchData() {
  showLoader();
  await http
    .get(config.API.commandAction(commandId.value, "tab3"))
    .then(async (res) => {
      const data = await res.data.result;
      rows.value = data;
      isChangeData.value = false;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

function onDelete(id: string) {
  dialogRemove($q, async () => {
    await http
      .delete(config.API.commandAction(id, "tab3"))
      .then(async () => {
        await fetchData();
        success($q, "ลบข้อมูลสำเร็จ");
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

async function onSubmitPerson() {
  const body = selectedModal.value.map((e: DateSelectPerson) => e.profileId);
  showLoader();
  await http
    .put(config.API.commandAction(commandId.value, "tab3-add"), {
      profileId: body,
    })
    .then(async () => {
      await fetchData();
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

function onSubmit() {
  dialogConfirm($q, async () => {
    const body = rows.value.map((e: DataPerson) => ({
      sendCC: e.sendCC,
      id: e.id,
    }));

    showLoader();
    await http
      .put(config.API.commandAction(commandId.value, "tab3"), {
        commandSend: body,
      })
      .then(async () => {
        await fetchData();
        success($q, "บันทึกข้อมูลสำเร็จ");
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
        isChangeData.value = false;
      });
  });
}

onMounted(() => {
  fetchData();
});
</script>

<template>
  <q-card flat>
    <div class="row items-center q-pt-sm q-mr-sm">
      <q-btn
        v-if="!store.readonly"
        flat
        round
        color="primary"
        @click="modal = true"
        icon="mdi-plus"
      >
        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
      </q-btn>
      <q-space />
      <div class="items-center" style="display: flex">
        <!-- ค้นหาข้อความใน table -->
        <q-input
          standout
          dense
          v-model="filter"
          outlined
          debounce="300"
          placeholder="ค้นหา"
          class="q-ml-sm"
        >
          <template v-slot:append>
            <q-icon name="search" />
          </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: 140px"
          class="gt-xs q-ml-sm"
        />
      </div>
    </div>
    <q-form greedy @submit.prevent @validation-success="onSubmit">
      <q-card-section class="q-pa-sm">
        <div class="row q-col-gutter-sm">
          <div class="col-12">
            <d-table
              :rows="rows"
              :columns="columns"
              :visible-columns="visibleColumns"
              :filter="filter"
              row-key="id"
            >
              <template v-slot:header="props">
                <q-tr :props="props">
                  <q-th auto-width />
                  <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">
                  <q-td auto-width>
                    <q-btn
                      v-if="!store.readonly"
                      dense
                      flat
                      round
                      color="red"
                      @click="onDelete(props.row.id)"
                      icon="mdi-delete"
                    >
                      <q-tooltip>ลบข้อมูล</q-tooltip>
                    </q-btn>
                  </q-td>
                  <q-td
                    v-for="col in props.cols"
                    :key="col.name"
                    :props="props"
                  >
                    <div v-if="col.name === 'send'">
                      <q-select
                        :readonly="store.readonly"
                        :class="store.classInput(!store.readonly)"
                        hide-bottom-space
                        multiple
                        :outlined="true"
                        dense
                        v-model="props.row.sendCC"
                        :rules="[
                        (val:string) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
                        (val:string) =>
                          val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
                      ]"
                        :label="`${'เลือกช่องทางการส่งสำเนา'}`"
                        emit-value
                        map-options
                        option-label="name"
                        :options="optionSelect"
                        option-value="id"
                        input-debounce="0"
                        color="primary"
                        @update:model-value="onCheckChangeData()"
                      >
                        <template v-slot:no-option>
                          <q-item>
                            <q-item-section class="text-black">
                              ไม่พบข้อมูลที่ค้นหา
                            </q-item-section>
                          </q-item>
                        </template>
                      </q-select>
                    </div>
                    <div v-else class="table_ellipsis2">
                      {{ col.value ?? "-" }}
                    </div>
                  </q-td>
                </q-tr>
              </template>
            </d-table>
          </div>
        </div>
      </q-card-section>

      <q-separator />

      <q-card-actions align="right" v-if="!store.readonly">
        <q-btn
          label="บันทึก"
          type="submit"
          color="public"
          :disable="rows.length === 0"
        />
      </q-card-actions>
    </q-form>
  </q-card>

  <DialogOrgSelectOneStep
    v-model:modal="modal"
    :title="'เลือกรายชื่อตามหน่วยงาน'"
    v-model:selectedModal="selectedModal"
    :saveData="onSubmitPerson"
  />
</template>

<style scoped></style>
