<template>
  <van-pull-refresh v-model="loading" disabled style="min-height: 100vh">
    <div class="report-detail-page" @click="closeAttention" v-if="info" :style="{ paddingBottom: $store.state.hzyb.audioData.url && '80px' }">
      <!-- 报告详情 -->
      <div :class="['main-box', !info.auth_ok && 'main-box-noauth']">
        <!-- <div class="title">【第{{info.report_info.stage}}期｜{{info.report_info.classify_name_second}}】{{info.report_info.title}}</div> -->
        <div :style="{ backgroundColor: info.report_info.canvas_color || '' }">
          <!-- 无版头板尾显示标题 -->
          <template v-if="!info.report_info.head_img && !info.report_info.end_img">
            <div class="title">{{ title }}</div>
            <div class="flex time">
              <span>{{ info.report_info.author }}</span>
              <span>{{ formatTime(info.report_info.publish_time) }}</span>
            </div>
          </template>

          <!-- 拼接版头 -->
          <div class="html-head-img-box" v-if="info.auth_ok && info.report_info.head_img">
            <img :src="info.report_info.head_img" 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="flex tips">
            <div style="flex: 1">
              <div class="abstract" v-if="info.report_info.abstract">摘要：{{ info.report_info.abstract }}</div>
              <div>
                <span>注：请务必阅读</span>
                <span style="color: #e3b377; margin-left: 20px" @click="showDisclaimers = true">免责声明</span>
              </div>
            </div>
          </div>
          <div v-if="isBinding" id="report-rich-content" class="rich-content" style="position: relative" ref="richConBox">
            <!-- 单人报告 -->
            <template v-if="info.auth_ok">
              <div v-if="!info.report_info.has_chapter">
                <ul>
                  <li v-for="item in realContent" :key="item" v-html="item"></li>
                </ul>
              </div>

              <!-- 展示拼接的章节报告 -->
              <template v-if="info.report_info.has_chapter && info.report_detail_show_type === 1">
                <div class="chapter-concat-item" v-for="chapter in info.report_chapter_list" :key="chapter.report_chapter_id">
                  <div class="chapter-title">
                    <h3 class="chapter-title-text">{{ chapter.title }}</h3>
                  </div>
                  <div class="html-cont" v-html="chapter.content"></div>
                </div>
              </template>
            </template>

            <div v-html="info.report_info.content_sub" v-else></div>
            <!-- 隐藏的水印
            <div class="hide-watermark-box" v-if="userInfo">
              <div v-for="item in 20" :key="item">{{ userInfo.mobile }}</div>
            </div> -->
          </div>
          <template v-else>
            <div v-if="info.report_info.content_sub" v-html="info.report_info.content_sub.slice(0, 200)"></div>
            <div class="please-login" @click="pleaseGoLogin">请登录后查看更多内容</div>
          </template>
          <!-- 拼接版尾 -->
          <div class="html-end-img-box" v-if="info.auth_ok && info.report_info.end_img">
            <img :src="info.report_info.end_img" 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 class="right-fix-box">
          <!-- 返回顶部 -->
          <div class="item back-top-img">
            <img v-show="showToTop && info.auth_ok" @click="handleBackTop" class="back-top-img" src="@/assets/hzyb/report/back-top.png" />
          </div>
        </div>
      </div>

      <!-- 免责声明 -->
      <Disclaimer v-model:show="showDisclaimers" :disclaimer="info.report_info.disclaimer" />
    </div>
  </van-pull-refresh>
</template>

<script>
// 由于当时写在uni中 直接复制过来的 也不想改了就写成vue2形式吧
import moment from "moment";
import "moment/dist/locale/zh-cn";
moment.locale("zh-cn");

import { apiReportDetail, apiReportPPtImgs, apiPublicBannerMark, apiPublicBannerList } from "@/api/hzyb/report";
import { RaiApi } from "@/api/cygx/api.js";
import { Popup, Image as VanImage, PullRefresh, Dialog, Toast, Swipe, SwipeItem } from "vant";
import _ from "lodash";
import Disclaimer from "./Disclaimer.vue";

