<!-- 原项目丢了 省事直接cv一下老项目代码 -->
<template>
  <div class="wrapper" ref="wrapper">
    <div id="reportdtl" v-if="isshow">
      <header>
        <p>
          <span style="margin-left: -0.45rem"
            >【第{{ 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="playcon" v-if="reportInfo.VideoUrl">
        <div>
          <img
            @click.stop="$refs.audioRef.playaudiopause()"
            v-if="
              $store.state.isplaying &&
              reportInfo.VideoUrl ==
                $store.state.audiolist[$store.state.playcount].video_url
            "
            src="~@/assets/img/playImg.png"
            style="width: 2rem; height: 2rem; float: left; margin-right: 0.4rem"
          />
          <img
            @click.stop="playaudio(reportInfo)"
            v-else
            src="~@/assets/img/pauseImg.png"
            style="width: 2rem; height: 2rem; float: left; margin-right: 0.4rem"
          />
          <p
            style="
              font-size: 0.64rem;
              line-height: 1rem;
              color: #333;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            "
          >
            {{ reportInfo.VideoName }}
          </p>
          <p style="font-size: 0.56rem; line-height: 1rem; color: #878787">
            {{ parseInt(reportInfo.VideoPlaySeconds / 60) }}分{{
              parseInt(reportInfo.VideoPlaySeconds % 60)
            }}秒
          </p>
        </div>
      </div>

      <div id="abstract">
        <div class="abstract_cont">
          <div>摘要：{{ reportInfo.Abstract }}</div>
          <div style="color: #666; margintop: 1.2rem">
            *注：请务必阅读&nbsp;<strong
              style="fontweight: normal; cursor: pointer; color: #3e8ce6"
              @click="showTips"
              >免责声明</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 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">{{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-else>
        <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 'PingFang-SC-Regular';
            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 'PingFang-SC-Regular';
              color: #333;
              text-align: center;
              margin-bottom: 0.34rem;
            "
          >
            免责声明
          </h1>
          <!-- <p>
            1、本报告仅供弘则弥道（上海）投资咨询有限公司正式签约的机构客户使用，不会仅因接收人/接受机构收到本报告而将其视为客户。
          </p>
          <p>
            2、本报告根据国际和行业通行的准则，以合法渠道获得这些信息，尽可能保证可靠、准确和完整，但并不保证报告所述信息的准确性和完整性，也不保证本报告所包含的信息或建议在本报告发出后不会发生任何变更。本报告中所提供的信息仅供参考。
          </p>
          <p>
            3、报告中的内容不对投资者做出的最终操作建议做任何的担保，也没有任何形式的分享投资收益或者分担投资损失的书面或口头承诺。不作为客户在投资、法律、会计或税务等方面的最终操作建议，也不作为道义的、责任的和法律的依据或者凭证，无论是否已经明示或者暗示。
          </p>
          <p>
            4、在任何情况下，本公司不对客户/接受人/接受机构因使用报告中内容所引致的一切损失负责任，客户/接受人/接受机构需自行承担全部风险。
          </p> -->
          <div class="disclaimer" v-html="Disclaimer"></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>

    <AudioPlay ref="audioRef"/>
  </div>
</template>

<script>
import {
  reportDetail,
} from "@/api/api.js";
import _ from 'lodash';
import wxShare from '../utils/wxShare.js';

import AudioPlay from './audioPlay.vue';
import { Watermark,BlindWatermark } from 'watermark-js-plus'
import { Base64 } from 'js-base64';
export default {
  components: { AudioPlay },
  data() {
    return {
      id: this.$route.query.code || '',
      isshow: false,
      reportInfo: {},
      reportlist: [],

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

  destroyed() {
    window.removeEventListener('scroll', this.loadMoreHandle);
  },

  updated() {
    // $('#resetcss').css({font:"0.76rem/1.5 '微软雅黑'",color:"#333",letterSpacing:"0.05rem"});
    $("#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 'PingFang-SC-Regular'",
        color: "#333",
        letterSpacing: "0.08rem",
        lineHeight: "1.3rem",
      });
    /* $("#resetcss")
      .find("span")
      .css({
        font: "0.7rem/1.5 'PingFang-SC-Regular'",
        letterSpacing: "0.08rem",
        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" });
  },
  methods: {
    showTips() {
      //免责声明显示
      $("#tipsAlert").animate({ top: 0 });
    },
    hideTips() {
      //免责声明收起
      $("#tipsAlert").animate({ top: "-120rem" });
    },
    goTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    playaudio(item) {
      //子组件先存后播
      console.log(item);
      if (
        this.$store.state.audiolist.length > 0 &&
        item.VideoUrl == this.$store.state.audiolist[0].VideoUrl
      ) {
        // this.$parent.playaudioplay();
        this.$refs.audioRef.playaudioplay();
      } else {
        this.$refs.audioRef.setisshowaudio(
          [
            {
              video_url: item.VideoUrl,
              video_name: item.VideoName,
              video_play_seconds: item.VideoPlaySeconds,
            },
          ],
          0
        );
      }
    },

    async getreportdetail() {
      const { Data,Ret  } = await reportDetail({ ReportCode: this.id });
        document.title=(Data && Data.H5ShareName) || "研报"
        if (Ret !== 200) return
        // console.log('data',Data)
        let H5ShareName = Data.H5ShareName
        let H5ReportShareImg = Data.H5ReportShareImg
        let wxShareTitle=!!Data.Hz?
        '【第'+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.Disclaimer = Data.Disclaimer||'';
        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,H5ShareName || 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">
.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;
  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.1rem;
    .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;
    }
  }
  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.01rem 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;
    .disclaimer{
        font-size: 0.58rem;
    }
  }

  .chapter-wrap{
    .chapter-item{
			margin-bottom: 20px;
			padding-bottom: 20px;
			border-bottom: 1px dashed #ccc;
			.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;
			}
		}
  }
}
</style>
