<!-- 省事直接cv一下老项目代码 -->
<template>
  <div class="wrapper" ref="wrapper">
    <div id="reportdtl" v-if="isshow">
      <header>
        <p>
          <span style="margin-left: -0.45rem"
            >【No.{{ reportInfo.Stage }}|FICC】{{
              reportInfo.Title
            }}</span
          >
          <span v-if="reportInfo.CreateTime"
            >({{ reportInfo.CreateTime.substring(5, 7)
            }}{{ reportInfo.CreateTime.substring(8, 10) }})</span
          >
        </p>
      </header>
      <div
        style="
          padding: 0rem 0.8rem 0.4rem;
          box-sizing: border-box;
          color: #666;
          font-size: 0.66rem;
          overflow: hidden;
        "
      >
        <span>{{ reportInfo.Author }}</span>
        <span style="float: right">{{ reportInfo.PublishTime }}</span>
      </div>

      <div id="abstract">
        <div class="abstract_cont">
          <div>Abstract：{{ reportInfo.Abstract }}</div>
          <div style="color: #666; margintop: 1.2rem">
            *Note: Please be sure to read the <strong
              style="fontweight: normal; cursor: pointer; color: #3e8ce6"
              @click="showTips"
              >disclaimer</strong
            >
          </div>
        </div>
      </div>
      <div style="padding: 0.6rem; box-sizing: border-box; overflow: hidden">
        <!-- <div id="resetcss" style="overflow:hidden;" v-html="reportInfo.Content"></div> -->
        <div id="overview" style="margin-bottom:1.25rem;font: 0.7rem/1.5 'segoe';" v-if="reportInfo.Overview">
          <p><strong>Overview:</strong></p>
          <!-- <p id="overview-content">{{reportInfo.Overview||''}}</p> -->
          <div class="overview" style="overflow:hidden;margin-top:0.83rem;line-height:1.3rem;" v-html="reportInfo.Overview"></div>
        </div>
        <div id="resetcss" style="overflow:hidden;">
        <ul>
          <li v-for="(html,index) in realContent" :key="index" v-html="html"></li>
        </ul>
      </div>
      <div id="tipsAlert">
        <div
          style="
            width: 100%;
            padding: 0.8rem 0.66rem 2.2rem;
            box-sizing: border-box;
            font: 0.52rem/0.8rem 'segoe';
            color: #666;
            background: #fff;
            overflow: scroll;
            position: relative;
            border-radius: 0.2rem;
          "
        >
          <!-- <h1 style="font:0.64rem '微软雅黑'; color:#333; text-align:center; margin-bottom:0.34rem;">免责声明</h1> -->
          <h1
            style="
              font: 0.64rem 'segoe';
              color: #333;
              text-align: center;
              margin-bottom: 0.34rem;
            "
          >
            Disclaimers 
          </h1>
          <div style="max-height:50vh;overflow:auto">
            <p style="margin-bottom:10px">1、This report is to be used solely by the clients of Horizon Insights,and will not be regarded as a client by the Recipient/Receiving institution because of the receipt of this report.</p>
            <p style="margin-bottom:10px">2、This report is based on international and industry standards, and the information is obtained from legal sources to ensure that it is as reliable, accurate and complete as possible, but does not guarantee the accuracy and completeness of the information described in the report, nor does it guarantee that the information or recommendations contained in this report will not change in any way after the issuance of this report. The information provided in this report is for informational purposes only.</p>
            <p style="margin-bottom:10px">3、The contents of the report do not make any guarantee for the final operation recommendations made by investors, nor do they have any form of written or oral commitment to share investment returns or investment losses. It is not intended as the client's final operational advice in terms of investment, legal, accounting or taxation, nor as a moral, responsible and legal basis or evidence, whether or not it has been expressed or implied.</p>
            <p style="margin-bottom:10px">4、In no event shall the Company be liable for any loss or damage incurred by the Client/Recipient/ Receiving institution as a result of the use of the contents of the Report, and the Client/Recipient/ Receiving institution shall bear the entire risk.</p>
          </div>
          <p
            @click="hideTips"
            style="
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              font-size: 0.56rem;
              line-height: 1.6rem;
              color: #2680eb;
              text-align: center;
              border-top: 1px solid #eaeaea;
            "
          >
            知道了
          </p>
        </div>
      </div>
      <div style="width:30px; position:fixed; right:0.6rem; bottom:2.4rem; z-index:100;">
        <img src="~@/assets/img/returntop.png" @click="goTop" style="width:30px; margin-bottom:0.2rem;" />
      </div>
    </div>
    </div>

  </div>
