<template>
  <div class="page-container">
    <div class="sec-filing-detail-container">
      <!-- 标题 -->
      <div class="page-title">SEC Filing Details</div>

      <!-- Document Details 部分 -->
      <div class="section">
        <h2 class="section-title">Document Details</h2>
        <div class="details-grid">
          <div class="detail-item">
            <span class="detail-label">Form:</span>
            <a :href="filingData.fileLink" class="detail-value link">{{
              filingData.form
            }}</a>
          </div>
          <div class="detail-item">
            <span class="detail-label">Filing Date:</span>
            <span class="detail-value">{{ filingData.filingDate }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">Form Description:</span>
            <span class="detail-value">{{ filingData.formDescription }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">Company:</span>
            <span class="detail-value">{{ filingData.company }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">Issuer:</span>
            <span class="detail-value">{{ filingData.issuer }}</span>
          </div>
        </div>
      </div>

      <!-- Filing Formats 部分 -->
      <div class="section">
        <h2 class="section-title">Filing Formats</h2>
        <div class="formats-list">
          <div class="format-item" v-if="filingData.pdfFile">
            <img :src="pdfFile" alt="link" class="format-icon" />
            <a
              href="javascript:void(0)"
              class="format-link"
              target="_blank"
              @click="handleViewDocument(filingData.pdfFile, 'pdf')"
              >View HTML</a
            >
          </div>
          <div class="format-item" v-if="filingData.wordFile">
            <img :src="wordFile" alt="link" class="format-icon" />
            <a
              href="javascript:void(0)"
              class="format-link"
              target="_blank"
              @click="handleViewDocument(filingData.wordFile, 'word')"
              >View HTML</a
            >
          </div>
          <div class="format-item" v-if="filingData.excelFile">
            <img :src="excelFile" alt="link" class="format-icon" />
            <a
              href="javascript:void(0)"
              class="format-link"
              target="_blank"
              @click="handleViewDocument(filingData.excelFile, 'excel')"
              >View HTML</a
            >
          </div>
          <div class="format-item" v-if="filingData.fileLink">
            <img :src="fileLink" alt="link" class="format-icon" />
            <a :href="filingData.fileLink" class="format-link" target="_blank"
              >View HTML</a
            >
          </div>
        </div>
      </div>

      <!-- XBRL 部分 -->
      <div
        v-if="
          Array.isArray(filingData.dataFiles) && filingData.dataFiles.length > 0
        "
        class="section"
      >
        <h2 class="section-title">XBRL</h2>
        <div class="formats-list">
          <div
            class="format-item"
            v-for="(item, idx) in filingData.dataFiles"
            :key="idx"
          >
            <img :src="fileLink" alt="link" class="format-icon" />
            <a :href="item.fileUrl" class="format-link" target="_blank">{{
              item.description
            }}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

import pdfFile from "@/assets/image/icon/icon-pdf.png";
import wordFile from "@/assets/image/icon/icon-word.png";
import excelFile from "@/assets/image/icon/icon-excel.png";
import fileLink from "@/assets/image/icon/icon-link.png";

import { useRoute } from "vue-router";

// 这里可以根据路由参数或props获取具体的文件详情
const filingData = ref({
  form: "",
  filingDate: "",
  formDescription: "",
  company: "",
  issuer: "",
  fileLink: "#",
});

const route = useRoute();

onMounted(() => {
  const { filingKey } = route.query;
  getPageData(filingKey);
});
import axios from "axios";
const getPageData = async (filingKey) => {
  let url = "https://erpapi.fiee.com/api/fiee/sec-filing/web/detail";
  let params = {
    filingKey,
  };
  const res = await axios.post(url, params);
  if (res.data.status === 0) {
    let file = res.data.data.data;
    console.log(file);
    if (file) {
      filingData.value = {
        form: file.form,
        filingDate: file.filingDate,
        formDescription: file.formDescription,
        fileLink: file.fileLink || "",
        pdfFile: file.pdfFile || "",
        wordFile: file.wordFile || "",
        excelFile: file.excelFile || "",
        dataFiles: file.dataFiles || [],
        company: "FiEE, Inc. ",
        issuer: "FiEE, Inc. ",
      };
    }
  }
};
// 查看文档
const handleViewDocument = (val, type) => {
  window.open(
    `${import.meta.env.VITE_PAGE_URL}/office?url=${val}&attachmentName=${type}`,
    "_blank"
  );
};
</script>

<style scoped lang="scss">
.page-container {
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  padding: 20px;
}

.sec-filing-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px;
}

.page-title {
  font-size: 32px;
  font-weight: bold;
  color: #333;
  margin-bottom: 40px;
}

.section {
  margin-bottom: 40px;
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.details-grid {
  display: grid;
  gap: 15px;
}

.detail-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.detail-label {
  font-weight: bold;
  color: #333;
  min-width: 150px;
  flex-shrink: 0;
}

.detail-value {
  color: #333;
  line-height: 1.5;
}

.link {
  color: #0078d7;
  text-decoration: underline;
  cursor: pointer;
  &:hover {
    text-decoration: none;
  }
}
.formats-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.format-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.format-icon {
  width: 24px;
  height: 24px;
}

.format-link {
  color: #0078d7;
  text-decoration: underline;
  font-size: 14px;

  &:hover {
    text-decoration: none;
  }
}
</style>
