<template>
  <div className="wrap">
    <Header></Header>
    <div v-if="detailData" class="detailWrap">
      <div class="inner">
        <div class="detailcont">
          <h1 v-html="detailData.file_name"></h1>
          <p><strong>关键词：</strong>{{detailData.doc_keywords}}</p>
          <p style="overflow:hidden;">
            <strong class="fl" style="display:block">正文：</strong>
            <span class="fl" style="display:block;width:96%" v-html="decodeHtmlEntity(detailData.doc_content)"></span>
          </p>
          <p><strong>时间：</strong>{{ detailData.file_updatetime }}<strong style="margin-left:40px;">文档类型：</strong>{{ detailData.file_type }}<strong style="margin-left:40px;">语种：</strong>{{ detailData.language }}<strong style="margin-left:40px;">标签：</strong>{{ detailData.doc_lable }}<strong style="margin-left:40px;">访问量：</strong>{{detailData.doc_visit}}<strong v-show="downloadShow" style="margin-left:40px;color:#016bb5;cursor: pointer; " @click="getDownload">下载文件</strong></p>
          <p></p>
        </div>
      </div>

    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from './header.vue';
import Footer from './footer.vue';
import * as searchPageApi from '@/api/manager/digsearch';

export default {
  name: "DetailPage",
  components: {
    Footer,
    Header
  },
  data() {
    return {
      detailData: null, // 用来存储从父窗口传递的数据
      downloadShow: true,
    };
  },
  created() {
    // 从 localStorage 获取数据
    const storedData = localStorage.getItem('detailData');
    if (storedData) {
      this.detailData = JSON.parse(storedData);
      // 清除已使用的数据
      // localStorage.removeItem('detailData');
      console.log(this.detailData.file_path);
      if(this.detailData.file_path == "" || this.detailData.file_path == null ){
        this.downloadShow = false ;
      }
    } else {
      this.$router.push('/'); // 数据未找到时跳转
    }
  },
  mounted() {
    this.visitOne();
  },
  methods: {
    decodeHtmlEntity(encodedStr) {
      const doc = new DOMParser().parseFromString(encodedStr, "text/html");
      return doc.body.textContent || doc.body.innerText;
    },
    getDownload(){
      const storedData = localStorage.getItem('detailData');
      this.detailData = JSON.parse(storedData);
      const searchParams = {
        filePath: this.detailData.file_path,
        sourcename: this.detailData.sourcename,
      };
      searchPageApi.getDownload(searchParams)
      .then(response=> {
        const blob = new Blob([response], { type: 'application/octet-stream' });
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        const file_name = this.detailData.file_path.split('/').pop();// 截取文件名
        // console.log(file_name);
        a.style.display = 'none';
        a.href = url;
        a.download = file_name; // 设置下载的文件名
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        a.remove();
    })
    .catch(error => {
        console.error('文件下载失败！:', error);
    });

    },
    visitOne(){
            const storedData = localStorage.getItem('detailData');
      this.detailData = JSON.parse(storedData);
      const searchParams = {
        uid: this.detailData.uid,
        docid: this.detailData.docid,
        sourcename: this.detailData.sourcename,
      };
      searchPageApi.visitOne(searchParams)
    }
  }
};



</script>
<style scoped>
@import '../../assets/css/css.css';
@import '../../assets/css/index.css';
.detailWrap{
  background: #f2f4f7;
  padding-top: 25px;
  padding-bottom: 25px;
}
.detailcont{
  background: #fff;
  padding: 25px;
}
.detailcont h1{
  color: #333;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  line-height: 32px;
  margin: 20px auto;
}

.detailcont p{
  font-size: 16px;
  color: #666 ;
  line-height: 30px;
  text-align:justify;
  margin: 15px 0;
}

</style>
