<template>
  <div
    class="tw-flex tw-flex-col tw-gap-2 zoom-container tw-place-content-center"
    :class="{ 'tw-fixed': props.fixed }"
  >
    <RotateRightOutlined
      v-if="props.showRotate"
      class="icon-font-size-20 tw-cursor-pointer"
      style="color: white"
      title="向右旋转"
      @click="$emit('rotateRight')"
    />
    <ZoomInOutlined
      class="icon-font-size-20 tw-cursor-pointer"
      :style="{
        color: greaterThanOneScale ? 'red' : 'white',
      }"
      title="放大"
      @click="upScale"
    />
    <ZoomOutOutlined
      class="icon-font-size-20 tw-cursor-pointer"
      :style="{
        color: lessThanOneScale ? 'red' : 'white',
      }"
      title="缩小"
      @click="downScale"
    />
    <FullscreenOutlined
      class="icon-font-size-20 tw-cursor-pointer"
      style="color: white"
      title="适应"
      @click="normalScale"
    />
  </div>
</template>

<script setup lang="ts">
import {
  ZoomInOutlined,
  ZoomOutOutlined,
  FullscreenOutlined,
  RotateRightOutlined,
} from "@ant-design/icons-vue";
import { computed, onMounted, onUnmounted } from "vue";
import { store } from "@/store/store";

const props = defineProps<{ showRotate?: boolean; fixed?: boolean }>();
defineEmits(["rotateRight"]);

const upScale = () => {
  const s = store.setting.uiSetting["answer.paper.scale"];
  if (s < 3)
    store.setting.uiSetting["answer.paper.scale"] = +(s + 0.2).toFixed(1);
};
const downScale = () => {
  const s = store.setting.uiSetting["answer.paper.scale"];
  if (s > 0.2)
    store.setting.uiSetting["answer.paper.scale"] = +(s - 0.2).toFixed(1);
};
const normalScale = () => {
  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;
});

function keyListener(event: KeyboardEvent) {
  if (event.key === "+") {
    upScale();
  } else if (event.key === "-") {
    downScale();
  }
}
onMounted(() => {
  document.addEventListener("keydown", keyListener);
});
onUnmounted(() => {
  document.removeEventListener("keydown", keyListener);
});
</script>

<style scoped>
.zoom-container {
  z-index: 1001;
  position: sticky;
  background-color: rgba(0, 0, 0, 0.9);
  bottom: 10px;
  left: calc(100% - 30px);
  width: 40px;
  /* height: 100px; */
  padding: 10px 0;
  border-radius: 10px;
}
.zoom-container.tw-fixed {
  position: fixed;
  right: 30px;
  left: unset;
}
.icon-font-size-20 {
  font-size: 24px;
}
</style>
