<template>
  <qm-dialog
    v-if="store.setting.uiSetting['specialTag.modal']"
    top="10%"
    width="320px"
    height="180px"
    title="特殊标记"
    :enableResize="false"
    @close="close"
  >
    <div
      class="tw-flex tw-place-content-between tw-m-4 tw-text-xl tw-cursor-pointer"
      style="color: var(--app-main-text-color)"
    >
      <div
        :class="[store.currentSpecialTag === '√' && 'tag-selected', 'tag']"
        @click="toggleTag('√')"
      >
        √
      </div>
      <div
        :class="[store.currentSpecialTag === 'X' && 'tag-selected', 'tag']"
        @click="toggleTag('X')"
      >
        X
      </div>
      <div
        :class="[store.currentSpecialTag === '乄' && 'tag-selected', 'tag']"
        @click="toggleTag('乄')"
      >
        乄
      </div>
      <div
        :class="[store.currentSpecialTag === '——' && 'tag-selected', 'tag']"
        style="width: 70px; border-radius: 5px"
        @click="toggleTag('——')"
      >
        <u>下划线</u>
      </div>
    </div>

    <div class="tw-flex tw-place-content-between tw-mt-8 tw-mx-2">
      <qm-button
        type="primary"
        shape="round"
        size="large"
        style="
          background-color: var(--app-undo-button-bg-color);
          border-color: var(--app-undo-button-bg-color);
        "
        :clickTimeout="300"
        @click="clearLatestTagOfCurrentTask"
      >
        回退
      </qm-button>

      <qm-button
        type="primary"
        shape="round"
        size="large"
        :clickTimeout="300"
        @click="clearAllTagsOfCurrentTask"
      >
        清除全部
      </qm-button>
    </div>
  </qm-dialog>
</template>

<script setup lang="ts">
import { store } from "@/store/store";

function clearLatestTagOfCurrentTask() {
  if (!store.currentTask?.markResult) return;
  store.currentTask.markResult.specialTagList.splice(-1);
}

function clearAllTagsOfCurrentTask() {
  if (!store.currentTask?.markResult) return;
  store.currentTask.markResult.specialTagList = [];
}

const toggleTag = (tagName: string) => {
  if (store.currentSpecialTag === tagName) {
    store.currentSpecialTag = undefined;
  } else {
    store.currentSpecialTag = tagName;
    store.currentScore = undefined;
  }
};

const close = () => {
  store.currentSpecialTag = undefined;
  store.setting.uiSetting["specialTag.modal"] = false;
};
</script>

<style>
.tag {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px;
  border-radius: 30px;
}
.tag-selected {
  background-color: var(--app-main-bg-color);
}
</style>