</template>

<script>
import {
  reportEnDetail,
} from "@/api/api.js";
import _ from 'lodash';
import wxShare from '../utils/wxShare.js'
import { Watermark,BlindWatermark } from 'watermark-js-plus'
import { Base64 } from 'js-base64';
export default {
  data() {
    return {
      id: this.$route.query.code || '',
      isshow: false,
      reportInfo: {},
      reportlist: [],

      totalContent: [],
      realContent: [],
      page_no: 0,
      pageSize: 20, //默认初始加载50个p标签
      total_page: 0,
    };
  },
  mounted() {
    this.getreportdetail();
    window.addEventListener('scroll', this.loadMoreHandle);
  },
  destroyed() {
    window.removeEventListener('scroll', this.loadMoreHandle);
  },

  updated() {
    $("#resetcss")
      .find("img")
      .css({ display: "block", margin: "0 auto", maxWidth: "100%" });
    $("#resetcss")
      .find("video")
      .css({ display: "block", margin: "0 auto", maxWidth: "100%" });
    $("#resetcss")
      .find("p")
      .css({
        margin: "0 auto 0",
        font: "0.7rem/1.5 'segoe'",
        color: "#333",
        letterSpacing: "0",
        lineHeight: "1.3rem",
      });
    $("#resetcss")
      .find("span")
      .css({
        font: "0.7rem/1.5 'segoe'",
        letterSpacing: "0",
        lineHeight: "1.3rem",
      });
    $("#resetcss")
      .find("span.fr-emoticon")
      .css({
        width: "20px",
        height: "20px",
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover",
        display: "inline-block",
        verticalAlign: "middle",
      });
    $("#resetcss").find("ol").css({ listStyleType: "disc" });
    $("#resetcss")
      .find("pre")
      .css({ display: "block", whiteSpace: "pre-wrap" });
    $("#overview")
      .find("p")
      .css({
        margin: "0 auto 0",
        font: "0.7rem/1.5 'segoe'",
        color: "#333",
        letterSpacing: "0",
        lineHeight: "1.3rem",
      });
  },
  methods: {
    showTips() {
      //免责声明显示
      $("#tipsAlert").animate({ top: 0 });
    },
    hideTips() {
      //免责声明收起
      $("#tipsAlert").animate({ top: "-120rem" });
    },
    goTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },

    async getreportdetail() {
      const { Data,Ret  } = await reportEnDetail({ ReportCode: this.id,ShareEmail:Number(this.$route.query.ShareEmail)||0 });
        document.title=(Data && Data.H5ShareEnName) || "Report"
        if (Ret !== 200) return
        // console.log('data',Data)
        let H5ShareEnName = Data.H5ShareEnName
        let H5ReportShareImg = Data.H5ReportShareImg
        let wxShareTitle=!!Data.Hz?
        '【No.'+Data.Report.Stage+'|FICC'+'】'+Data.Report.Title+'('+Data.Report.CreateTime.substring(5,7)+Data.Report.CreateTime.substring(8,10)+')':
                          Data.Report.Title+'('+Data.Report.CreateTime.substring(5,7)+Data.Report.CreateTime.substring(8,10)+')'

        this.reportInfo = Data.Report;
        this.isshow = true;

        this.splitContentHandle(this.reportInfo.Content);

        $(document).on("click", "#resetcss img", function (event) {
          let imgArray = [];
          let curImageSrc = $(this).attr("src");
          let oParent = $(this).parent();
          if (curImageSrc && !oParent.attr("href")) {
            $("#resetcss img").each(function (index, el) {
              let itemSrc = $(this).attr("src");
              imgArray.push(itemSrc);
            });
            wx.previewImage({ current: curImageSrc, urls: imgArray });
          }
        });
        wxShare(document.location.href,H5ShareEnName || document.title,wxShareTitle,H5ReportShareImg,0);
    
        localStorage.setItem('waterMarkStr',this.$route.query.flag||'')
        const temwaterMarkStr=this.$route.query.flag||localStorage.getItem('waterMarkStr')
        const waterMarkStr=Base64.decode(temwaterMarkStr)
        this.$nextTick(()=>{
          if(Data.WatermarkReport==='true'){
            this.setWaterMark(waterMarkStr)
          }
          this.setBlindWaterMark(waterMarkStr)
        })

    },

    setWaterMark(str){
      const text=str||''
      const target=document.getElementById('resetcss')
      const canvas = document.createElement("canvas");

      const ctx = canvas.getContext("2d");
      ctx.font = "18px Arial";
      ctx.rotate((-45 * Math.PI) / 200);
      ctx.fillStyle='#f1f1f1'
      ctx.fillText(text, 30, 200);
      ctx.fillText(text, -40, 100);

      // 将canvas的内容转换为base64编码
      const data = canvas.toDataURL("image/png");
      target.style.background = "url(" + data + ") repeat";
    },

    // 设置水印
    setBlindWaterMark(str){
      
      const blindwatermark = new BlindWatermark({
        content: str||'',
        width: 200,
        height: 200,
        onSuccess: () => {
          // success callback
        }
      })
      blindwatermark.create()
    },

    /*内容分割*/
    splitContentHandle(content) {
      const arr = content.split("</p>");
      this.totalContent = arr.map((_) => _ + "</p>");
      this.realContent = this.totalContent.slice(0, this.pageSize);
      this.total_page = parseInt(this.totalContent.length / this.pageSize) + 1;
      // console.log(this.realContent, this.totalContent);
    },

    /* 加载下一页内容 */
    loadContent() {
      this.realContent = this.realContent.concat(
        this.totalContent.slice(
          this.page_no * this.pageSize,
          (this.page_no + 1) * this.pageSize
        )
      );
    },
    loadMoreHandle: _.throttle(function() {

      if(this.page_no >= this.total_page) return

      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动的高度
      const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; // 可视高度
      const scrollHeight = document.body.scrollHeight; // 总高度

      if((scrollHeight - scrollTop - clientHeight) < 500) {
        console.log('触底')
        this.page_no = this.page_no+1;
        this.loadContent();
      }
    },300)
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  position: relative;
  overflow: hidden;
  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 {
  background: #fff;
  overflow: auto;
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'segoe';
  header {
    padding: 0.6rem;
    box-sizing: border-box;
    text-align: left;
    background: #fff;
    p {
      font-size: 0.84rem;
      font-weight: 600;
      color: #000;
    }
  }
  #playcon {
    padding: 0 0.6rem;
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
    > div {
      width: 100%;
      height: 2.96rem;
      padding: 0.48rem 0.6rem;
      box-sizing: border-box;
      background: #f1f1f1;
      border-radius: 0.2rem;
    }
  }
  #abstract {
    padding: 0.6rem;
    box-sizing: border-box;
    font-size: 0.7rem;
    line-height: 1.4rem;
    letter-spacing: 0;
    font-family: 'segoe';
    .abstract_cont {
      border-left: 0.2rem solid #007aff;
      padding: 0.14rem 0.4rem;
      box-sizing: border-box;
      color: #333;
    }
  }
  #noaccess {
    width: 100%;
    height: 12rem;
    padding: 5rem 0.6rem 1rem;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    top: -4rem;
    background: url(~@/assets/img/accessbg.png) no-repeat;
    background-size: 100% auto;
    margin-bottom: -4rem;
    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;
    }
  }
  #overview{
    padding:0.83rem;
    background-color: rgba(77, 130, 191, 0.1);
    border: 1px solid #E2E2E2;
  }
  table {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-collapse: collapse;
    th,
    td {
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      padding: 0.1rem 0.2rem;
      box-sizing: border-box;
    }
  }
  #resetcss {
    pre {
      white-space: pre-wrap;
    }
  }
  // #element .element .element-content .main-container .content tbody td {
  //   padding: 0 0;
  //   word-break: break-all;
  // }
  #tipsAlert {
    width: 100%;
    height: 100%;
    padding: 15% 1rem;
    box-sizing: border-box;
    position: fixed;
    top: -120rem;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 200;
  }
}
</style>
