<!--报告预览视图-->
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRoute } from "vue-router";
import * as reportService from "@/services/report.service"
import type { ReportSaveRequest } from '@/types/report.types';
import { CompLog } from '@/libs/log.lib';
import { useReportExport } from '@/libs/reportExport.lib';
import { routeToReportEditor } from '@/router';
import * as logoService from "@/services/logo.service"
import { useAuthStore } from '@/stores/auth.store';

const logError = CompLog.logErr("ReportPreviewView")
// 当前路由对象
const route = useRoute()
// 报告数据
const data = ref<ReportSaveRequest | null>(null)
// 报告导出函数库
const reportExport = useReportExport()
// 下载状态
const downloading = ref(false)
// auth store
const authStore = useAuthStore()

function onExport() {
  if (data.value) {
    reportExport.download(data.value.name, data.value.id)
    downloading.value = true
    setTimeout(() => downloading.value = false, 5000)
  }
}

function onBackToEditor() {
  if (data.value) {
    routeToReportEditor(data.value.id)
  }
}

onMounted(() => {
  const id = parseInt(route.params.id as string);
  if (id && id > 0) {
    reportService.get(id).then((resp) => {
      data.value = resp;
    }).catch(logError)
  }
})
</script>

<template>
  <div class="main" v-if="data">
    <div class="report-preview-wrap">
      <div class="cover">
        <div class="logo" v-if="authStore.token">
          <img :src="logoService.link(data.id, authStore.token)" v-if="data.logoPath" />
        </div>
        <h1 class="company-name">{{ data.companyName }}</h1>
        <h1 class="report-title">{{ data.name }}</h1>
        <div class="metadata-wrap">
          <a-row class="metadata-item" type="flex" v-if="data.reportName">
            <a-col class="metadata-name">项目名称： </a-col>
            <a-col class="metadata-value" flex="1">{{ data.reportName }}</a-col>
          </a-row>
          <a-row class="metadata-item" type="flex" v-if="data.supervisor">
            <a-col class="metadata-name">项目负责人： </a-col>
            <a-col class="metadata-value" flex="1">{{ data.supervisor }}</a-col>
          </a-row>
          <a-row v-for="(item, index) in data.metadata" :key="index" class="metadata-item" type="flex">
            <a-col class="metadata-name">{{ item.name }}： </a-col>
            <a-col class="metadata-value" flex="1">{{ item.value }}</a-col>
          </a-row>
        </div>
      </div>
      <a-divider />
      <div v-for="(chapter, index) in data.chapters" :key="index" class="chapter-wrap">
        <h2>{{ chapter.fullTitle }}</h2>
        <p class="chapter-content" v-html="chapter.content"></p>
      </div>
    </div>
  </div>
  <div class="btn-group">
    <a-space>
      <a-button @click="onBackToEditor">返回编辑</a-button>
      <a-button type="primary" @click="onExport" :loading="downloading">导出报告</a-button>
    </a-space>
  </div>
</template>

<style scoped lang="scss">
.main {
  background: #F0F2F5;
  padding: 10px 0;

  .report-preview-wrap {
    width: 800px;
    padding: 40px 80px;
    margin: 0 auto;
    background-color: #fff;

    .cover {
      padding-top: 10em;

      h1, h3 {
        text-align: center;
      }
      h1 {
        font-size: 2em;
      }

      .logo {
        text-align: center;

        img {
          height: 75px;
        }
      }

      .company-name {
        margin-top: 2em;
      }

      .metadata-wrap {
        padding: 40px 0;
        min-height: 300px;
        align-items: center;

        .metadata-item {
          width: 80%;
          margin: 0 auto;

          .metadata-name {
            width: 120px;
            text-align: right;
            margin-right: 10px;
          }
          .metadata-value {
            text-align: center;
            border-bottom: solid 1px #000;
          }
        }
      }
    }

    .chapter-wrap {
      margin-top: 3em;

      .chapter-content {
        text-indent: 2em;
        line-height: 1.5em;
      }
    }
  }
}

.btn-group {
  margin-top: 2em;
  text-align: center;
}
</style>
