<script setup>
import { computed, ref, onMounted, watch } from "vue";
import { apiGetReportDetail, apiGetWeekReportDetail } from "@/api/hzsl/report.js";
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
const route = useRoute();
const router = useRouter();
document.title = "报告详情";

let info = ref(null);
let topBg = ref(null);
let noAuth = ref(false);
const getDetail = async () => {
  const res = await apiGetWeekReportDetail({
    ...route.query,
  });

  if (res.code === 200) {
    info.value = res.data;
    let type = res.data.research_report_type_info.type;
    let temTopBg;
    if (type === "week") {
      temTopBg = await import("@/assets/hzyb/weektop.jpg");
    } else {
      temTopBg = await import("@/assets/hzyb/daytop.jpg");
    }
    topBg.value = temTopBg.default;
    getList();
    noAuth.value = false;
  } else if (res.code == 400) {
    noAuth.value = true;
  }
};

let list = ref([]);
let selectId = ref(null);
const getList = async (id) => {
  let query = JSON.parse(sessionStorage.getItem("userInfo"));
  const res = await apiGetReportDetail({
    ...query,
  });
  if (res.code === 200) {
    list.value = res.data.research_report_type_list || [];
    selectId.value = route.query.ResearchReportTypeId;
  }
};
getDetail();

onMounted(() => {
  $(document).on("click", ".content-wrap img", function (event) {
    let imgArray = [];
    let curImageSrc = $(this).attr("src");
    let oParent = $(this).parent();
    if (curImageSrc && !oParent.attr("href")) {
      $(".content-wrap img").each(function (index, el) {
        let itemSrc = $(this).attr("src");
        imgArray.push(itemSrc);
      });
      wx.previewImage({ current: curImageSrc, urls: imgArray });
    }
  });
});

const showTips = () => {
  //免责声明显示
  $("#tipsAlert").animate({ top: 0 });
};
const hideTips = () => {
  //免责声明收起
  $("#tipsAlert").animate({ top: "-120rem" });
};

const selectTag = (item) => {
  info.value = null;
  let strs = item.http_url.split("?");
  router.push(`?${strs[1]}`);
  document.body.scrollTop = document.documentElement.scrollTop = 0;
};

onBeforeRouteUpdate((to) => {
  getDetail();
});
</script>

<template>
  <div class="report-detail" v-if="info">
    <div class="top-wrap">
      <img :src="topBg" alt="" />
      <div class="box" @click="showTips"></div>
    </div>
    <div class="content-wrap">
      <div v-for="item in info.research_report_type_content_list" :key="item.sort">
        <h2 class="content-title">
          {{ item.content_type ? item.content_type : "核心观点" }}
        </h2>
        <div v-html="item.content" class="content-text"></div>
      </div>
    </div>
    <div class="footer-wrap">
      <img class="more-img" src="../../../assets/hzyb/moreother.png" alt="" />
      <div class="list">
        <div v-for="(item, index) in list" :key="index" @click="selectTag(item)">
          <img v-show="item.ResearchReportTypeId == selectId" src="../../../assets/hzyb/selected.png" class="selectimg" />
          <img :src="item.BannerUrl" class="imgBg" />
          <p>{{ item.ReportChapterTypeName }}</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 弹窗 -->
  <div class="tipsAlert" id="tipsAlert">
    <img class="top-img" src="../../../assets/hzyb/lianzi.png" />
    <div class="con">
      <h1>免责声明</h1>
      <p>1、本报告仅供弘则弥道（上海）投资咨询有限公司正式签约的机构客户使用，不会仅因接收人/接受机构收到本报告而将其视为客户。</p>
      <p>
        2、本报告根据国际和行业通行的准则，以合法渠道获得这些信息，尽可能保证可靠、准确和完整，但并不保证报告所述信息的准确性和完整性，也不保证本报告所包含的信息或建议在本报告发出后不会发生任何变更。本报告中所提供的信息仅供参考。
      </p>
      <p>
        3、报告中的内容不对投资者做出的最终操作建议做任何的担保，也没有任何形式的分享投资收益或者分担投资损失的书面或口头承诺。不作为客户在投资、法律、会计或税务等方面的最终操作建议，也不作为道义的、责任的和法律的依据或者凭证，无论是否已经明示或者暗示。
      </p>
      <p>4、在任何情况下，本公司不对客户/接受人/接受机构因使用报告中内容所引致的一切损失负责任，客户/接受人/接受机构需自行承担全部风险。</p>
      <img class="bot-img" src="../../../assets/hzyb/shou.png" @click="hideTips" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.flex {
  display: flex;
}
.top-wrap {
  width: 100%;
  height: 150px;
  background-color: rgb(220, 222, 223);
  color: #fff;
  padding-top: 40px;
  position: relative;
  padding: 30px 30px 0 30px;
  box-sizing: border-box;
  img {
    width: 100%;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
  }
  .box {
    position: absolute;
    width: 200px;
    height: 60px;
    top: 40px;
    right: 20px;
  }
}
.footer-wrap {
  background-color: rgb(236, 235, 235);
  padding: 40px 0;
  .more-img {
    width: 262px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .list {
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
    font: 0.56rem "黑体";
    color: #6184bc;
    overflow: auto;
    font-size: 28px;
    div {
      float: left;
      width: 150px;
      height: 150px;
      padding: 20px 0;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
      background: #fff;
      border: 1px solid #eaeaea;
      text-align: center;
      border-radius: 20px;
      margin: 11px;
    }
    .imgBg {
      width: 56px;
      height: 56px;
      margin: 5px auto 3px;
    }
    .selectimg {
      width: 62px;
      height: 62px;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}
.content-wrap {
  background-color: #fff;
  margin-top: -20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  min-height: 400px;
  position: relative;
  z-index: 2;
  padding: 40px 30px;
  line-height: 1.7;
  :deep(img) {
    width: 100%;
    display: block;
    margin: 20px 0;
  }
  .content-title {
    font-size: 38px;
    font-family: "思源黑体";
    margin: 0px 0 15px 0;
  }
  .content-text {
    font-size: 38px;
  }
  :deep(p) {
    margin: 0;
    padding: 0;
  }
}

#tipsAlert {
  width: 100%;
  height: 100%;
  padding: 13% 0.8rem;
  box-sizing: border-box;
  position: fixed;
  top: -120rem;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
  .top-img {
    width: 28px;
    position: absolute;
    left: 50%;
    z-index: 10;
    transform: translateX(-50%);
    top: -26px;
  }
  .con {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 8px;
    padding: 40px 32px;
    position: relative;
    h1 {
      font-size: 32px;
      text-align: center;
    }
    font-size: 28px;
    line-height: 1.7;
  }
  .bot-img {
    width: 178px;
    bottom: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
