<template>
  <div class="redaction-confirm-dialog" v-if="show">
    <Dialog :show="show" :close="closeDialog" class="confirm-dialog">
      <template #header>
        <p>{{ dialogType === 1 ? $t('documentEditor.save') : $t('security.note') }}</p>
      </template>

      <template v-if="dialogType === 1">
        <p>{{ $t('security.saveTip[0]') }}</p><br />
        <p>{{ $t('security.saveTip[1]') }}</p>
      </template>
      <p v-else>{{ $t('security.exitTip') }}</p>

      <template #footer>
        <div class="rect-button white" @click="closeDialog">{{ $t('cancel') }}</div>
        <div class="rect-button blue" @click="confirm">{{ dialogType === 1 ? $t('security.save') : $t('security.exitConfirm') }}</div>
      </template>
    </Dialog>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useViewerStore } from '@/stores/modules/viewer'
import { useDocumentStore } from '@/stores/modules/document'
import core from '@/core'

const useViewer = useViewerStore()
const useDocument = useDocumentStore()

const dialogType = computed(() => useViewer.getRedactionConfirmDialog)
const show = computed(() => dialogType.value >= 0)

const closeDialog = () => {
  useViewer.setRedactionConfirmDialog(-1)
}

const confirm = async () => {
  const flag = dialogType.value === 1 ? 'all' : null
  useViewer.setCommonLoading(true)
  closeDialog()
  await core.applyRedactions(flag)
  useDocument.setToolState('')
  useViewer.setActiveToolMode('view')
  useViewer.setCommonLoading(false)
}
</script>

<style lang="scss">
.redaction-confirm-dialog {
  .dialog-container {
    max-width: 381px;

    header p {
      font-size: 18px;
    }

    main {
      margin-top: 16px;
      margin-bottom: 20px;

      p {
        font-size: 14px;
        line-height: 16px;
        font-weight: 400;
      }
    }

    footer .rect-button.blue {
      border-radius: 4px;
    }
  }
}
</style>
