From 6d49d564c55f50fc088d7d7771873b0e290c819f Mon Sep 17 00:00:00 2001
From: Hide_D <hided62@gmail.com>
Date: Fri, 25 Mar 2022 01:54:29 +0900
Subject: [PATCH] =?UTF-8?q?refac:=20=EC=82=AC=EB=A0=B9=EB=B6=80=20vue?=
 =?UTF-8?q?=EB=A5=BC=20setup=20=EB=B0=A9=EC=8B=9D=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hwe/ts/PageChiefCenter.vue                 | 520 ++++++++----------
 hwe/ts/components/ChiefReservedCommand.vue | 607 ++++++++++-----------
 2 files changed, 513 insertions(+), 614 deletions(-)

diff --git a/hwe/ts/PageChiefCenter.vue b/hwe/ts/PageChiefCenter.vue
index e549eafa..455c4f90 100644
--- a/hwe/ts/PageChiefCenter.vue
+++ b/hwe/ts/PageChiefCenter.vue
@@ -7,10 +7,7 @@
       v-if="chiefList !== undefined"
       :class="`${targetIsMe ? 'targetIsMe' : 'targetIsNotMe'}`"
     >
-      <template
-        v-for="(chiefLevel, vidx) in [12, 10, 8, 6, 11, 9, 7, 5]"
-        :key="chiefLevel"
-      >
+      <template v-for="(chiefLevel, vidx) in [12, 10, 8, 6, 11, 9, 7, 5]" :key="chiefLevel">
         <div
           v-if="vidx % 4 == 0"
           :class="[
@@ -24,9 +21,7 @@
               v-for="idx in maxChiefTurn"
               :class="[`turnIdxLeft`, 'align-self-center', 'center']"
               :key="idx"
-            >
-              {{ idx }}
-            </div>
+            >{{ idx }}</div>
           </div>
         </div>
         <div
@@ -42,21 +37,14 @@
             :turnTerm="turnTerm"
           />
           <div class="commandBox" v-else>
-            <div
-              class="only1000px bg1 center row gx-0"
-              style="height: 24px; font-size: 1.2em"
-            >
-              <div class="col-5 align-self-center text-end">
-                {{ officer.officerLevelText }} :
-              </div>
+            <div class="only1000px bg1 center row gx-0" style="height: 24px; font-size: 1.2em">
+              <div class="col-5 align-self-center text-end">{{ officer.officerLevelText }} :</div>
               <div
                 class="col-7 align-self-center"
                 :style="{
                   color: getNpcColor(officer.npcType ?? 0),
                 }"
-              >
-                {{ officer.name }}
-              </div>
+              >{{ officer.name }}</div>
             </div>
             <div
               :class="[
@@ -72,9 +60,7 @@
                       color: getNpcColor(officer.npcType ?? 0),
                       fontSize: '1.2em',
                     }"
-                  >
-                    {{ officer.name }}
-                  </div>
+                  >{{ officer.name }}</div>
                   <div>{{ officer.officerLevelText }}</div>
                 </div>
                 <div class="row gx-1 gy-1 py-1">
@@ -82,39 +68,26 @@
                     <div
                       class="alert alert-primary mb-0 center"
                       style="padding: 0.5rem 0"
-                    >
-                      {{ serverNow }}
-                    </div>
+                    >{{ serverNow }}</div>
                   </div>
 
                   <b-dropdown class="col-md-4" left text="턴 선택">
-                    <b-dropdown-item @click="selectNone()"
-                      >해제</b-dropdown-item
-                    >
-                    <b-dropdown-item @click="selectAll(true)"
-                      >모든턴</b-dropdown-item
-                    >
-                    <b-dropdown-item @click="selectStep(0, 2)"
-                      >홀수턴</b-dropdown-item
-                    >
-                    <b-dropdown-item @click="selectStep(1, 2)"
-                      >짝수턴</b-dropdown-item
-                    >
+                    <b-dropdown-item @click="selectNone()">해제</b-dropdown-item>
+                    <b-dropdown-item @click="selectAll(true)">모든턴</b-dropdown-item>
+                    <b-dropdown-item @click="selectStep(0, 2)">홀수턴</b-dropdown-item>
+                    <b-dropdown-item @click="selectStep(1, 2)">짝수턴</b-dropdown-item>
                     <b-dropdown-divider></b-dropdown-divider>
 
-                    <b-dropdown-text
-                      v-for="spanIdx in [3, 4, 5, 6, 7]"
-                      :key="spanIdx"
-                    >
-                      {{ spanIdx }}턴 간격<br />
+                    <b-dropdown-text v-for="spanIdx in [3, 4, 5, 6, 7]" :key="spanIdx">
+                      {{ spanIdx }}턴 간격
+                      <br />
                       <b-button-group>
                         <b-button
                           class="ignoreMe"
                           v-for="beginIdx in spanIdx"
                           :key="beginIdx"
                           @click="selectStep(beginIdx - 1, spanIdx)"
-                          >{{ beginIdx }}</b-button
-                        >
+                        >{{ beginIdx }}</b-button>
                       </b-button-group>
                     </b-dropdown-text>
                   </b-dropdown>
@@ -123,34 +96,21 @@
                       v-for="turnIdx in maxPushTurn"
                       :key="turnIdx"
                       @click="repeatNationCommand(turnIdx)"
