<template>
  <Button :class="{ active: pageViewActive }" @click="changePageViewStatus" :title="$t('header.viewSetting')">
    <Pageset />
  </Button>
</template>

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

const useViewer = useViewerStore()
const pageViewActive = computed(() => useViewer.isElementOpen('pageModePanel'))

const changePageViewStatus = () => {
  if (pageViewActive.value) {
    useViewer.closeElement('pageModePanel')
  } else {
    useViewer.openElement('pageModePanel')
  }
}
</script>
