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

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

const props = defineProps({
  modal: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Object,
  },
  clickClose: {
    type: Function,
    default: () => {},
  },
});

const emit = defineEmits(["update:modal"]);

const modal = ref<boolean>(false);
const detail = reactive<any>({
  no: "",
  body: "",
  ratingModel: 0,
  receiveDate: "",
  sender: "",
  subject: "",
  payload: [],
});

watch(
  () => props.modal,
  () => {
    if (props.modal) {
      const data = props.data;
      if (data) {
        detail.no = data.no;
        detail.body = data.body;
        detail.ratingMode = data.ratingMode;
        detail.receiveDate = data.receiveDate;
        detail.sender = data.sender;
        detail.subject = data.subject;
        detail.payload = data.payload;
        modal.value = props.modal;
      }
    }
  }
);

watch(
  () => modal.value,
  () => {
    if (!modal.value) {
      emit("update:modal", modal.value);
    }
  }
);

const modalReply = ref<boolean>(false);

function fileOpen(url: string) {
  window.open(url, "_blank");
}
</script>
<template>
  <q-dialog v-model="modal">
    <q-card class="my-card" style="width: 700px; max-width: 80vw">
      <!-- title -->
      <q-item>
        <q-item-section avatar>
          <q-avatar>
            <q-icon name="mail_outline" color="teal" size="1.4em" />
          </q-avatar>
        </q-item-section>

        <q-item-section>
          <q-item-label>{{ detail.subject }}</q-item-label>

          <q-item-label caption>
            วันที่ได้รับ {{ detail.receiveDate }}
          </q-item-label>
        </q-item-section>
        <q-item-section side top>
          <q-btn
            flat
            round
            dense
            icon="mdi-reply"
            color="grey-7"
            @click="(modalReply = true), (modal = false)"
          >
            <q-tooltip>ตอบกลับข้อความ</q-tooltip>
          </q-btn>
        </q-item-section>
      </q-item>

      <q-separator />

      <!-- body -->
      <q-card-section style="padding: 2px">
        <q-card-section class="col-12">
          {{ detail.body }}
        </q-card-section>
      </q-card-section>

      <q-separator />

      <!-- file -->
      <q-card-actions v-if="detail.payload">
        <q-btn flat color="grey-5" icon="mdi-paperclip"
          >ดาวน์โหลดเอกสารแนบ
          <q-menu max-width="480px">
            <q-list
              v-for="(item, index) in detail.payload.attachments"
              :key="index"
            >
              <q-item clickable v-close-popup @click.stop="fileOpen(item.url)">
                <q-item-section>{{ item.name }}</q-item-section>
              </q-item>
              <q-separator />
            </q-list>
          </q-menu>
          <q-tooltip>ดาวน์โหลดเอกสารแนบ</q-tooltip>
        </q-btn>
      </q-card-actions>
    </q-card>
  </q-dialog>

  <PopupReplyInbox
    :modal="modalReply"
    :idInbox="detail.no"
    :click-close="() => (modalReply = false)"
  />
</template>

<style scoped></style>