-                      >{{ turnIdx }}턴
-                    </b-dropdown-item>
+                    >{{ turnIdx }}턴</b-dropdown-item>
                   </b-dropdown>
-                  <b-dropdown
-                    class="col-md-6"
-                    split
-                    text="당기기"
-                    @click="pullNationCommandSingle"
-                  >
+                  <b-dropdown class="col-md-6" split text="당기기" @click="pullNationCommandSingle">
                     <b-dropdown-item
                       v-for="turnIdx in maxPushTurn"
                       :key="turnIdx"
                       @click="pushNationCommand(-turnIdx)"
-                      >{{ turnIdx }}턴
-                    </b-dropdown-item>
+                    >{{ turnIdx }}턴</b-dropdown-item>
                   </b-dropdown>
-                  <b-dropdown
-                    class="col-md-6"
-                    split
-                    text="미루기"
-                    @click="pushNationCommandSingle"
-                  >
+                  <b-dropdown class="col-md-6" split text="미루기" @click="pushNationCommandSingle">
                     <b-dropdown-item
                       v-for="turnIdx in maxPushTurn"
                       :key="turnIdx"
                       @click="pushNationCommand(turnIdx)"
-                      >{{ turnIdx }}턴
-                    </b-dropdown-item>
+                    >{{ turnIdx }}턴</b-dropdown-item>
                   </b-dropdown>
                 </div>
               </div>
@@ -186,9 +146,7 @@
               v-for="idx in maxChiefTurn"
               :class="[`turnIdxRight`, 'align-self-center', 'center']"
               :key="idx"
-            >
-              {{ idx }}
-            </div>
+            >{{ idx }}</div>
           </div>
         </div>
       </template>
@@ -196,19 +154,10 @@
   </div>
   <div id="bottomChiefBox" v-if="chiefList">
     <div id="bottomChiefList" class="c-bg2">
-      <template
-        v-for="(chiefLevel, vidx) in [12, 10, 8, 6, 11, 9, 7, 5]"
-        :key="chiefLevel"
-      >
-        <div
-          class="turnIdx subRows bg0"
-          :style="subTableGridRows"
-          v-if="vidx % 4 == 0"
-        >
+      <template v-for="(chiefLevel, vidx) in [12, 10, 8, 6, 11, 9, 7, 5]" :key="chiefLevel">
+        <div class="turnIdx subRows bg0" :style="subTableGridRows" v-if="vidx % 4 == 0">
           <div class="bg1" style="grid-row: 1/3"></div>
-          <div v-for="idx in maxChiefTurn" :class="[`turnIdxLeft`]" :key="idx">
-            {{ idx }}
-          </div>
+          <div v-for="idx in maxChiefTurn" :class="[`turnIdxLeft`]" :key="idx">{{ idx }}</div>
         </div>
         <BottomItem
           :chiefLevel="chiefLevel"
@@ -217,15 +166,9 @@
           :isMe="chiefLevel == officerLevel"
           @click="viewTarget = chiefLevel"
         />
-        <div
-          class="turnIdx subRows bg0"
-          :style="subTableGridRows"
-          v-if="vidx % 4 == 3"
-        >
+        <div class="turnIdx subRows bg0" :style="subTableGridRows" v-if="vidx % 4 == 3">
           <div class="bg1" style="grid-row: 1/3"></div>
-          <div v-for="idx in maxChiefTurn" :class="`turnIdxRight`" :key="idx">
-            {{ idx }}
-          </div>
+          <div v-for="idx in maxChiefTurn" :class="`turnIdxRight`" :key="idx">{{ idx }}</div>
         </div>
       </template>
     </div>
@@ -234,18 +177,17 @@
     <BottomBar />
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import "@scss/common/bootstrap5.scss";
 import "@scss/game_bg.scss";
 import "../../css/config.css";
 
-import { computed, defineComponent, reactive, ref, toRefs, watch } from "vue";
+import { computed, defineProps, reactive, ref, toRefs, watch } from "vue";
 import ChiefReservedCommand from "@/components/ChiefReservedCommand.vue";
 import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
 import VueTypes from "vue-types";
 import { isString, range } from "lodash";
-import { mb_strwidth } from "./util/mb_strwidth";
 import { entriesWithType } from "./util/entriesWithType";
 import { addMilliseconds } from "date-fns";
 import { formatTime } from "./util/formatTime";
@@ -274,219 +216,205 @@ function isDropdownChildren(e?: Event): boolean {
   return false;
 }
 
