From f056ef9da3fc8564c2a900dd1ebf6a075169eb2f Mon Sep 17 00:00:00 2001
From: Hide_D <hided62@gmail.com>
Date: Mon, 6 Mar 2023 02:17:17 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20PageFront=20=EB=A9=94=EC=8B=9C=EC=A7=80?=
 =?UTF-8?q?=20=EC=9E=85=EB=A0=A5(wip)=20-=20'=EC=A6=90=EA=B2=A8=EC=B0=BE?=
 =?UTF-8?q?=EA=B8=B0'=20=EA=B8=B0=EB=8A=A5=20=EC=97=86=EC=9D=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hwe/ts/components/MessagePanel.vue | 233 ++++++++++++++++++++++++++---
 1 file changed, 216 insertions(+), 17 deletions(-)

diff --git a/hwe/ts/components/MessagePanel.vue b/hwe/ts/components/MessagePanel.vue
index df27ee9d..932bc9bc 100644
--- a/hwe/ts/components/MessagePanel.vue
+++ b/hwe/ts/components/MessagePanel.vue
@@ -1,6 +1,38 @@
 <template>
   <div class="MessagePanel">
-    <div class="MessageInputForm">메시지 입력</div>
+    <div class="MessageInputForm row gx-0">
+      <div id="mailbox_list-col" class="col-6 col-md-2 d-grid">
+        <BFormSelect v-model="targetMailbox" class="bg-dark text-white">
+          <optgroup
+            v-for="group of mailboxList"
+            :key="group.label"
+            :label="group.label"
+            :style="{
+              backgroundColor: group.color,
+              color: !group.color ? undefined : isBrightColor(group.color) ? '#000000' : '#ffffff',
+            }"
+          >
+            <BFormSelectOption
+              v-for="target of group.options"
+              :key="target.value"
+              :disabled="target.disabled"
+              :value="target.value"
+              :style="{
+                backgroundColor: target.color ?? '#000000',
+                color: isBrightColor(target.color ?? '#000000') ? '#000000' : '#ffffff',
+              }"
+              >{{ target.text }}
+            </BFormSelectOption>
+          </optgroup>
+        </BFormSelect>
+      </div>
+      <div id="msg_input-col" class="col-12 col-md-8 d-grid">
+        <input v-model="newMessageText" type="text" maxlength="99" @keydown.enter="sendMessage" class="form-control" />
+      </div>
+      <div id="msg_submit-col" class="col-6 col-md-2 d-grid">
+        <BButton variant="primary" @click="sendMessage">서신전달&amp;갱신</BButton>
+      </div>
+    </div>
     <div class="PublicTalk">
       <div class="BoardHeader bg0">전체 메시지</div>
       <template v-if="messagePublic.length == 0">
@@ -73,14 +105,15 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, toRef, type Ref } from "vue";
+import { onMounted, ref, toRef, watch, type Ref } from "vue";
 import { delay } from "@/util/delay";
 import { SammoAPI } from "@/SammoAPI";
 import { isString } from "lodash";
-import type { MsgItem, MsgResponse, MsgType } from "@/defs/API/Message";
+import type { MabilboxListResponse, MailboxItem, MsgItem, MsgResponse, MsgType } from "@/defs/API/Message";
 import MessagePlate from "@/components/MessagePlate.vue";
-import { useToast } from "bootstrap-vue-3";
+import { useToast, BFormSelect, BFormSelectOptionGroup } from "bootstrap-vue-3";
 import { unwrap } from "@/util/unwrap";
+import { isBrightColor } from "@/util/isBrightColor";
 
 const toasts = unwrap(useToast());
 
@@ -100,6 +133,11 @@ const generalName = toRef(props, "generalName");
 const nationID = toRef(props, "nationID");
 const permissionLevel = toRef(props, "permissionLevel");
 
+let nationMailbox = nationID.value + 9000;
+watch(nationID, (newVal) => {
+  nationMailbox = newVal + 9000;
+});
+
 const lastSequence = ref(-1);
 
 const initRefreshLimit = 20;
@@ -270,13 +308,176 @@ async function tryRefresh() {
   return waiterP;
 }
 
