<script setup lang="ts">
import { onMounted, onUnmounted, computed, ref } from 'vue';
import { useDocDetailStore } from '@/stores/doc-detail';
import { useSideBarStore } from '@/stores/side-bar';
import { useRoute } from 'vue-router';
import PaperSection from './components/PaperSection.vue';
import { StarOutlined, StarFilled } from '@ant-design/icons-vue';
import * as collectionService from "@/services/collection.service"
import { message } from 'ant-design-vue';

// 当前路由
const route = useRoute();
// 左侧边栏状态
const sideBarStore = useSideBarStore();
// 文档详情
const docDetailStore = useDocDetailStore();

const detail = computed(() => docDetailStore.detail)
const pdfPath = computed(() => docDetailStore.pdfUrl)
const pdfPage = ref(1)
const isCollected = ref(false)
const collectId = ref(0)

function onSubSectionClick(page: number) {
  console.log('page', page)
  pdfPage.value = page
}

function onCollectionClick() {
  if (detail.value) {
    // 已经收藏的数据进行取消收藏
    if (collectId.value > 0) {
      collectionService.remove(collectId.value).then((ok) => {
        if (ok) {
          isCollected.value = false
        }
      })
    } else {
      const docDetail = detail.value;
      collectionService.add(docDetail.id, docDetail.title, docDetail.authors, docDetail.units).then((id) => {
        message.success(`收藏 ${docDetail.title} 成功`);
        collectId.value = id
        isCollected.value = true
      }).catch(() => {
        message.error('服务器暂时不可用，请稍后再试')
      })
    }
  }
}

onMounted(() => {
  // 收起左侧边栏
  sideBarStore.setCollapse(true);
  // 查询文档详情内容
  const id = parseInt(route.params.id as string);
  if (id) {
    docDetailStore.fetch(id).then(() => {
      if (detail.value) {
        // 查询是否用户已经收藏
        collectionService.isCollected(detail.value.id).then((id) => {
          collectId.value = id
          isCollected.value = id > 0
        })
      }
    });
  }
});

onUnmounted(() => {
  sideBarStore.setCollapse(false);
});
</script>

<template>
  <a-row type="flex" :gutter="24" class="detail-view">
    <a-col :span="5">
      <h2>目录</h2>
      <PaperSection :data="detail?.sections" @sub-section-click="onSubSectionClick" />
    </a-col>
    <a-col :span="19">
      <div v-if="detail?.filePath" class="doc-wrap">
        <!-- <h1 class="title">{{ detail.title }}</h1> -->
        <div class="toolbar">
          <a-button @click="onCollectionClick">
            <template #icon>
              <star-filled v-if="isCollected" />
              <star-outlined v-else />
            </template>
            <span v-if="isCollected">已收藏</span>
            <span v-else>收藏</span>
          </a-button>
        </div>
        <iframe
          v-if="pdfPath"
          :src="pdfPath + '&page=' + pdfPage + '#page=' + pdfPage"
          type="application/pdf"
          frameborder="0"
          width="100%"
          height="100%"
          class="pdf-viewer"
        />
      </div>
      <div v-else>
        <a-empty />
      </div>
    </a-col>
  </a-row>
</template>

<style scoped lang="scss">
@import "@/assets/base.scss";

.detail-view {
  margin-top: 24px;
  min-height: 100vh;

  .doc-wrap {
    height: 100%;

    .toolbar {
      text-align: right;
      padding: 10px 0;
    }

    .pdf-viewer {
      border: 1px solid $border-color-secondary;
    }
  }
}
</style>