<template>
  <div class="mark-tool">
    <div>
      <div
        v-if="checkValid('allPage')"
        class="mark-tool-item"
        @click="toAllPage"
      >
        <img src="@/assets/icons/icon-all-page.svg" />
        <p>全卷</p>
      </div>
      <div
        v-if="checkValid('minimap')"
        :class="[
          'mark-tool-item',
          { 'is-active': store.setting.uiSetting['minimap.modal'] },
        ]"
        @click="toThumbnail"
      >
        <img src="@/assets/icons/icon-thumbnail.svg" />
        <p>缩略图</p>
      </div>
      <div
        v-if="checkValid('answer') && store.setting.subject.answerUrl"
        :class="[
          'mark-tool-item',
          { 'is-active': store.setting.uiSetting['answer.modal'] },
        ]"
        @click="toAnswer"
      >
        <img src="@/assets/icons/icon-answer.svg" />
        <p>答案</p>
      </div>
      <div
        v-if="checkValid('issuePaper')"
        class="mark-tool-item"
        @click="toIssuePaper"
      >
        <img src="@/assets/icons/icon-issue-paper.svg" />
        <p>问题试卷</p>
      </div>
      <div v-if="checkValid('sizeScale')" class="mark-tool-item tool-scale">
        <div>
          <span>Aa</span>
          <a-slider
            v-model:value="store.setting.uiSetting['score.fontSize.scale']"
            :min="0.5"
            :step="0.1"
            :max="3"
          />
        </div>
        <p>分数/标记大小</p>
      </div>
      <div
        v-if="checkValid('shortCut')"
        :class="[
          'mark-tool-item',
          { 'is-active': store.setting.uiSetting['shortCut.modal'] },
        ]"
        @click="toShortcut"
      >
        <img src="@/assets/icons/icon-shortcut.svg" />
        <p>快捷键</p>
      </div>
      <div
        v-if="checkValid('specialTag')"
        :class="[
          'mark-tool-item',
          { 'is-active': store.setting.uiSetting['specialTag.modal'] },
        ]"
        @click="toSpecialTag"
      >
        <img src="@/assets/icons/icon-special-tag.svg" />
        <p>特殊标记</p>
      </div>
    </div>
    <div>
      <div
        v-if="store.setting.enableAllZero && !store.setting.forceSpecialTag"
        class="mark-tool-item"
        @click="toAllZero"
      >
        <img src="@/assets/icons/icon-all-zero.svg" />
        <p>全部零分</p>
      </div>
      <template v-if="checkValid('imgScale')">
        <div
          :class="['mark-tool-item', { 'is-active': greaterThanOneScale }]"
          @click="toMagnify"
        >
          <img src="@/assets/icons/icon-magnify.svg" />
          <p>放大</p>
        </div>
        <div
          :class="['mark-tool-item', { 'is-active': lessThanOneScale }]"
          @click="toMinify"
        >
          <img src="@/assets/icons/icon-minify.svg" />
          <p>缩小</p>
        </div>
        <div
          :class="['mark-tool-item', { 'is-active': equalOneScale }]"
          @click="toOrigin"
        >
          <img src="@/assets/icons/icon-origin-size.svg" />
          <p>实际大小</p>
        </div>
      </template>
    </div>
  </div>
  <MarkProblemDialog v-if="checkValid('issuePaper')" ref="problemRef" />
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted } from "vue";
import { store } from "@/store/store";
import { Modal } from "ant-design-vue";
import MarkProblemDialog from "./MarkProblemDialog.vue";

/**
 * allPage:全卷
 * minimap:缩略图
 * answer:答案
 * issuePaper:问题试卷
 * sizeScale:标记大小
 * shortCut:快捷键
 * specialTag:特殊标记
 * imgScale:图片缩放
 */
const { actions = [] } = defineProps<{
  actions?: string[];
}>();

type ShowModalFunc = () => void;

const checkValid = (name) => {
  if (!actions.length) return true;
  return actions.includes(name);
};

const emit = defineEmits(["allZeroSubmit"]);
let problemRef = $ref<InstanceType<typeof MarkProblemDialog>>();

const toAllPage = () => {
  store.allPaperModal = !store.allPaperModal;
};
const toThumbnail = () => {
  store.setting.uiSetting["minimap.modal"] =
    !store.setting.uiSetting["minimap.modal"];
};
const toAnswer = () => {
  store.setting.uiSetting["answer.modal"] =
    !store.setting.uiSetting["answer.modal"];
};
const toIssuePaper = () => {
  (problemRef.showModal as ShowModalFunc)();
};

const toShortcut = () => {
  store.setting.uiSetting["shortCut.modal"] =
    !store.setting.uiSetting["shortCut.modal"];
};
const toSpecialTag = () => {
  store.setting.uiSetting["specialTag.modal"] =
    !store.setting.uiSetting["specialTag.modal"];
};

const toAllZero = () => {
  Modal.confirm({
    title: "操作警告",
    content: "确定给全零分？",
    onOk() {
      emit("allZeroSubmit");
    },
  });
};
const toMagnify = () => {
  const s = store.setting.uiSetting["answer.paper.scale"];
  if (s < 3)
    store.setting.uiSetting["answer.paper.scale"] = +(s + 0.2).toFixed(1);
};
const toMinify = () => {
  const s = store.setting.uiSetting["answer.paper.scale"];
  if (s > 0.2)
    store.setting.uiSetting["answer.paper.scale"] = +(s - 0.2).toFixed(1);
};
const toOrigin = () => {
  store.setting.uiSetting["answer.paper.scale"] = 1;
};
const greaterThanOneScale = computed(() => {
  return store.setting.uiSetting["answer.paper.scale"] > 1;
});
const lessThanOneScale = computed(() => {
  return store.setting.uiSetting["answer.paper.scale"] < 1;
});
const equalOneScale = computed(() => {
  return store.setting.uiSetting["answer.paper.scale"] === 1;
});
function keyListener(event: KeyboardEvent) {
  if (event.key === "+") {
    toMagnify();
  } else if (event.key === "-") {
    toMinify();
  }
}
onMounted(() => {
  document.addEventListener("keydown", keyListener);
});
onUnmounted(() => {
  document.removeEventListener("keydown", keyListener);
});
</script>