-export default defineComponent({
-  components: {
-    TopBackBar,
-    BottomBar,
-    ChiefReservedCommand,
-    TopItem,
-    BottomItem,
-  },
-  props: {
-    maxChiefTurn: VueTypes.number.isRequired,
-  },
-  watch: {
-    year() {
-      console.log(this.lastExecute);
-    },
-  },
-  methods: {
-    toggleTurn(turnIdx: number) {
-      if (this.turnList.has(turnIdx)) {
-        this.turnList.delete(turnIdx);
-      } else {
-        this.turnList.add(turnIdx);
-      }
-    },
-    selectTurn(turnIdx: number) {
-      this.turnList.clear();
-      this.turnList.add(turnIdx);
-    },
-    selectNone() {
-      this.turnList.clear();
-    },
-    selectAll(e: Event | true) {
-      //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
-      if (e !== true && isDropdownChildren(e)) {
-        return;
-      }
+const props = defineProps({
+  maxChiefTurn: VueTypes.number.isRequired,
+})
 
-      if (this.turnList.size * 3 > this.maxChiefTurn) {
-        this.turnList.clear();
-      } else {
-        for (let i = 0; i < this.maxChiefTurn; i++) {
-          this.turnList.add(i);
-        }
-      }
-    },
-    selectStep(begin: number, step: number) {
-      this.turnList.clear();
-      for (const idx of range(0, this.maxChiefTurn)) {
-        if ((idx - begin) % step == 0) {
-          this.turnList.add(idx);
-        }
-      }
-    },
-    async repeatNationCommand(amount: number) {
-      try {
-        await SammoAPI.NationCommand.RepeatCommand({ amount });
-      } catch (e) {
-        console.error(e);
-        alert(`실패했습니다: ${e}`);
-        return;
-      }
-      await this.reloadTable();
-    },
-    async pushNationCommand(amount: number) {
-      try {
-        await SammoAPI.NationCommand.PushCommand({ amount });
-      } catch (e) {
-        console.error(e);
-        alert(`실패했습니다: ${e}`);
-        return;
-      }
-      await this.reloadTable();
-    },
-    pushNationCommandSingle(e: Event) {
-      //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
-      if (isDropdownChildren(e)) {
-        return;
-      }
-      void this.pushNationCommand(1);
-    },
-    pullNationCommandSingle(e: Event) {
-      //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
-      if (isDropdownChildren(e)) {
-        return;
-      }
-      void this.pushNationCommand(-1);
-    },
-  },
-  setup(props) {
-    const viewTarget = ref<number | undefined>();
+const maxPushTurn = props.maxChiefTurn / 2;
 
-    const turnList = ref(new Set<number>());
-
-    const targetIsMe = ref<boolean>(false);
-    watch(viewTarget, (val) => {
-      console.log("targetChange!", val, targetIsMe);
-      if (val === undefined) {
-        targetIsMe.value = false;
-        return;
-      }
-      if (tableObj.officerLevel === undefined) {
-        targetIsMe.value = false;
-      }
-      targetIsMe.value = val === tableObj.officerLevel;
-      console.log("result", targetIsMe.value);
-    });
-
-    const tableObj = reactive<Omit<OptionalFull<ChiefResponse>, "result">>({
-      lastExecute: undefined,
-      year: undefined,
-      month: undefined,
-      turnTerm: undefined,
-      date: undefined,
-      chiefList: undefined,
-      isChief: undefined,
-      autorun_limit: undefined,
-      officerLevel: undefined,
-      commandList: undefined,
-      mapName: undefined,
-      unitSet: undefined,
-    });
-
-    async function reloadTable(): Promise<void> {
-      try {
-        const response =
-          await SammoAPI.NationCommand.GetReservedCommand<ChiefResponse>();
-        console.log(response);
-        for (const [key, value] of entriesWithType(response)) {
-          if (key === "result") {
-            continue;
-          }
-
-          if (key === "officerLevel") {
-            if (value < 5) {
-              tableObj.officerLevel = undefined;
-            } else {
-              tableObj.officerLevel = value as number;
-            }
-            continue;
-          }
-
-          //HACK:
-          tableObj[key as unknown as "year"] = value as unknown as undefined;
-        }
-
-        const serverNowObj = parseTime(response.date);
-        const clientNowObj = new Date();
-        timeDiff.value = serverNowObj.getTime() - clientNowObj.getTime();
-
-        if (viewTarget.value === undefined) {
-          if (!tableObj.officerLevel) {
-            viewTarget.value = 12;
-          } else {
-            viewTarget.value = tableObj.officerLevel;
-          }
-        }
-      } catch (e) {
-        if (isString(e)) {
-          alert(e);
-        }
-        console.error(e);
-        return;
-      }
-    }
-    //
-
-    const mainTableGridRows = computed(() => {
-      return {
-        gridTemplateRows: `24px repeat(${props.maxChiefTurn}, 30px)`,
-      };
-    });
-
-    const subTableGridRows = computed(() => {
-      return {
-        gridTemplateRows: `36px repeat(${props.maxChiefTurn + 1}, 1fr)`,
-      };
-    });
-
-    void reloadTable();
-
-    const serverNow = ref(formatTime(new Date(), "HH:mm:ss"));
-    const timeDiff = ref(0);
-
-    function updateNow() {
-      const serverNowObj = addMilliseconds(new Date(), timeDiff.value);
-      serverNow.value = formatTime(serverNowObj, "HH:mm:ss");
-      setTimeout(() => {
-        updateNow();
-      }, 1000 - serverNowObj.getMilliseconds());
-    }
-
-    setTimeout(() => {
-      updateNow();
-    }, 500);
-
-    return {
-      updateNow,
-      serverNow,
-      timeDiff,
-      turnList,
-      ...toRefs(tableObj),
-      mb_strwidth,
-      mainTableGridRows,
-      subTableGridRows,
-      reloadTable,
-      getNpcColor,
-      unwrap,
-      viewTarget,
-      targetIsMe,
-      maxPushTurn: props.maxChiefTurn / 2,
-    };
-  },
+const tableObj = reactive<Omit<OptionalFull<ChiefResponse>, "result">>({
+  lastExecute: undefined,
+  year: undefined,
+  month: undefined,
+  turnTerm: undefined,
+  date: undefined,
+  chiefList: undefined,
+  isChief: undefined,
+  autorun_limit: undefined,
+  officerLevel: undefined,
+  commandList: undefined,
+  mapName: undefined,
+  unitSet: undefined,
 });
+
+const {
+  year,
+  month,
+  turnTerm,
+  date,
+  chiefList,
+  officerLevel,
+  commandList,
+} = toRefs(tableObj);
+
+const viewTarget = ref<number | undefined>();
+
+const turnList = ref(new Set<number>());
+
+const targetIsMe = ref<boolean>(false);
+watch(viewTarget, (val) => {
+  console.log("targetChange!", val, targetIsMe);
+  if (val === undefined) {
+    targetIsMe.value = false;
+    return;
+  }
+  if (tableObj.officerLevel === undefined) {
+    targetIsMe.value = false;
+  }
+  targetIsMe.value = val === tableObj.officerLevel;
+  console.log("result", targetIsMe.value);
+});
+
+function toggleTurn(turnIdx: number) {
+  if (turnList.value.has(turnIdx)) {
+    turnList.value.delete(turnIdx);
+  } else {
+    turnList.value.add(turnIdx);
+  }
+}
+
+function selectTurn(turnIdx: number) {
+  turnList.value.clear();
+  turnList.value.add(turnIdx);
+}
+
+function selectNone() {
+  turnList.value.clear();
+}
+
+function selectAll(e: Event | true) {
+  //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
+  if (e !== true && isDropdownChildren(e)) {
+    return;
+  }
+
+  if (turnList.value.size * 3 > props.maxChiefTurn) {
+    turnList.value.clear();
+  } else {
+    for (let i = 0; i < props.maxChiefTurn; i++) {
+      turnList.value.add(i);
+    }
+  }
+}
+function selectStep(begin: number, step: number) {
+  turnList.value.clear();
+  for (const idx of range(0, props.maxChiefTurn)) {
+    if ((idx - begin) % step == 0) {
+      turnList.value.add(idx);
+    }
+  }
+}
+
+async function repeatNationCommand(amount: number) {
+  try {
+    await SammoAPI.NationCommand.RepeatCommand({ amount });
+  } catch (e) {
+    console.error(e);
+    alert(`실패했습니다: ${e}`);
+    return;
+  }
+  await reloadTable();
+}
+
+async function pushNationCommand(amount: number) {
+  try {
+    await SammoAPI.NationCommand.PushCommand({ amount });
+  } catch (e) {
+    console.error(e);
+    alert(`실패했습니다: ${e}`);
+    return;
+  }
+  await reloadTable();
+}
+
+function pushNationCommandSingle(e: Event) {
+  //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
+  if (isDropdownChildren(e)) {
+    return;
+  }
+  void pushNationCommand(1);
+}
+
+function pullNationCommandSingle(e: Event) {
+  //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
+  if (isDropdownChildren(e)) {
+    return;
+  }
+  void pushNationCommand(-1);
+}
+
+async function reloadTable(): Promise<void> {
+  try {
+    const response =
+      await SammoAPI.NationCommand.GetReservedCommand<ChiefResponse>();
+    console.log(response);
+    for (const [key, value] of entriesWithType(response)) {
+      if (key === "result") {
+        continue;
+      }
+
+      if (key === "officerLevel") {
+        if (value < 5) {
+          tableObj.officerLevel = undefined;
+        } else {
+          tableObj.officerLevel = value as number;
+        }
+        continue;
+      }
+
+      //HACK:
+      tableObj[key as unknown as "year"] = value as unknown as undefined;
+    }
+
+    const serverNowObj = parseTime(response.date);
+    const clientNowObj = new Date();
+    timeDiff.value = serverNowObj.getTime() - clientNowObj.getTime();
+
+    if (viewTarget.value === undefined) {
+      if (!tableObj.officerLevel) {
+        viewTarget.value = 12;
+      } else {
+        viewTarget.value = tableObj.officerLevel;
+      }
+    }
+  } catch (e) {
+    if (isString(e)) {
+      alert(e);
+    }
+    console.error(e);
+    return;
+  }
+}
+
+const mainTableGridRows = computed(() => {
+  return {
+    gridTemplateRows: `24px repeat(${props.maxChiefTurn}, 30px)`,
+  };
+});
+
+const subTableGridRows = computed(() => {
+  return {
+    gridTemplateRows: `36px repeat(${props.maxChiefTurn + 1}, 1fr)`,
+  };
+});
+
+void reloadTable();
+
+const serverNow = ref(formatTime(new Date(), "HH:mm:ss"));
+const timeDiff = ref(0);
+
+function updateNow() {
+  const serverNowObj = addMilliseconds(new Date(), timeDiff.value);
+  serverNow.value = formatTime(serverNowObj, "HH:mm:ss");
+  setTimeout(() => {
+    updateNow();
+  }, 1000 - serverNowObj.getMilliseconds());
+}
+
+setTimeout(() => {
+  updateNow();
+}, 500);
+
 </script>
 <style lang="scss">
 @import "@scss/chiefCenter.scss";
diff --git a/hwe/ts/components/ChiefReservedCommand.vue b/hwe/ts/components/ChiefReservedCommand.vue
index ed90b82d..0d98e1c4 100644
--- a/hwe/ts/components/ChiefReservedCommand.vue
+++ b/hwe/ts/components/ChiefReservedCommand.vue
@@ -6,8 +6,8 @@
         attribute="turnIdx"
         @dragStart="isDragSingle = true"
         @dragDone="
-          isDragSingle = false;
-          selectTurn(...$event);
+  isDragSingle = false;
+selectTurn(...$event);
         "
         v-slot="{ selected }"
       >
@@ -23,17 +23,15 @@
             color:
               isDragSingle && selected.has(`${turnIdx}`) ? 'cyan' : undefined,
           }"
-        >
-          {{ turnObj.time }}
-        </div>
+        >{{ turnObj.time }}</div>
       </DragSelect>
       <DragSelect
         :style="rowGridStyle"
         attribute="turnIdx"
         @dragStart="isDragToggle = true"
         @dragDone="
-          isDragToggle = false;
-          toggleTurn(...$event);
+  isDragToggle = false;
+toggleTurn(...$event);
         "
         v-slot="{ selected }"
       >
@@ -49,13 +47,12 @@
               isDragToggle && selected.has(`${turnIdx}`)
                 ? 'light'
                 : turnList.has(turnIdx)
-                ? 'info'
-                : turnList.size == 0 && prevTurnList.has(turnIdx)
-                ? 'success'
-                : 'primary'
+                  ? 'info'
+                  : turnList.size == 0 && prevTurnList.has(turnIdx)
+                    ? 'success'
+                    : 'primary'
             "
-            >{{ turnIdx + 1 }}</b-button
-          >
+          >{{ turnIdx + 1 }}</b-button>
         </div>
       </DragSelect>
       <div :style="rowGridStyle">
@@ -83,8 +80,9 @@
           :variant="searchModeOn ? 'info' : 'primary'"
           v-b-tooltip.hover
           title="검색 기능을 활성화합니다."
-          ><i class="bi bi-search"></i
-        ></b-button>
+        >
+          <i class="bi bi-search"></i>
+        </b-button>
       </div>
       <div class="col-7">
         <v-multiselect
@@ -99,40 +97,28 @@
           open-direction="top"
           :show-labels="false"
           selectLabel="선택(엔터)"
-          selectGroupLabel=""
+          selectGroupLabel
           selectedLabel="선택됨"
           deselectLabel="해제(엔터)"
-          deselectGroupLabel=""
+          deselectGroupLabel
           placeholder="턴 선택"
           :maxHeight="400"
           :searchable="searchModeOn"
         >
           <template v-slot:noResult>검색 결과가 없습니다.</template>
-          <template v-slot:option="props"
-            ><!--FIXME: 카테고리-->
+          <template v-slot:option="props">
+            <!--FIXME: 카테고리-->
             <template v-if="props.option.title">
-              <span
-                class="compensatePositive"
-                v-if="props.option.compensation > 0"
-                >▲</span
-              >
-              <span
-                class="compensateNegative"
-                v-else-if="props.option.compensation < 0"
-                >▼</span
-              >
+              <span class="compensatePositive" v-if="props.option.compensation > 0">▲</span>
+              <span class="compensateNegative" v-else-if="props.option.compensation < 0">▼</span>
               <span class="compensateNeutral" v-else></span>
-              <span :class="[props.option.possible ? '' : 'commandImpossible']">
-                {{ props.option.title }}
-              </span>
-            </template>
-            <template v-else-if="props.option.category">
-              {{ props.option.category }}
+              <span
+                :class="[props.option.possible ? '' : 'commandImpossible']"
+              >{{ props.option.title }}</span>
             </template>
+            <template v-else-if="props.option.category">{{ props.option.category }}</template>
           </template>
-          <template v-slot:singleLabel="props">
-            {{ props.option.simpleName }}
-          </template>
+          <template v-slot:singleLabel="props">{{ props.option.simpleName }}</template>
         </v-multiselect>
       </div>
       <div class="col-3 d-grid">
@@ -142,10 +128,10 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import addMinutes from "date-fns/esm/addMinutes";
 import { stringifyUrl } from "query-string";
-import { defineComponent, type PropType } from "vue";
+import { defineProps, defineEmits, onMounted, ref, watch, type PropType } from "vue";
 import { formatTime } from "@util/formatTime";
 import { joinYearMonth } from "@util/joinYearMonth";
 import { mb_strwidth } from "@util/mb_strwidth";
@@ -159,11 +145,6 @@ import { SammoAPI } from "@/SammoAPI";
 import type { ChiefResponse, CommandItem, TurnObj } from "@/defs";
 
 
-/*declare const commandList: {
-  category: string;
-  values: commandItem[];
-}[];*/
-
 type TurnObjWithTime = TurnObj & {
   time: string;
   year?: number;
@@ -174,293 +155,283 @@ type TurnObjWithTime = TurnObj & {
 
 const searchModeKey = `sammo_searchModeOn`;
 
-export default defineComponent({
-  name: "NationReservedCommand",
-  components: {
-    DragSelect
+const props = defineProps({
+  maxTurn: VueTypes.integer.isRequired,
+  maxPushTurn: VueTypes.integer.isRequired,
+  date: VueTypes.string.isRequired,
+  year: VueTypes.integer.isRequired,
+  month: VueTypes.integer.isRequired,
+  turnTerm: VueTypes.integer.isRequired,
+  turnTime: VueTypes.string.isRequired,
+  selectedTurn: {
+    type: Object as PropType<Set<number>>,
+    required: false,
+    default: () => new Set(),
   },
-  props: {
-    maxTurn: VueTypes.integer.isRequired,
-    maxPushTurn: VueTypes.integer.isRequired,
-    date: VueTypes.string.isRequired,
-    year: VueTypes.integer.isRequired,
-    month: VueTypes.integer.isRequired,
-    turnTerm: VueTypes.integer.isRequired,
-    turnTime: VueTypes.string.isRequired,
-    selectedTurn: {
-      type: Object as PropType<Set<number>>,
-      required: false,
-      default: () => new Set(),
-    },
-    turn: {
-      type: Array as PropType<TurnObj[]>,
-      required: true,
-    },
-    commandList: {
-      type: Object as PropType<ChiefResponse['commandList']>,
-      required: true,
-    },
+  turn: {
+    type: Array as PropType<TurnObj[]>,
+    required: true,
   },
-  emits: ["raiseReload", "update:selectedTurn"],
-  watch: {
-    date() {
-      this.triggerUpdateCommandList("date");
-    },
-    year() {
-      this.triggerUpdateCommandList("year");
-    },
-    month() {
-      this.triggerUpdateCommandList("month");
-    },
-    turnTime() {
-      this.triggerUpdateCommandList("turnTime");
-    },
-    commandList() {
-      this.triggerUpdateCommandList("commandList");
-    },
-    selectedTurn(val: Set<number>) {
-      console.log(val);
-      if (val === this.turnList) {
-        console.log("pass!");
-        return;
-      }
-      this.turnList.clear();
-      for (const t of val.values()) {
-        this.turnList.add(t);
-      }
-    },
-    turnList: {
-      handler() {
-        console.log(this.turnList);
-        this.$emit("update:selectedTurn", this.turnList);
-      },
-      deep: true,
-    },
+  commandList: {
+    type: Object as PropType<ChiefResponse['commandList']>,
+    required: true,
   },
-  methods: {
-    triggerUpdateCommandList(type?: string) {
-      console.log("try update", type);
-      this.updated = false;
-      setTimeout(() => {
-        this.updateCommandList();
-      }, 1);
-    },
-    toggleTurn(...turnList: number[] | string[]) {
-      for (let turnIdx of turnList) {
-        if (isString(turnIdx)) {
-          turnIdx = parseInt(turnIdx);
-        }
-        if (this.turnList.has(turnIdx)) {
-          this.turnList.delete(turnIdx);
-        } else {
-          this.turnList.add(turnIdx);
-        }
-      }
-      this.$emit("update:selectedTurn", this.turnList);
-    },
-    selectTurn(...turnList: number[] | string[]) {
-      this.turnList.clear();
-      for (const turnIdx of turnList) {
-        if (isString(turnIdx)) {
-          this.turnList.add(parseInt(turnIdx));
-        } else {
-          this.turnList.add(turnIdx);
-        }
-      }
-      this.$emit("update:selectedTurn", this.turnList);
-    },
-    updateCommandList() {
-      if (this.updated) {
-        return;
-      }
-      console.log("do update!");
-      const reservedCommandList: TurnObjWithTime[] = [];
-      let yearMonth = joinYearMonth(this.year, this.month);
+})
 
-      const turnTime = parseTime(this.turnTime);
-      let nextTurnTime = new Date(turnTime);
 
-      const autorunLimitYearMonth = this.autorun_limit ?? yearMonth - 1;
-      const [autorunLimitYear, autorunLimitMonth] = parseYearMonth(
-        autorunLimitYearMonth
+const serverNowObj = ref(parseTime(props.date));
+const clientNowObj = ref(new Date());
+const timeDiff = ref(serverNowObj.value.getTime() - clientNowObj.value.getTime());
+
+const listReqArgCommand = new Set<string>();
+for (const commandCategories of props.commandList) {
+  if (!commandCategories.values) {
+    continue;
+  }
+  for (const commandObj of commandCategories.values) {
+    if (!commandObj.reqArg) {
+      continue;
+    }
+    listReqArgCommand.add(commandObj.value);
+  }
+}
+
+const selectedCommand = ref(props.commandList[0].values[0]);
+for (const subCategory of props.commandList) {
+  for (const command of subCategory.values) {
+    if (command.searchText) {
+      continue;
+    }
+    command.searchText = convertSearch초성(command.simpleName).join("|");
+  }
+}
+
+const invCommandMap: Record<string, CommandItem> = {};
+for (const category of props.commandList) {
+  for (const command of category.values) {
+    invCommandMap[command.value] = command;
+  }
+}
+
+const searchModeOn = ref((localStorage.getItem(searchModeKey) ?? "0") != "0");
+
+const emptyTurn: TurnObjWithTime[] = Array.from<TurnObjWithTime>({
+  length: props.maxTurn,
+}).fill({
+  arg: {},
+  brief: "",
+  action: "",
+  year: undefined,
+  month: undefined,
+  time: "",
+});
+
+const prevTurnList = ref(new Set([0]));
+
+const rowGridStyle = ref({
+  display: "grid",
+  gridTemplateRows: `repeat(${props.maxTurn}, 30px)`,
+});
+
+const updated = ref(false);
+const isDragSingle = ref(false);
+const isDragToggle = ref(false);
+const reservedCommandList = ref(emptyTurn);
+const turnList = ref(props.selectedTurn);
+const autorun_limit = ref<number | null>(null);
+
+const emit = defineEmits<{
+  (event: 'raiseReload'): void,
+  (event: 'update:selectedTurn', value: Set<number>): void,
+}>();
+
+function triggerUpdateCommandList(type?: string) {
+  console.log("try update", type);
+  updated.value = false;
+  setTimeout(() => {
+    updateCommandList();
+  }, 1);
+}
+function toggleTurn(...reqTurnList: number[] | string[]) {
+  for (let turnIdx of reqTurnList) {
+    if (isString(turnIdx)) {
+      turnIdx = parseInt(turnIdx);
+    }
+    if (turnList.value.has(turnIdx)) {
+      turnList.value.delete(turnIdx);
+    } else {
+      turnList.value.add(turnIdx);
+    }
+  }
+  emit("update:selectedTurn", turnList.value);
+}
+
+function selectTurn(...reqTurnList: number[] | string[]) {
+  turnList.value.clear();
+  for (const turnIdx of reqTurnList) {
+    if (isString(turnIdx)) {
+      turnList.value.add(parseInt(turnIdx));
+    } else {
+      turnList.value.add(turnIdx);
+    }
+  }
+  emit("update:selectedTurn", turnList.value);
+}
+
+function updateCommandList() {
+  if (updated.value) {
+    return;
+  }
+  console.log("do update!");
+  const _reservedCommandList: TurnObjWithTime[] = [];
+  let yearMonth = joinYearMonth(props.year, props.month);
+
+  const turnTime = parseTime(props.turnTime);
+  let nextTurnTime = new Date(turnTime);
+
+  const autorunLimitYearMonth = autorun_limit.value ?? yearMonth - 1;
+  const [autorunLimitYear, autorunLimitMonth] = parseYearMonth(
+    autorunLimitYearMonth
+  );
+
+  for (const obj of props.turn) {
+    const [year, month] = parseYearMonth(yearMonth);
+    let tooltip: string[] = [];
+    let style: Record<string, unknown> = {};
+
+    const brief = obj.brief;
+
+    if (yearMonth <= autorunLimitYearMonth) {
+      if (obj.brief == "휴식") {
+        obj.brief = "휴식<small>(자율 행동)</small>";
+      }
+      style.color = "#aaffff";
+
+      tooltip.push(
+        `자율 행동 기간: ${autorunLimitYear}년 ${autorunLimitMonth}월까지`
       );
-
-      for (const obj of this.turn) {
-        const [year, month] = parseYearMonth(yearMonth);
-        let tooltip: string[] = [];
-        let style: Record<string, unknown> = {};
-
-        const brief = obj.brief;
-
-        if (yearMonth <= autorunLimitYearMonth) {
-          if (obj.brief == "휴식") {
-            obj.brief = "휴식<small>(자율 행동)</small>";
-          }
-          style.color = "#aaffff";
-
-          tooltip.push(
-            `자율 행동 기간: ${autorunLimitYear}년 ${autorunLimitMonth}월까지`
-          );
-        }
-
-        if (mb_strwidth(brief) > 22) {
-          tooltip.push(brief);
-        }
-
-        reservedCommandList.push({
-          ...obj,
-          year,
-          month,
-          time: formatTime(
-            nextTurnTime,
-            this.turnTerm >= 5 ? "HH:mm" : "mm:ss"
-          ),
-          tooltip: tooltip.length == 0 ? undefined : tooltip.join("\n"),
-          style,
-        });
-
-        yearMonth += 1;
-        nextTurnTime = addMinutes(nextTurnTime, this.turnTerm);
-      }
-      this.reservedCommandList = reservedCommandList;
-
-      const serverNowObj = parseTime(this.date);
-      const clientNowObj = new Date();
-      const timeDiff = serverNowObj.getTime() - clientNowObj.getTime();
-      this.timeDiff = timeDiff;
-      this.updated = true;
-    },
-    async reserveCommand() {
-      let turnList: number[];
-      if (this.turnList.size == 0) {
-        turnList = Array.from(this.prevTurnList.values());
-      } else {
-        turnList = Array.from(this.turnList.values());
-      }
-
-      if (turnList.length == 0) {
-        turnList.push(0);
-      }
-
-      const commandName = this.selectedCommand.value;
-
-      if (this.listReqArgCommand.has(commandName)) {
-        document.location.href = stringifyUrl({
-          url: "v_processing.php",
-          query: {
-            command: commandName,
-            turnList: turnList.join("_"),
-            is_chief: true,
-          },
-        });
-        return;
-      }
-
-      try {
-        await SammoAPI.NationCommand.ReserveCommand({
-          turnList,
-          action: commandName,
-        });
-
-        if (this.turnList.size > 0) {
-          this.prevTurnList.clear();
-          for (const v of this.turnList) {
-            this.prevTurnList.add(v);
-          }
-          this.turnList.clear();
-        }
-      } catch (e) {
-        console.error(e);
-        alert(`실패했습니다: ${e}`);
-        return;
-      }
-      this.$emit("raiseReload");
-    },
-    toggleSearchCommand() {
-      const searchModeOn = !this.searchModeOn;
-      this.searchModeOn = searchModeOn;
-      localStorage.setItem(searchModeKey, searchModeOn ? "1" : "0");
-    },
-    chooseCommand(val: string){
-      this.selectedCommand = this.invCommandMap[val];
-    },
-  },
-  data() {
-    const serverNowObj = parseTime(this.date);
-    const clientNowObj = new Date();
-    const timeDiff = serverNowObj.getTime() - clientNowObj.getTime();
-
-    const listReqArgCommand = new Set<string>();
-    for (const commandCategories of this.commandList) {
-      if (!commandCategories.values) {
-        continue;
-      }
-      for (const commandObj of commandCategories.values) {
-        if (!commandObj.reqArg) {
-          continue;
-        }
-        listReqArgCommand.add(commandObj.value);
-      }
     }
 
-    const selectedCommand = this.commandList[0].values[0];
-    for (const subCategory of this.commandList) {
-      for (const command of subCategory.values) {
-        if (command.searchText) {
-          continue;
-        }
-        command.searchText = convertSearch초성(command.simpleName).join("|");
-      }
+    if (mb_strwidth(brief) > 22) {
+      tooltip.push(brief);
     }
 
-    const invCommandMap: Record<string, CommandItem> = {};
-    for(const category of this.commandList){
-      for(const command of category.values){
-        invCommandMap[command.value] = command;
-      }
-    }
-
-    const searchModeOn = (localStorage.getItem(searchModeKey) ?? "0") != "0";
-
-    const emptyTurn: TurnObjWithTime[] = Array.from<TurnObjWithTime>({
-      length: this.maxTurn,
-    }).fill({
-      arg: {},
-      brief: "",
-      action: "",
-      year: undefined,
-      month: undefined,
-      time: "",
+    _reservedCommandList.push({
+      ...obj,
+      year,
+      month,
+      time: formatTime(
+        nextTurnTime,
+        props.turnTerm >= 5 ? "HH:mm" : "mm:ss"
+      ),
+      tooltip: tooltip.length == 0 ? undefined : tooltip.join("\n"),
+      style,
     });
 
-    const prevTurnList = new Set([0]);
+    yearMonth += 1;
+    nextTurnTime = addMinutes(nextTurnTime, props.turnTerm);
+  }
+  reservedCommandList.value = _reservedCommandList;
 
-    const rowGridStyle = {
-      display: "grid",
-      gridTemplateRows: `repeat(${this.maxTurn}, 30px)`,
-    };
+  const serverNowObj = parseTime(props.date);
+  const clientNowObj = new Date();
+  timeDiff.value = serverNowObj.getTime() - clientNowObj.getTime();
+  updated.value = true;
+}
+
+async function reserveCommand() {
+  let reqTurnList: number[];
+  if (turnList.value.size == 0) {
+    reqTurnList = Array.from(prevTurnList.value.values());
+  } else {
+    reqTurnList = Array.from(turnList.value.values());
+  }
+
+  if (reqTurnList.length == 0) {
+    reqTurnList.push(0);
+  }
+
+  const commandName = selectedCommand.value.value;
+
+  if (listReqArgCommand.has(commandName)) {
+    document.location.href = stringifyUrl({
+      url: "v_processing.php",
+      query: {
+        command: commandName,
+        turnList: reqTurnList.join("_"),
+        is_chief: true,
+      },
+    });
+    return;
+  }
+
+  try {
+    await SammoAPI.NationCommand.ReserveCommand({
+      turnList: reqTurnList,
+      action: commandName,
+    });
+
+    if (turnList.value.size > 0) {
+      prevTurnList.value.clear();
+      for (const v of reqTurnList) {
+        prevTurnList.value.add(v);
+      }
+      turnList.value.clear();
+    }
+  } catch (e) {
+    console.error(e);
+    alert(`실패했습니다: ${e}`);
+    return;
+  }
+  emit("raiseReload");
+}
+function toggleSearchCommand() {
+  searchModeOn.value = !searchModeOn.value;
+  localStorage.setItem(searchModeKey, searchModeOn.value ? "1" : "0");
+}
+
+function chooseCommand(val: string) {
+  selectedCommand.value = invCommandMap[val];
+}
+
+
+watch(() => props.date, () => {
+  triggerUpdateCommandList("date");
+})
+watch(() => props.year, () => {
+  triggerUpdateCommandList("year");
+})
+watch(() => props.month, () => {
+  triggerUpdateCommandList("month");
+})
+watch(() => props.turnTime, () => {
+  triggerUpdateCommandList("turnTime");
+})
+watch(() => props.commandList, () => {
+  triggerUpdateCommandList("commandList");
+})
+watch(() => props.selectedTurn, (val: Set<number>) => {
+  console.log(val);
+  if (val === turnList.value) {
+    console.log("pass!");
+    return;
+  }
+  turnList.value.clear();
+  for (const t of val.values()) {
+    turnList.value.add(t);
+  }
+})
+
+watch(turnList, () => {
+  console.log(turnList.value);
+  emit("update:selectedTurn", turnList.value);
+})
+
+
+onMounted(() => {
+  updateCommandList();
+})
 
-    return {
-      updated: false,
-      listReqArgCommand,
-      serverNow: formatTime(serverNowObj, "HH:mm:ss"),
-      timeDiff,
-      prevTurnList,
-      turnList: this.selectedTurn,
-      selectedCommand,
-      reservedCommandList: emptyTurn,
-      autorun_limit: null as null | number,
-      searchModeOn,
-      rowGridStyle,
-      isDragSingle: false,
-      isDragToggle: false,
-      invCommandMap,
-    };
-  },
-  mounted() {
-    this.updateCommandList();
-  },
-});
 </script>
 <style lang="scss">
 @import "@scss/common/break_500px.scss";