+const targetMailbox = ref(nationID.value + 9000);
+type MailboxGroup = {
+  label: string;
+  color?: string;
+  options: MailboxTarget[];
+};
+type MailboxTarget = {
+  value: number;
+  text: string;
+  nationID: number;
+  disabled?: true;
+  color?: string;
+};
+const mailboxList = ref<MailboxGroup[]>([]);
+const newMessageText = ref<string>("");
+
+function refreshMailboxList(obj: MabilboxListResponse) {
+  let myNationColor = "#000000";
+  const diplomacyMailboxList: MailboxGroup = {
+    label: "외교메시지",
+    color: "#000000",
+    options: [],
+  };
+  const nationMailboxList: MailboxGroup[] = [];
+  obj.nation.sort(function (lhs, rhs) {
+    if (lhs.mailbox == nationMailbox) {
+      return -1;
+    }
+    if (rhs.mailbox == nationMailbox) {
+      return 1;
+    }
+    return lhs.mailbox - rhs.mailbox;
+  });
+
+  for (const nation of obj.nation) {
+    if (nationMailbox == nation.mailbox) {
+      myNationColor = nation.color;
+      //nationColor저장하는 코드가 있었음
+    }
+
+    const nationBox: MailboxGroup = {
+      label: nation.name,
+      color: nation.color,
+      options: [],
+    };
+
+    nation.general.sort(function (lhs, rhs) {
+      if (lhs[1] < rhs[1]) {
+        return -1;
+      }
+      if (lhs[1] > rhs[1]) {
+        return 1;
+      }
+      return 0;
+    });
+
+    for (const [destGeneralID, destGeneralName, destGeneralFlag] of nation.general) {
+      const isRuler = !!(destGeneralFlag & 0x1);
+      const isAmbassador = !!(destGeneralFlag & 0x4);
+
+      if (destGeneralID == generalID.value) {
+        continue;
+      }
+
+      let textName = destGeneralName;
+      if (isRuler) {
+        textName = `*${textName}*`;
+      } else if (isAmbassador) {
+        textName = `#${textName}#`;
+      }
+
+      const target: MailboxTarget = {
+        value: destGeneralID,
+        text: textName,
+        nationID: nation.nationID,
+      };
+
+      if (permissionLevel.value == 4 && isAmbassador && nationMailbox != nation.mailbox) {
+        target.disabled = true;
+      }
+      nationBox.options.push(target);
+    }
+    nationMailboxList.push(nationBox);
+
+    if (permissionLevel.value < 4 || nationMailbox == nation.mailbox) {
+      continue;
+    }
+
+    diplomacyMailboxList.options.push({
+      value: nation.mailbox,
+      text: nation.name,
+      nationID: nation.nationID,
+      color: nation.color,
+    });
+  }
+
+  const favoriteBox: MailboxGroup = {
+    label: "즐겨찾기",
+    color: "#000000",
+    options: [
+      {
+        value: nationMailbox,
+        text: "【 아국 메세지 】",
+        nationID: nationID.value,
+        color: myNationColor,
+      },
+      {
+        value: 9999,
+        text: "【 전체 메세지 】",
+        nationID: 0,
+      },
+    ],
+  };
+
+  mailboxList.value = [favoriteBox, diplomacyMailboxList, ...nationMailboxList];
+}
+
+async function sendMessage() {
+  const text = newMessageText.value;
+  if (!text) {
+    return tryRefresh();
+  }
+  const mailbox = targetMailbox.value;
+
+  try {
+    const waiter = SammoAPI.Message.SendMessage({
+      mailbox,
+      text,
+    });
+    newMessageText.value = "";
+    await waiter;
+    await tryRefresh();
+  } catch (e) {
+    if (isString(e)) {
+      toasts.warning({
+        title: "메시지 전송 실패",
+        body: e,
+      });
+    }
+    console.error(e);
+  }
+}
+
+async function tryFullRefresh() {
+  try {
+    const refreshP = tryRefresh();
+    const response = await SammoAPI.Message.GetContactList();
+    refreshMailboxList(response);
+    await refreshP;
+  } catch (e) {
+    if (isString(e)) {
+      toasts.warning({
+        title: " 실패했습니다.",
+        body: e,
+      });
+    }
+    console.error(e);
+    return;
+  }
+
+  beginRefreshTimer();
+}
+
 defineExpose({
   tryRefresh,
+  tryFullRefresh,
 });
 
 onMounted(async () => {
-  beginRefreshTimer();
-  await tryRefresh();
+  await tryFullRefresh();
 });
 </script>
 
@@ -284,33 +485,31 @@ onMounted(async () => {
 @import "@scss/common/break_500px.scss";
 
 .BoardHeader {
-    color: white;
-    outline-style: solid;
-    outline-width: 1px;
-    outline-color: gray;
+  color: white;
+  outline-style: solid;
+  outline-width: 1px;
+  outline-color: gray;
 }
 
 .PublicTalk {
-
 }
 
 @include media-1000px {
-  .MessagePanel{
+  .MessagePanel {
     display: grid;
     grid-template-columns: 1fr 1fr;
   }
 
-  .MessageInputForm{
+  .MessageInputForm {
     grid-column: 1 / 3;
   }
 
-  .PublicTalk{
+  .PublicTalk {
     border-right: 1px solid gray;
   }
 
-  .PrivateTalk{
+  .PrivateTalk {
     border-right: 1px solid gray;
   }
 }
-
-</style>
\ No newline at end of file
+</style>