<!-- 原项目丢了 省事直接cv一下老项目代码 -->
<template>
  <div class="wrapper" ref="wrapper" id="pdf-container">
    <div id="reportdtl" v-if="isshow" :style="{backgroundColor:reportInfo.CanvasColor}">
      <div>
        <div class="html-head-img-box" v-if="reportInfo && !!reportInfo.NeedSplice && reportInfo.HeadImg">
          <img :src="reportInfo.HeadImg" alt="" style="display:block;width:100%">
          <div class="head-layout-item" v-for="item in headImgStyle" :key="item.value"
          :style="{fontFamily:item.family,fontSize:(item.size*2)+'px',fontWeight:item.weight,textAlign:item.align,color:item.color,
              width:item.width,height:item.height,left:item.left,top:item.top
          }">
              {{ layoutBaseInfo[item.value] }}
          </div>
        </div>
        <div class="no-layout-img-box" v-if="reportInfo && !!reportInfo.NeedSplice && (!reportInfo.HeadImg) && (!reportInfo.EndImg)">
          <header>
            <span>{{reportInfo.Title}}</span>

            <img class="logo" :src="configInfo.ReportLogo" alt="" v-if="configInfo.ReportLogo"/>
          </header>
          <div style=" box-sizing:border-box; color:#666; font-size:24px; overflow:hidden;">
            <span>{{ reportInfo.Author}}</span>
            <span style="float:right;" v-if="[2,6].includes(reportInfo.State)">{{reportInfo.PublishTime}}</span>
          </div>
        </div>
        
        <div class="abstract" v-if="reportInfo && !!reportInfo.NeedSplice && reportInfo.Abstract"> 
          <div v-if="reportInfo.Abstract">摘要：{{ reportInfo.Abstract }}</div>
        </div>

        <!-- 章节报告 -->
        <div class="chapter-wrap" v-if="reportInfo.HasChapter===1">
          <div class="chapter-item" v-for="item in reportInfo.ChapterList" :key="item.ReportChapterId">
            <div style="margin-bottom:10px">
              <span class="type" v-if="item.TypeName">{{item.TypeName}}</span>
              <span class="title">{{item.Title}}</span>
            </div>
            <div id="resetcss" style="overflow:hidden;" v-html="item.Content"></div>
          </div>
        </div>
        <div id="resetcss" style="overflow:hidden;" v-html="reportInfo.Content" v-else></div>

        <div class="disclaimer" v-if="configInfo.Disclaimer">
          <h3>免责声明:</h3>
          <div v-html="configInfo.Disclaimer"></div>
        </div>

        <div class="html-end-img-box" v-if="reportInfo && !!reportInfo.NeedSplice && reportInfo.EndImg">
          <img :src="reportInfo.EndImg" alt="" style="display:block;width:100%">
          <div class="head-layout-item" v-for="item in endImgStyle" :key="item.value"
          :style="{fontFamily:item.family,fontSize:(item.size*2)+'px',fontWeight:item.weight,textAlign:item.align,color:item.color,
              width:item.width,height:item.height,left:item.left,top:item.top
          }">
              {{ layoutBaseInfo[item.value] }}
          </div>
        </div> 
      </div>
    </div>
  </div>
</template>

<script>
import { smartReportDetail,reportDetail } from "@/api/api.js";

