<script setup lang="ts">
import { onMounted, onUnmounted, ref, type Ref } from "vue";
import { useRoute } from "vue-router";
import PageHeader from '@/components/PageHeader.vue';
import * as reportService from "@/services/reports.service";
import { CompLog } from "@/libs/log.lib";
import { message } from "ant-design-vue";
import { useAuthStore } from "@/stores/auth.store";

const _componentName = 'ReportEditorView'
const logError = CompLog.logErr(_componentName)

// 当前路由
const route = useRoute();
// 权限store
const authStore = useAuthStore()
const logoUrl = ref<string | undefined>(undefined)

const report: Ref<ReportSaveRequest | null> = ref(null);

onMounted(() => {
  const id = parseInt(route.params.id as string);
  if (id && id > 0) {
    reportService.get(id).then((data) => {
      report.value = data;
      // 设置Logo信息
      if (report.value.id && authStore.token) {
        logoUrl.value = reportService.link(report.value.id, authStore.token)
      }
    }).catch(logError);
  }
});

onUnmounted(() => {

})
</script>

<template>
  <PageHeader title="报告详情" />
  <a-row :gutter="24" v-if="report">
    <a-col :span="12">
      <div class="metadata-wrap">
        <p>
          <span>企业名称：</span><span>{{ report.companyName }}</span>
        </p>
        <p>
          <span>报告类型：</span><span>{{ report.name }}</span>
        </p>
        <p>
          <span>项目名称：</span><span>{{ report.reportName }}</span>
        </p>
        <p>
          <span>项目负责人：</span><span>{{ report.supervisor }}</span>
        </p>
        <p>
          <span>关键词：</span><span>{{ report.keywords }}</span>
        </p>
        <p v-for="(item, index) in report.metadata" :key="index">
          <span>{{ item.name }}：</span><span>{{ item.value }}</span>
        </p>
      </div>
    </a-col>
    <a-col :span="12">
      <a-image :width="200" :src="logoUrl" />
      <!-- <LogoComponent @change="onLogoChange" @delete="onLogoDelete" :url="logoUrl" /> -->
    </a-col>
  </a-row>
  <div class="chapter-wrap" v-if="report">
    <div v-for="(it, ix) in report.chapters" :key="ix">
      <h3>
        <span>{{ it.fullTitle }}</span
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span
          >章节关键词：{{
            !!it.keywords ? it.keywords.toString().replace(/,/g, "，") : ""
          }}</span
        >
      </h3>
      <p v-html="it.content"></p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.metadata-wrap {
  > * {
    margin-top: 0.5em;
  }
}

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

  h3 {
    font-weight: bold;
  }

  p {
    margin-left: 2.5em;
    margin-bottom: 2em;
  }
}

.bottom-button-group {
  margin-top: 5em;
}
</style>
