<template>
  <div class="zoom-overlay">
    <div class="input-container">
      <input v-model="scaleValue" type="text" pattern="\d*" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" @input="onChange" @keydown.enter="changeScale" @blur="handleBlur" :style="{ width: inputWidth + 'px' }" name="zoom" />
      <div class="drop-down-zoom">
        <span>%</span>
        <!-- <svg data-status="normal" width="16" height="16" viewBox="0 0 16 16"><g fill="none" fill-rule="evenodd"><path d="M0 0h16v16H0z"></path><path fill="#757780" d="M11.06 5.909l.88.815-3.69 3.983-3.69-3.983.88-.815 2.81 3.032z"></path></g></svg> -->
        <n-popover
          ref="popover"
          placement="bottom"
          trigger="click"
          :show-arrow="false"
          to="#outerContainer"
          :raw="true"
          :z-index="4"
          :disabled="!load"
        >
          <template #trigger>
            <Arrow class="arrow-left" />
          </template>
          <div class="drop-down zoom">
            <div class="drop-item" @click="changeScale('10')">10%</div>
            <div class="drop-item" @click="changeScale('25')">25%</div>
            <div class="drop-item" @click="changeScale('50')">50%</div>
            <div class="drop-item" @click="changeScale('100')">100%</div>
            <div class="drop-item" @click="changeScale('150')">150%</div>
            <div class="drop-item" @click="changeScale('200')">200%</div>
            <div class="drop-item" @click="changeScale('300')">300%</div>
            <div class="drop-item" @click="changeScale('400')">400%</div>
            <div class="drop-item" @click="changeScale('500')">500%</div>
            <div class="drop-item" @click="changeScale('1000')">1000%</div>
          </div>
        </n-popover>
      </div>
    </div>
    <Button
      img="icon-header-zoom-out"
      @click="zoomOut"
      :title="$t('header.zoomOut')"
      :class="{ disabled: !load }"
    >
      <ZoomOut />
    </Button>
    <Button
      img="icon-header-zoom-in"
      @click="zoomIn"
      :title="$t('header.zoomIn')"
      :class="{ disabled: !load }"
    >
      <ZoomIn />
    </Button>
  </div>
</template>

<script setup>
  import core from '@/core'
  import { useViewerStore } from '@/stores/modules/viewer'
  import { computed, getCurrentInstance, ref } from 'vue';
  import { NPopover } from 'naive-ui'

  const { docNum } = defineProps(['docNum'])

  const popover = ref(null)

  const { proxy: { $forceUpdate } } = getCurrentInstance()

  const useViewer = useViewerStore()

  const scaleValue = computed(() => docNum === 2 ? useViewer.getOldScale : docNum === 3 ? useViewer.getNewScale : useViewer.getScale)
  const load = computed(() => useViewer.getUpload)

  const zoomOut = () => {
    if (scaleValue.value <= 5) return
    core.zoomOut(docNum)
  }
  const zoomIn = () => {
    if (scaleValue.value > 1000) return
    core.zoomIn(docNum)
  }
  
  const onChange = (event) => {
    const re = /^(\d){0,4}$/
    const value = event.target.value
    if (re.test(value) || value === '') {
      docNum === 2 ? useViewer.setOldCurrentScale(value / 100) : docNum === 3 ? useViewer.setNewCurrentScale(value / 100) : useViewer.setCurrentScale(value / 100)
    } else {
      docNum === 2 ? useViewer.setOldCurrentScale(useViewer.getOldScale / 100) : docNum === 3 ? useViewer.setNewCurrentScale(useViewer.getNewScale / 100) : useViewer.setCurrentScale(useViewer.getScale / 100)
      $forceUpdate()
    }
  }

  const changeScale = (event) => {
    let value = ''
    if (event.target && event.target.value) {
      value = event.target.value
    } else {
      value = event
    }
    if (!value) {
      scaleValue.value = useViewer.getScale
      return
    }
    const re = /^(\d){0,4}$/;
    if (re.test(value)) {
      let scale = Math.max(5, value)
      scale = Math.min(1000, scale)
      docNum === 2 ? useViewer.setOldCurrentScale(scale / 100) : docNum === 3 ? useViewer.setNewCurrentScale(scale / 100) : useViewer.setCurrentScale(scale / 100)
      core.scaleChanged(scale / 100, docNum)
    } else {
      docNum === 2 ? useViewer.setOldCurrentScale(useViewer.getOldScale / 100) : docNum === 3 ? useViewer.setNewCurrentScale(useViewer.getNewScale / 100) : useViewer.setCurrentScale(useViewer.getScale / 100)
      $forceUpdate()
    }

    popover.value.setShow(false)
  }

  const inputWidth = computed(() => {
    return scaleValue.value ? scaleValue.value.toString().length * 9 : 0

  })

  const handleBlur = (event) => {
    if (event.target.value) {
      changeScale(event)
    } else {
      changeScale('100')
    }
  }
</script>

<style lang="scss">
  .zoom-overlay {
    display: flex;
    align-items: center;
    margin-right: 8px;
    .button {
      margin-right: 4px!important;
    }
    .input-container {
      box-sizing: border-box;
      display: inline-flex;
      -webkit-box-align: center;
      align-items: center;
      height: 30px;
      margin-right: 4px;
      border: 1px solid var(--c-header-input-border);
      border-radius: 2px;
      padding: 5px 8px;
      transition: background-color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
      outline: none;
      font-size: 14px;
      .drop-down-zoom {
        display: flex;
        align-items: center;
        font-size: 0;
        color: var(--c-text);
        .arrow-left {
          outline: none;
        }
      }
      span {
        margin-left: 2px;
        font-size: 14px;
      }
      input {
        background-color: transparent;
        outline: none;
        border: none;
        min-width: 27px;
        padding: 0px;
        color: var(--c-text);
        text-align: right;
        -moz-appearance: textfield;
        &::-webkit-inner-spin-button {
          -webkit-appearance: none;
        }
      }
    }
  }
  .drop-down.zoom {
    width: 100px;
    .drop-item {
      padding: 0 8px;
      width: auto;
      height: 30px;
    }
  }
</style>
