<template>
  <div class="move-page-popup" v-if="show">
    <Dialog :show="show" :dialogName="dialogName" :close="true">
      <template #header>
        <p>{{ $t('documentEditor.moveTo') }}</p>
      </template>

      <input v-model.number="targetIndex"
        type="number"
        pattern="\d*"
        onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
        @input="validateInput"
        :placeholder="$t('documentEditor.inputPageTip')"
        @compositionstart="startComposition" @compositionend="endComposition"
        name="document-editor"
      >

      <template #footer>
        <div class="rect-button blue" :class="{ 'disabled': invalidMove }" @click="handleMove">{{ $t('ok') }}</div>
      </template>
    </Dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useViewerStore } from '@/stores/modules/viewer'

const props = defineProps(['totalPages', 'selectedPageList'])
const emits = defineEmits(['movePage'])

const useViewer = useViewerStore()

const dialogName = 'movePageSettingDialog'
const show = computed(() => useViewer.isElementOpen(dialogName))

const targetIndex = ref('')
let composing = false

const invalidMove = computed(() => {
  if (typeof targetIndex.value !== 'number') return true
  const selected = props.selectedPageList
  if (selected.length === 1 && (selected[0] === targetIndex.value || selected[0] === targetIndex.value - 1)) return true
  if (selected.length > 1 && isConsecutive(selected) && (selected.includes(targetIndex.value) || selected.includes(targetIndex.value - 1))) return true
  return false
})

// 是否是连续的数字
const isConsecutive = (arr) => {
  arr.sort(function(a, b) {
    return a - b
  })

  for (var i = 0; i < arr.length - 1; i++) {
    if (arr[i] + 1 !== arr[i + 1]) {
      return false
    }
  }

  return true
}

const closeDialog = () => {
  useViewer.closeElement(dialogName)
  targetIndex.value = ''
}

const handleMove = async () => {
  emits('movePage', targetIndex.value)
  closeDialog()
}

const validateInput = (e) => {
  if (composing) return

  const value = e.target.valueAsNumber

  if (isNaN(value)) {
    e.target.value = ''
  }
  
  if (value > props.totalPages) { 
    targetIndex.value = props.totalPages
  }
  if (value === 0) {
    e.target.value = value.toFixed(0)
  }
}

const startComposition = () => {
  composing = true
}
const endComposition = () => {
  composing = false
}
</script>

<style lang="scss">
.move-page-popup {

  .dialog-container {
    width: 289px;

    .close {
      float: right;
      margin-top: 3px;
    }

    main {
      margin-top: 20px;
    }

    footer {
      .rect-button {
        width: 100%;
      }
    }
  }

  input[type="number"] {
    padding: 0 20px 0 8px;
    width: 100%;
    height: 24px;
    background: var(--c-right-side-content-fillbox-bg);
    border: 1px solid var(--c-right-side-content-fillbox-border);
    border-radius: 1px;
    font-size: 14px;
    line-height: 16px;
    color: var(--c-text);
    -moz-appearance: textfield;

    &:focus {
      border-color: #0078D7;
    }

    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
      appearance: none;
    }

    &::placeholder {
      font-size: 12px;
      color: #999;
    }
  }
}
</style>