import { addTokenToIframe } from "../../hzyb/utils/common";

export default {
  components: {
    [Popup.name]: Popup,
    [VanImage.name]: VanImage,
    [PullRefresh.name]: PullRefresh,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Dialog.name]: Dialog,
    Disclaimer,
  },
  computed: {
    code_scene() {
      return JSON.stringify({
        reportId: this.reportId,
      });
    },
    posterParams() {
      return {
        report_type: this.info.report_info.classify_name_first,
        report_title: this.title,
        report_abstract: this.info.report_info.content,
      };
    },
  },
  data() {
    return {
      showDisclaimers: false, //显示免责声明
      reportId: 0,
      info: null,
      title: "", //标题数据
      audioData: {}, //音频数据
      chapterList: [],
      pupData: {
        show: false,
        content: "", //弹窗html字符串
      },
      loading: false,
      showToTop: false,

      totalContent: [],
      realContent: [],
      page_no: 0,
      pageSize: 20, //默认初始加载20个p标签
      total_page: 0,

      hasPPt: false, //是否有ppt

      userInfo: null,
      shareData: {}, //分享的数据传给ppt页

      showAttention: false, //是否显示配置播放清单提示
      isReportPublishCancel: false, //报告取消发布
      bannerDataList: [],

      headImgStyle: null, //版头style
      endImgStyle: null, //版尾style
      layoutBaseInfo: {
        研报标题: "",
        研报作者: "",
        创建时间: "",
      },
      isBinding: true,
    };
  },
  created(options) {
    this.reportId = this.$route.query.id;
    let access_token = this.$route.query.token || "";
    this.isBinding = this.$route.query.isBinding == "true" ? true : false;
    localStorage.setItem("access_token", access_token);
    this.getDetail();
  },
  mounted() {
    $(document).on("click", ".rich-content img", function (event) {
      let imgArray = [];
      let curImageSrc = $(this).attr("src");
      let oParent = $(this).parent();
      if (curImageSrc && !oParent.attr("href")) {
        $(".rich-content img").each(function (index, el) {
          let itemSrc = $(this).attr("src");
          imgArray.push(itemSrc);
        });
        wx.previewImage({ current: curImageSrc, urls: imgArray });
      }
    });
    window.addEventListener("scroll", this.loadMoreHandle);
  },
  destroyed() {
    window.removeEventListener("scroll", this.loadMoreHandle);
  },
  methods: {
    // 跳转登录页面
    pleaseGoLogin() {
      Dialog.alert({
        message: "即将前往登录页面，请确认是否继续",
        showCancelButton: true,
        confirmButtonColor: "#376cbb",
      }).then((res) => {
        if (res == "confirm") {
          wx.miniProgram.navigateTo({
            url: "/pageMy/login/login",
          });
        }
      });
    },
    //获取报告详情
    async getDetail() {
      const res = await RaiApi.getFiccYbReportDetails({ ReportId: Number(this.reportId) });
      if (res.Ret === 200) {
        this.info = res.Data;
        this.headImgStyle = this.info.report_info.head_style ? JSON.parse(this.info.report_info.head_style) : [];
        this.endImgStyle = this.info.report_info.end_style ? JSON.parse(this.info.report_info.end_style) : [];
        this.layoutBaseInfo["研报标题"] = this.info.report_info.title;
        this.layoutBaseInfo["研报作者"] = this.info.report_info.author;
        // 已发布已通过的报告才显示发布时间
        this.layoutBaseInfo["创建时间"] = moment(this.info.report_info.publish_time).format("YYYY.MM.DD HH:mm");
        this.audioData = {
          auth_ok: this.info.auth_ok,
          video_name: this.info.report_info.video_name || `${this.info.report_info.title}(${moment(this.info.report_info.publish_time).format("MMDD")})`,
          video_play_seconds: this.info.report_info.video_play_seconds,
          video_url: this.info.report_info.video_url,
          video_img: this.info.report_info.video_img,
        };
        this.chapterList = this.info.report_chapter_list;
        document.title = this.info.report_info.classify_name_first || "";
        //非章节报告处理内容分页
        !this.info.report_info.has_chapter && this.splitContentHandle(this.info.report_info.content);

        // 处理报告标题数据
        // if(!this.info.report_info.has_chapter){
        const time = moment(this.info.report_info.publish_time).format("MMDD");
        if (this.info.report_info.classify_name_second == this.info.report_info.title) {
          this.title = `【第${this.info.report_info.stage}期】${this.info.report_info.title}（${time}）`;
        } else {
          this.title = `【第${this.info.report_info.stage}期｜${this.info.report_info.classify_name_second}】${this.info.report_info.title}（${time}）`;
        }
        // }
      }
    },
    /*内容分割*/
    splitContentHandle(content) {
      content = addTokenToIframe(content, this.reportId, 0);
      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;
      this.formatSmartStyle();
    },
    //添加水印
    waterMark(text, target) {
      if (!target) return;
      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";
    },

    // 智能布局内容排版全部变成1个1行的顺排
    formatSmartStyle() {
      this.$nextTick(() => {
        $(".report-drag-item-wrap_child-wrap").css({
          "flex-wrap": "wrap",
        });
        $(".report-drag-item-wrap_child-wrap").children().css({
          flex: "none",
          width: "100%",
        });
      });
    },

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

    loadMoreHandle: _.throttle(function () {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动的高度

      if (scrollTop > window.outerHeight - 150) {
        this.showToTop = true;
      } else {
        this.showToTop = false;
      }

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

      const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; // 可视高度
      const scrollHeight = document.body.scrollHeight; // 总高度
      const bufferHeight = 400;

      if (scrollHeight - scrollTop - clientHeight < bufferHeight + 100) {
        this.page_no = this.page_no + 1;
        this.loadContent();
      }
    }, 300),

    //返回顶部
    handleBackTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },

    // 格式化时间
    formatTime(time) {
      return moment(time).format("YYYY.MM.DD HH:mm:ss");
    },

    //格式化音频时间
    formatVoiceTime(e) {
      let minus = parseInt(e / 60);
      let sec = parseInt(e % 60);
      return `${minus > 9 ? minus : "0" + minus}分${sec > 9 ? sec : "0" + sec}秒`;
    },

    // 格式化章节列表时间
    formatChapterTime(time, type) {
      if (type === "day") {
        return moment(time).format("DD");
      }
      if (type === "week") {
        return moment(time).format("dddd");
      }
      if (type === "year-month") {
        return moment(time).format("YYYY-MM");
      }
      if (type === "year-month-day") {
        return moment(time).format("YYYY-MM-DD");
      }
    },

    onRefresh() {
      this.getDetail();
      setTimeout(() => {
        this.loading = false;
      }, 1500);
    },

    // 设置tag颜色
    getTagColor(str) {
      if (str.includes("多") || str.includes("强") || str.includes("反弹")) {
        return "#DF6051";
      } else if (str.includes("空") || str.includes("调整")) {
        return "#6FC5B4";
      } else {
        return "#009fe6";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/* 公共弹窗 */
.global-pup {
  background-color: #fff;
  width: 90vw;
  min-height: 200px;
  font-size: 32px;
  .content {
    padding: 34px;
    text-align: center;
    min-height: 250px;
    display: flex;
    align-items: center;
    text-align: center;
    line-height: 1.7;
    div {
      flex: 1;
    }
  }
  .bot {
    border-top: 1px solid #dedede;
    div {
      line-height: 96px;
      flex: 1;
      text-align: center;
      border-right: 1px solid #dedede;
      color: #e3b377;
    }
    div:last-child {
      border: none;
    }
  }
}
.flex {
  display: flex;
}
.report-detail-page {
  /* padding-bottom: 50px; */
  .main-box {
    padding: 34px;
    .title {
      display: inline;
      margin-left: -26px;
    }
  }
  .main-box-noauth {
    height: calc(100vh - 50px);
    overflow: hidden;
  }
  .title {
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 30px;
  }
  .time {
    justify-content: space-between;
    font-size: 30px;
    margin-top: 30px;
  }
  .audio-wrap {
    height: 160px;
    background: #faf7ee;
    border-radius: 16px;
    margin-top: 20px;
    padding: 10px 31px;
    margin-bottom: 31px;
    align-items: center;
    img {
      width: 110px;
      height: 110px;
      display: block;
      margin-right: 16px;
    }
  }

  .tips {
    margin-top: 15px;
    font-size: 34px;
    margin-bottom: 51px;
    position: relative;
    &::before {
      content: "";
      width: 10px;
      // height: 100%;
      display: inline-block;
      background-color: #e3b377;
      margin-right: 20px;
      // position: relative;
      // top: 10px;
    }
    .abstract {
      font-size: 34px;
      margin-bottom: 20px;
      line-height: 1.5;
    }
  }

  .disclaimers-box {
    width: 94vw;
    padding: 32px;
  }

  .rich-content {
    line-height: 1.8;
    font-size: 36px;
    :deep(img) {
      width: 100% !important;
    }
    :deep(span) {
      font-size: 36px !important;
      line-height: 1.8 !important;
      background-color: rgba(255, 255, 255, 0) !important;
    }
    :deep(p) {
      font-size: 36px !important;
      line-height: 1.8 !important;
      background-color: rgba(255, 255, 255, 0) !important;
    }
    :deep(ul) {
      font-size: 36px !important;
      line-height: 1.8 !important;
      background-color: rgba(255, 255, 255, 0) !important;
    }
    :deep(ol) {
      font-size: 36px !important;
      line-height: 1.8 !important;
      background-color: rgba(255, 255, 255, 0) !important;
    }
    :deep(iframe) {
      width: 100% !important;
    }
    :deep(li) {
      font-size: 36px !important;
      line-height: 1.8 !important;
      background-color: rgba(255, 255, 255, 0) !important;
      list-style: inherit !important;
      list-style-position: inside !important;
    }
    :deep(span.fr-emoticon) {
      width: 36px !important;
      height: 36px !important;
      background-repeat: no-repeat !important;
      background-size: cover !important;
      display: inline-block !important;
      vertical-align: middle !important;
    }
  }

  .no-auth-wrap {
    min-height: 200px;
    padding: 0 34px 50px 34px;
    background: linear-gradient(360deg, #ffffff 60%, rgba(255, 255, 255, 0) 88%);
    //   position: relative;
    //   top: -150px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    text-align: center;
    font-size: 32px;
    color: #e3b377;
    .apply-box {
      padding-top: 250px;
    }
    .btn {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      line-height: 80px;
      background-color: #e6b77d;
      border-radius: 4px;
      color: #fff;
      margin-top: 100px;
      display: block;
    }
  }

  .right-fix-box {
    position: fixed;
    z-index: 99;
    right: 34px;
    bottom: 130px;
    .back-top-img {
      width: 100px;
      height: 100px;
      display: block;
    }
  }
}

.html-head-img-box,
.html-end-img-box {
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
  .head-layout-item {
    position: absolute;
    overflow: hidden;
    box-sizing: border-box;
  }
}
.chapter-concat-item {
  padding: 20px 0;
  .chapter-title {
    display: flex;
    align-items: center;
    font-size: 30px;
    .type {
      height: fit-content;
      display: inline-block;
      color: #fff;
      padding: 10px 20px;
      background-color: #e6a23c;
      border-radius: 8px;
      margin-right: 20px;
    }
    .chapter-title-text {
      font-size: 30px;
    }
  }
}
.please-login {
  margin: 50px auto 150px;
  width: 556px;
  height: 64px;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  background-color: #376cbb;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
}
</style>
