<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 { QTableProps } from "quasar";
import type {
  DataOption,
  Pagination,
} from "@/modules/02_users/interface/index/Main";
import type {
  FormUser,
  Roles,
} from "@/modules/02_users/interface/request/Main";
import type { Profile } from "@/modules/02_users/interface/response/Main";

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

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

/** use*/
const $q = useQuasar();
const { showLoader, hideLoader, dialogConfirm, messageError, success } =
  useCounterMixin();

/**  props*/
const modal = defineModel<boolean>("modal", { required: true });
const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
const userId = defineModel<string>("userId", { required: true });
const props = defineProps({
  fetchlist: {
    type: Function,
    required: true,
  },
});

/** Table*/
const rows = ref<Profile[]>([]);
const columns = ref<QTableProps["columns"]>([
  {
    name: "citizenId",
    align: "left",
    label: "เลขประจำตัวประชาชน",
    sortable: true,
    field: "citizenId",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "firstName",
    align: "left",
    label: "ชื่อ",
    sortable: true,
    field: "firstName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "lastName",
    align: "left",
    label: "นามสกุล",
    sortable: true,
    field: "lastName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "position",
    align: "left",
    label: "ตำแหน่ง",
    sortable: true,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionTpye",
    align: "left",
    label: "ประเภทตำแหน่ง",
    sortable: true,
    field: "positionTpye",
    format: (val, row) => {
      return (
        `${row.positionTypeName ? row.positionTypeName : ""}` +
        (row.positionLevelName ? `(${row.positionLevelName})` : "")
      );
    },
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const selected = ref<Profile[]>([]);
const searchType = ref<string>("citizenId");
const keyword = ref<string>("");
const searchTypeOption = ref<DataOption[]>([
  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
  { id: "firstname", name: "ชื่อ" },
  { id: "lastname", name: "นามสกุล" },
]);
const query = reactive({
  page: 1,
  pageSize: 10,
});
const total = ref<number>(0);
const maxPage = ref<number>(1);

const isPwd = ref<boolean>(true);
const roles = ref<Roles[]>([]);
const formData = reactive<FormUser>({
  profileId: "",
  username: "",
  password: "",
  firstName: "",
  lastName: "",
  email: "",
  roles: [],
});
const roleOptions = ref([]);

function fetchListUser() {
  showLoader();
  const body = {
    fieldName: searchType.value ? searchType.value : "",
    keyword: keyword.value ? keyword.value : "",
  };
  http
    .post(
      config.API.orgProfileListKeycloak() +
        `?page=${query.page}&pageSize=${query.pageSize}`,
      body
    )
    .then((res) => {
      const data = res.data.result;
      maxPage.value = Math.ceil(data.total / query.pageSize);
      total.value = data.total;
      rows.value = data.data;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function fetch ข้อมูลผู้ใช้งาน
 * @param id ผู้ใช้งาน
 */
function fetchUserDetail(id: string) {
  showLoader();
  http
    .get(config.API.managementUser + `/${id}`)
    .then((res) => {
      const data = res.data;
      formData.username = data.username;
      formData.firstName = data.firstName;
      formData.lastName = data.lastName;
      formData.email = data.email;
      roles.value = data.roles;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** function fetc รายการ role*/
function fetchlistRole() {
  http
    .get(config.API.managementRole)
    .then((res) => {
      roleOptions.value = res.data.filter(
        (e: Roles) =>
          e.name === "STAFF" ||
          e.name === "SUPER_ADMIN" ||
          e.name === "ADMIN" ||
          e.name === "USER"
      );
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/** function บันทึกข้อมูลผู้ใช้งาน*/
function onSubmit() {
  formData.roles = !isStatusEdit.value
    ? roles.value.map((e: { id: string }) => e.id)
    : undefined;
  formData.password = !isStatusEdit.value ? formData.password : undefined;

  dialogConfirm($q, () => {
    showLoader();
    const url = isStatusEdit.value
      ? config.API.managementUser + `/${userId.value}`
      : config.API.managementUser;

    http[isStatusEdit.value ? "put" : "post"](url, formData)
      .then(() => {
        success($q, "บันทึกข้อมูลสำเร็จ");
        props.fetchlist?.();
        closeDialog();
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/** function ปิด Dialog */
function closeDialog() {
  modal.value = false;
  formData.profileId = "";
  formData.username = "";
  formData.password = "";
  formData.firstName = "";
  formData.lastName = "";
  formData.email = "";
  roles.value = [];
  searchType.value = "citizenId";
  keyword.value = "";
  selected.value = [];
  query.page = 1;
  query.pageSize = 10;
}

/**
 * function อัปเดท paging
 * @param initialPagination ข้อมูล pagination
 */
async function updatePagination(initialPagination: Pagination) {
  query.page = 1;
  query.pageSize = initialPagination.rowsPerPage;
}

watch(
  () => query.pageSize,
  () => {
    fetchListUser();
  }
);

watch(
  () => modal.value,
  () => {
    if (modal.value && isStatusEdit.value) {
      fetchUserDetail(userId.value);
    }
    modal.value && fetchlistRole();
    modal.value && fetchListUser();
  }
);

watch(
  () => selected.value,
  () => {
    if (selected.value?.length !== 0) {
      const data = selected.value[0];
      formData.profileId = data.id;
      formData.firstName = data.firstName;
      formData.lastName = data.lastName;
      formData.email = data.email;
    }
  }
);
</script>

<template>
  <q-dialog v-model="modal" persistent full-width>
    <q-card>
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader
          :tittle="isStatusEdit ? 'แก้ไขผู้ใช้งาน' : 'เพิ่มผู้ใช้งาน'"
          :close="closeDialog"
        />
        <q-separator />

        <q-card-section :horizontal="$q.screen.gt.xs">
          <!-- รายชื่อ -->
          <q-card-section class="col-md-8 col-xs-12">
            <div class="row q-col-gutter-sm">
              <div class="col-12 col-sm-6 col-md-3">
                <q-select
                  label="ค้นหาจาก"
                  v-model="searchType"
                  :options="searchTypeOption"
                  outlined
                  emit-value
                  dense
                  emit-option
                  option-label="name"
                  option-value="id"
                  map-options
                />
              </div>
              <div class="col-12 col-sm-6 col-md-9">
                <q-input
                  ref="searchRef"
                  v-model="keyword"
                  outlined
                  clearable
                  hide-bottom-space
                  dense
                  label="คำค้น"
                >
                  <template v-slot:after>
                    <q-btn
                      color="primary"
                      icon="search"
                      label="ค้นหา"
                      class="full-width q-py-sm q-px-md"
                      @click="(query.page = 1), fetchListUser()"
                    >
                    </q-btn>
                  </template>
                </q-input>
              </div>
            </div>

            <div class="col-12 q-pt-sm">
              <d-table
                ref="table"
                :columns="columns"
                :rows="rows"
                row-key="id"
                flat
                bordered
                :paging="true"
                dense
                :rows-per-page-options="[10, 25, 50, 100]"
                selection="single"
                v-model:selected="selected"
                @update:pagination="updatePagination"
              >
                <template v-slot:header="props">
                  <q-tr :props="props">
                    <q-th auto-width></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-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"
                    >
                      <div>
                        {{ col.value ? col.value : "-" }}
                      </div>
                    </q-td>
                  </q-tr>
                </template>

                <template v-slot:pagination="scope">
                  ทั้งหมด {{ total }} รายการ
                  <q-pagination
                    v-model="query.page"
                    active-color="primary"
                    color="dark"
                    :max="Number(maxPage)"
                    size="sm"
                    boundary-links
                    direction-links
                    :max-pages="5"
                    @update:model-value="fetchListUser"
                  ></q-pagination>
                </template>
              </d-table>
            </div>
          </q-card-section>
          <q-separator vertical />

          <!-- input -->
          <q-card-section class="col-md-4 col-xs-12">
            <div class="row q-col-gutter-md">
              <div class="col-12">
                <q-input
                  :readonly="isStatusEdit"
                  v-model="formData.username"
                  outlined
                  dense
                  :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผู้ใช้งาน'}`,]"
                  lazy-rules
                  hide-bottom-space
                  class="inputgreen"
                  label="ชื่อผู้ใช้งาน"
                >
                </q-input>
              </div>
              <div class="col-12" v-if="!isStatusEdit">
                <q-input
                  v-model="formData.password"
                  outlined
                  dense
                  :type="isPwd ? 'password' : 'text'"
                  :rules="[(val:string) => !!val || `${'กรุณากรอกรหัสผู้ใช้งาน'}`,]"
                  lazy-rules
                  label="รหัสผู้ใช้งาน"
                  hide-bottom-space
                  class="inputgreen"
                >
                  <template v-slot:append>
                    <q-icon
                      :name="isPwd ? 'visibility_off' : 'visibility'"
                      class="cursor-pointer"
                      @click="isPwd = !isPwd"
                    />
                  </template>
                </q-input>
              </div>
              <div class="col-12">
                <q-input
                  v-model="formData.firstName"
                  outlined
                  dense
                  :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อ'}`,]"
                  lazy-rules
                  hide-bottom-space
                  class="inputgreen"
                  label="ชื่อ"
                  readonly
                >
                </q-input>
              </div>
              <div class="col-12">
                <q-input
                  v-model="formData.lastName"
                  outlined
                  dense
                  :rules="[(val:string) => !!val || `${'กรุณากรอกนามสกุล'}`,]"
                  lazy-rules
                  hide-bottom-space
                  class="inputgreen"
                  label="นามสกุล"
                  readonly
                >
                </q-input>
              </div>

              <div class="col-12">
                <q-input
                  v-model="formData.email"
                  outlined
                  dense
                  :rules="[(val:string) => !!val || `${'กรุณากรอก Email'}`,]"
                  lazy-rules
                  hide-bottom-space
                  class="inputgreen"
                  label="Email"
                  type="email"
                >
                </q-input>
              </div>
              <div class="col-12" v-if="!isStatusEdit">
                <q-select
                  v-model="roles"
                  outlined
                  label="role"
                  dense
                  option-label="name"
                  option-value="id"
                  :options="roleOptions"
                  class="inputgreen"
                  map-options
                  hide-bottom-space
                  lazy-rules
                  use-chips
                  multiple
                  use-input
                  :rules="[(val:string) => !!val && val.length > 0|| `${'กรุณาเลือก Role'}`,]"
                />
              </div>
            </div>
          </q-card-section>
        </q-card-section>

        <q-separator />
        <q-card-actions align="right">
          <q-btn label="บันทึก" color="secondary" type="submit"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
