<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";

import http from "@/plugins/http";
import config from "@/app.config";

import type {
  ResponseInbox,
  DataInbox,
} from "@/interface/response/dashboard/dashboard";

const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const {
  showLoader,
  hideLoader,
  dialogMessage,
  success,
  messageError,
  date2Thai,
  dialogRemove
} = mixin;

const iteminbox = ref<any>([]);
const splitterModel = ref<number>(30);
const link = ref<string>("0");
const inboxList = ref<DataInbox[]>([
  //   {
  //     no: "1",
  //     sender: "เจ้าหน้าที่ทะเบียนประวัติ",
  //     subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
  //     timereceive: new Date(),
  //     body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
  //     ratingModel: 0,
  //   },
  //   {
  //     no: "2",
  //     sender: "เจ้าหน้าที่ทะเบียนประวัติ",
  //     subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
  //     timereceive: new Date(),
  //     body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
  //     ratingModel: 0,
  //   },
]);
const data = ref<DataInbox[]>([
  //   {
  //     no: "1",
  //     sender: "เจ้าหน้าที่ทะเบียนประวัติ",
  //     subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
  //     timereceive: new Date(),
  //     body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
  //     ratingModel: 0,
  //   },
]);
const payLoadtext = ref<string>()
const btnReply = ref<boolean>(true);
const listpayload = ref<any>([]);
const listpayloadNolink = ref<any>([]);
const smgreplaytitle = ref<string>("");
const smgreplay = ref<string>("");
const userName = ref<any>(localStorage.getItem("userName"));
const thumbStyle = ref<any>({
  right: "4px",
  borderRadius: "5px",
  backgroundColor: "#a8bbbf",
  width: "5px",
  opacity: 0.5,
});

const barStyle = ref<any>({
  right: "2px",
  borderRadius: "9px",
  backgroundColor: "#d6dee1",
  width: "9px",
  opacity: 0.2,
});

onMounted(async () => {
  await getData();
});

