<script lang="ts" setup>
import useAppStore from '@/store/modules/app';
import useI18n from '@/hooks/useI18n';
import { onMounted, ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { VuePDF, usePDF } from '@tato30/vue-pdf';
import '@tato30/vue-pdf/style.css';
import saveAs from 'file-saver';
import { parseUrlPath } from '@/plugins/file-static-url';
const { t, currentLocale } = useI18n();
const appStore = useAppStore();
const route = useRoute();

// 文档地址
const docUrl = computed(() => {
  let url = parseUrlPath(appStore.helpDoc);
  if (url.indexOf('{language}') === -1) {
    return url;
  }
  // 语言参数替换
  const local = (route.query.language as string) ?? currentLocale.value;
  const lang = local.split('_')[0];
  return url.replace('{language}', lang);
});
const { pdf, pages } = usePDF(docUrl.value);

/**
 * 国际化翻译转换
 */
function fnLocale() {
  let title = route.meta.title as string;
  if (title.indexOf('router.') !== -1) {
    title = t(title);
  }
  appStore.setTitle(title);
}

// annotation层
function fnAnnotation(obj: any) {
  const page = obj.data?.referencedPage;
  if (page && typeof page === 'number') {
    viewPage.value = page;
  }
}

/**视图页数 */
const viewPage = ref<number>(1);
function fnToPage(value: number) {
  if (viewPage.value === value) return;
  viewPage.value = value;
}

/**视图缩放 */
const viewScale = ref<number>(1);
function fnScaleView(value: number) {
  viewScale.value += value;
  if (viewScale.value <= 0.25) {
    viewScale.value = 0.25;
    return;
  }
  if (viewScale.value > 2) {
    viewScale.value = 2;
    return;
  }
}

/**文件下载 */
function fnDownload() {
  const url = docUrl.value;
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      const fileName = url.substring(url.lastIndexOf('/') + 1);
      saveAs(blob, fileName);
    })
    .catch(error => {
      console.error('Error:', error);
    });
}

/**系统使用手册跳转 */
function fnClickHelpDoc() {
  // 浏览器支持 PDF 预览
  if (navigator.pdfViewerEnabled) {
    window.open(docUrl.value, '_blank');
  } else {
    // 浏览器不支持 PDF 预览
    alert(t('views.tool.help.pdfViewerErr'));
  }
}

onMounted(() => {
  fnLocale();
});
</script>

<template>
  <a-row>
    <a-col :span="24" class="header">
      <a-space :size="12" align="center">
        <div class="header-scale">
          <a-button type="default" shape="circle" @click="fnScaleView(-0.25)">
            <template #icon><ZoomOutOutlined /></template>
          </a-button>
          <span>{{ viewScale * 100 }}%</span>
          <a-button type="default" shape="circle" @click="fnScaleView(0.25)">
            <template #icon><ZoomInOutlined /></template>
          </a-button>
        </div>
      </a-space>
      <a-space :size="12" align="center">
        <a-button type="default" @click="fnClickHelpDoc()">
          <template #icon><ToTopOutlined /> </template>
          {{ t('views.tool.help.pdfViewer') }}
        </a-button>
        <a-button type="primary" @click="fnDownload()">
          <template #icon><DownloadOutlined /></template>
          {{ t('views.tool.help.download') }}
        </a-button>
      </a-space>
    </a-col>
    <a-col :span="4" class="left">
      <template v-for="page in pages" :key="page">
        <div
          class="left-view"
          :class="{ 'left-view_action': page === viewPage }"
          @click="fnToPage(page)"
        >
          <VuePDF :pdf="pdf" :page="page" :scale="0.2" text-layer />
          <div>{{ page }}</div>
        </div>
      </template>
    </a-col>
    <a-col :span="20" class="right">
      <div class="right-view">
        <a-spin size="large" style="margin: 50%" v-if="pages === 0" />
        <VuePDF
          v-else
          :pdf="pdf"
          :page="viewPage"
          :scale="viewScale"
          annotation-layer
          :annotations-filter="['Link']"
          @annotation="fnAnnotation"
        >
          <a-spin size="large" style="margin: 50%" />
        </VuePDF>
      </div>
    </a-col>
  </a-row>

  <!-- <a-spin style="margin: 0 50%" v-if="docUrl === '#'" /> -->
  <!-- <div :style="'height:' + height" v-else>
    <iframe
      :src="docUrl"
      frameborder="no"
      style="width: 100%; height: 100%"
      scrolling="auto"
    ></iframe>
  </div> -->
</template>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  padding: 12px 24px;
  background-color: #323639;
  color: white;
  &-scale {
    background: rgba(0, 0, 0, 0.24);
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 140px;
    align-items: center;
    & > span {
      font-weight: 600;
    }
  }
}

.left {
  overflow-y: auto;
  height: calc(100vh - 56px);
  padding: 20px 0;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  background-color: #323639;

  &-view {
    text-align: center;
    width: 160px;
    padding: 10px 20px;
    border: 4px transparent solid;
    border-radius: 4px;
    margin-bottom: 10px;
    color: white;
    transform: border;
  }

  &-view_action {
    border: 4px #8ab4f8 solid;
  }
}

.right {
  overflow-y: auto;
  height: calc(100vh - 56px);
  background-color: #525659;

  &-view {
    display: flex;
    justify-content: center;
    margin: 0 auto;
  }
}
</style>