export default {
  data() {
    return {
      id: this.$route.query.code || "",
      isshow: false,
      /**
       * NeedSplice 0-不需要 1-需要
      */
      reportInfo: {},
      headImgStyle:null,//版头style
      endImgStyle:null,//版尾style
      layoutBaseInfo:{
          研报标题:'',
          研报作者:'',
          创建时间:''
      },

      configInfo: {}
    };
  },
  mounted() {
    this.getreportdetail();
    window.addEventListener('resize',this.pageResize)
  },

  destroyed() {
    window.removeEventListener('resize',this.pageResize)
  },
  methods: {
    pageResize(){
      const el=document.getElementById('reportdtl')
      const windowWid=document.body.clientWidth
      if(windowWid<1200){
        el.style.transform=`scale(${windowWid/1200})`
        // el.style.
      }
    },
    async getreportdetail() {
      const { Data, Ret } = await reportDetail({ ReportCode: this.id });
      if (Ret !== 200) return;
      
      this.reportInfo = Data.Report;
      this.configInfo = {
        ...Data,
        Report:null
      };

      this.headImgStyle=this.reportInfo.HeadStyle?JSON.parse(this.reportInfo.HeadStyle):[]
      this.endImgStyle=this.reportInfo.EndStyle?JSON.parse(this.reportInfo.EndStyle):[]
      this.layoutBaseInfo['研报标题']=this.reportInfo.Title
      this.layoutBaseInfo['研报作者']=this.reportInfo.Author
      // 已发布已通过的报告才显示发布时间
      this.layoutBaseInfo['创建时间']=(this.reportInfo.PublishTime||this.reportInfo.PrePublishTime)
      this.reportInfo.Content=this.setReportContent(this.reportInfo.Content)
      this.isshow = true;
      this.$nextTick(()=>{
        this.pageResize()
      })
    },
    setReportContent(str){
      let ps = str.split('</iframe>')
      let returnStr=''
      for (let i = 0; i < ps.length; i++) {
        const itp = ps[i];
        if(itp.indexOf('chartshow')!=-1){
          returnStr+=itp.replace('<iframe','<eta-chart class="no-wrap"')+'</eta-chart>'
        }else if(itp.indexOf('sheetshow')!=-1){
          returnStr+=itp.replace('<iframe','<eta-table class="no-wrap"')+'</eta-table>'
        }else{
          returnStr+=itp
        }
      }
      return returnStr
    },
  },
};
</script>

<style lang="scss">
body{
  line-height: normal;
}
.wrapper {
  position: relative;
  height: 100%;
  #noaccess {
    width: 100%;
    height: 12rem;
    padding: 5rem 0.6rem 1rem;
    box-sizing: border-box;
    text-align: center;
    position: absolute;
    bottom: 0;
    background: url(~@/assets/img/accessbg.png) no-repeat;
    background-size: 100% auto;
    overflow: hidden;
    > a,
    button {
      width: 12rem;
      height: 2rem;
      background: url(~@/assets/img/newbtn600.png) no-repeat;
      background-size: 100% 100%;
      font-size: 0.48rem;
      color: #fff;
      border: none;
      margin-top: 1.5rem;
    }
  }
}
#reportdtl {
  font-size: 14px;
  background: #fff;
  overflow: auto;
  width: 1200px;
  padding: 20px;
  margin: 0 auto;

  .top-header {
    background-image: url("@/assets/img/smart_report_bg01.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 16px;
    color: #fff;
    .title {
      font-size: 16px;
      margin-bottom: 10px;
    }
    .flex {
      font-size: 12px;
      display: flex;
      justify-content: space-between;
    }
  }
  .html-head-img-box,.html-end-img-box{
    position: relative;
    overflow: hidden;
    .head-layout-item{
        position: absolute;
        overflow: hidden;
        box-sizing: border-box
    }
  }
  .no-layout-img-box{
    header{
        padding:10px 0; box-sizing:border-box; font-size:28px; font-weight:500; color:#333; background:#fff;
        display: flex;
        justify-content: space-between;
        .logo {
          flex-shrink: 0;
          height: fit-content;
        }
    }
  }
  .abstract{
    box-sizing:border-box; font-size:22px; line-height:36px;
    border-left: 0.2rem solid #007aff;
    margin:0.6rem 0;
    div{
        padding: 10px 20px;
        box-sizing: border-box;
         color: #333;
        border-radius: 10px;
    }
  }
  #resetcss {
    pre {
      white-space: pre-wrap;
    }
    .report-drag-item-wrap{
                padding: 6px;
                margin-bottom: 3px;
            }
  }

  .chapter-wrap{
    .chapter-item{
			margin-bottom: 20px;
			padding-bottom: 20px;
			border-bottom: 1px dashed #ccc;
      &:last-child {
        border-bottom: none;
      }
			.type{
				font-size: 15px;
				color: #fff;
				padding: 5px 10px;
				background-color: #E6A23C;
				border-radius: 4px;
			}
			.title{
				font-size: 15px;
				margin-left: 10px;
				font-weight: bold;
			}
		}
  }
  .disclaimer{
      font-size: 0.58rem;
      padding: 30px 0;
      border-top: 1px solid #ccc;
      h3 {
        margin-bottom: 20px;
      }
  }
}
@media screen and (max-width:1200px){
  #reportdtl{
    position: absolute;
    transform-origin: 0 0;
  }
}

// 不禁止页面打印,不然转pdf会出现空白页
@media print{
    body{
      display: unset;
    }
    [comp-type="chart"],[comp-type="img"]{
      page-break-inside: avoid; // 防止图表盒子、图片盒子被分割到两页
    }
}

</style>