const getData = async () => {
  showLoader();
  await http
    .get(config.API.msgInbox)
    .then((res: any) => {
      const response = res.data.result;
        console.log(response);
      let list: DataInbox[] = [];
      response.map((e: ResponseInbox) => {
        list.push({
          no: e.receiverUserId ?? "",
          sender:
            e.createdFullName == "" || e.createdFullName == null
              ? "เจ้าหน้าที่"
              : e.createdFullName,
          subject: e.subject ?? "",
          timereceive: new Date(e.receiveDate),
          body: e.body ?? "",
          payload: e.payload,
          ratingModel: 0,
        });
      });
      inboxList.value = list;
    })
    .catch((e) => {
      // messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

const selectInbox = (id: string) => {
  link.value = id;
  data.value = inboxList.value.filter((r) => r.no == id);
};
const deleteData = (id:string) => {
  dialogRemove($q, () => removeData(id))
}

//รอ api ลบ
const removeData = async (id:string) => {
  console.log("delete=",id)
 showLoader();
await http
.delete(config.API.msgInboxDelete(id))
.then((res) => {
  success($q, "ลบข้อมูลสำเร็จ");
})
.catch((e) => {
  messageError($q, e);
})
.finally(() => {
  getData()
  hideLoader()
})
}
</script>

<!-- page:หน้าแรก -->
<template>
  <div class="toptitle text-dark">หน้าแรก</div>
  <q-splitter
    v-model="splitterModel"
    :horizontal="$q.screen.lt.sm"
    separator-class="bg-grey-2 row"
    separator-style="width: 12px"
    class="text-dark"
    :style="$q.screen.gt.xs ? 'height: 80vh' : 'height:100%;'"
  >
    <template v-slot:before>
      <q-card
        flat
        bordered
        :style="$q.screen.gt.xs ? 'height: 80vh' : 'height: auto;'"
      >
        <div class="col-12 q-py-sm q-px-md bg-grey-1">
          <div class="text-subtitle1 text-weight-medium">กล่องข้อความ</div>
        </div>
        <q-separator />
        <q-scroll-area
          :style="$q.screen.gt.xs ? 'height: 74vh' : 'height: 40vh;'"
          class="bg-white rounded-borders q-px-md row col-12"
        >
          <q-list
            v-for="(contact, index) in inboxList"
            :key="contact.no"
            class="q-pt-sm"
          >
            <q-item
              clickable
              v-ripple
              class="mytry"
              :active="link === contact.no"
              active-class="my-menu-link"
              @click="selectInbox(contact.no)"
            >
              <q-item-section>
                <q-item-label caption class="text-weight-light">{{
                  date2Thai(contact.timereceive)
                }}</q-item-label>
                <q-item-label class="text-weight-medium">{{
                  contact.sender
                }}</q-item-label>
                <q-item-label caption lines="2">{{
                  contact.subject
                }}</q-item-label>
              </q-item-section>
              <q-item-section side top>
                <!-- <q-rating
                  v-model="contact.ratingModel"
                  size="1.4em"
                  :max="1"
                  color="grey"
                  color-selected="yellow-13"
                /> -->

                <q-icon
                  v-if="contact.payload !== null "
                  class="q-mt-md"
                  name="mdi-paperclip"
                  color="grey-5"
                  size="xs"
                />
              </q-item-section>
            </q-item>
            <q-separator
              v-if="index + 1 < inboxList.length"
              :key="index"
              color="grey-3 q-mt-sm"
            />
          </q-list>

          <q-banner
            rounded
            class="bg-amber-1 text-center q-mt-sm"
            v-if="inboxList.length < 1"
          >
            <div class="text-yellow-10">
              <q-icon
                name="mdi-alert-box"
                class="q-mx-xs"
                size="sm"
                color="yellow-10"
              />
              ไม่พบข้อความ
            </div>
          </q-banner>
        </q-scroll-area>
      </q-card>
    </template>

    <template v-slot:after>
      <q-card
        v-if="data != null"
        class="q-pa-none rounded-borders"
        flat
        bordered
        :style="$q.screen.gt.xs ? 'height: 80vh' : 'height: auto;'"
      >
        <div class="eow col-12" v-for="(d, index) in data" :key="d.no">
          <div class="col-12 q-pa-xs">
            <q-item>
              <q-item-section top avatar>
                <q-avatar
                  size="40px"
                  rounded
                  color="primary"
                  class="text-white"
                >
                  <q-icon name="mdi-account" size="28px" />
                </q-avatar>
              </q-item-section>

              <q-item-section>
                <q-item-label class="text-weight-medium">{{
                  d.subject
                }}</q-item-label>
                <q-item-label caption lines="2"
                  >จาก : {{ d.sender }}</q-item-label
                >
              </q-item-section>

              <q-item-section side top>
                <q-item-label caption>{{
                  date2Thai(d.timereceive)
                }}</q-item-label>
                <div class="text-grey-8 q-gutter-xs q-pt-sm">
                  <!-- <q-btn
                    flat
                    round
                    dense
                    icon="mdi-reply"
                    size="10px"
                    color="grey-7"
                  /> -->
                  <q-btn
                    flat
                    round
                    dense
                    icon="mdi-trash-can"
                    size="10px"
                    color="red"
                    @click="deleteData(d.no)"
                  />
                  <!-- <q-btn
                    flat
                    round
                    dense
                    icon="mdi-dots-vertical"
                    size="10px"
                    color="grey-7"
                  /> -->
                </div>
              </q-item-section>
            </q-item>
          </div>
          <div flat class="q-mb-md">
            <q-card
              flat
              bordered
              class="text-dark q-mx-md q-pa-md bg-grey-1"
              :style="$q.screen.gt.xs ? 'height: 64vh' : ''"
              >{{ d.body }}</q-card
            >
            <div :class="$q.screen.gt.xs ? 'absolute-bottom q-mb-md' : ''">
              <div class="row col-12 self-center q-px-md q-pt-md">
                <div v-if="d.payload !== ''" class="row self-center">
                  <q-icon name="mdi-paperclip" color="grey" size="xs" />
                  <div class="text-grey-8 q-pl-sm text-weight-light">
                    เอกสารแนบ
                  </div>
                </div>
                <!-- <q-btn
                  unelevated
                  size="12px"
                  dense
                  class="q-ml-md q-px-sm bg-blue-1 text-blue-7"
                  label="ดาวน์โหลดทั้งหมด"
                /> -->
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </template>
  </q-splitter>
</template>

<style>
.my-menu-link {
  background: #ebf9f7 !important;
  border-radius: 5px;
  border: 1px solid #1bb19ab8;
  color: #1bb19ab8 !important;
}

.my-menu-link .q-hoverable {
  border-radius: 5px;
}

.mytry {
  font-size: 0.75rem;
  padding: 12px;
}

.mytry:hover {
  border-radius: 5px;
}
</style>
