<template>
  <div>
    <div class="report-container">
      <div class="report-title">{{ reportInfo.Title }}</div>
      <div class="report-author-box">
        <div class="report-author-name">
          {{ reportInfo.Department }}
        </div>
        <div class="report-publishTime">
          {{ publishTime }}
        </div>
      </div>
      <div class="report-disclaimer">注：请务必阅读<span @click="showDisclaimer">免责声明</span></div>
      <!-- <div class="report-introduction-box"> -->
      <div class="report-product-description">产品说明：{{ reportInfo.ProductDescription }}</div>
      <div class="report-macro-strategy-pc">
        <img src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/macro-strategy-pc.png" alt="" />
        宏观策略
      </div>
      <div class="report-update-description" v-html="strFontSize(reportInfo.MarketStrategy)"></div>
      <div class="report-attention-direction" style="margin-top: 12px">
        详细策略报告请
        <span @click="reportDetailLink">点击查看</span>
      </div>
      <!-- </div> -->
      <div class="industry-ul">
        <div class="industry-li" v-for="(item, index) in dataListSubject" :key="index">
          <div class="industry-name">{{ item.ChartPermissionName }}</div>
          <div class="industry-subject">
            <div class="subject-item" @click="positionSubject(key)" v-for="key in item.ListSubject" :key="key.IndustrialSubjectId">
              <a :href="`#miao${key.IndustrialSubjectId}${key.SubjectName}`">{{ key.ShowName }}</a>
              <img v-if="key.IsNew" class="icon_subject" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/new_subject.png" />
            </div>
          </div>
        </div>
      </div>
      <div class="report-content-box" id="report-content-box">
        <!-- 21: 消费 22：医药 20：科技 19：智造 -->
        <div class="report-content" v-for="item in reportList" :key="item.ChartPermissionId">
          <div class="report-content-header">
            <img :src="item.ChartPermissionIcon" />
            {{ item.ChartPermissionText }}
          </div>
          <div class="report-content-report" v-for="it in item.contetList" :key="it.IndustrialSubjectId">
            <div class="content-report-title">
              {{ it.IndustrialSubjectName }}
            </div>
            <div v-html="it.Body" class="content-report-body"></div>
            <div class="content-report-detail" v-if="it.OverviewArticleId > 0">
              公司综述报告请
              <span @click="goArticle(it.OverviewArticleId)"> 点击查看 </span>
            </div>
            <div class="company-label" :id="`miao${it.IndustrialSubjectId}${it.SubjectName}`">
              <span class="item">{{ it.ShowName }}</span>
              <img v-if="it.IsNew" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/new_report.png" />
              <span class="item item-subject-name" v-for="val in it.CompanyLabel" :key="val"># {{ val }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Disclaimer :showTips="showTips" @hideDlg="showTips = false" disclaimerType="2" />
    <toTop />
  </div>
</template>
<script>
import Disclaimer from "./components/disclaimer.vue";
import toTop from "./components/toTop.vue";
import moment from "moment";
import { raiInterface } from "@/api/api.js";
export default {
  name: "summaryPre",
  components: {
    Disclaimer,
    toTop,
  },
  computed: {
    publishTime() {
      return moment(this.reportInfo.PublishDate).format("YYYY-MM-DD hh:mm:ss");
    },
  },
  data() {
    return {
      reportInfo: "",
      showTips: false,
      dataListSubject: [],
      // 报告列表
      reportList: [],
      // route 列表点击进来，有route参数  storage 从sessionStorage取
      from: "route",
      // 21: 消费 22：医药 20：科技 19：智造
      ChartPermissionTextMap: new Map([
        [21, "消费领域深度调研报告"],
        [22, "医药领域深度调研报告"],
        [20, "科技领域深度调研报告"],
        [19, "智造领域深度调研报告"],
      ]),
      ChartPermissionIconMap: new Map([
        [21, "https://hongze.oss-accelerate.aliyuncs.com/static/images/202110/20211026/p1Oce2z0Hd7LOAhsMAcnelTc869X.png"],
        [22, "https://hongze.oss-accelerate.aliyuncs.com/static/images/202110/20211026/x19sqGUZTXXsaZiCl7BdCliARB9X.png"],
        [20, "https://hongze.oss-accelerate.aliyuncs.com/static/images/202110/20211026/sByLMApvMcKfpMYWANNMNOQGurH7.png"],
        [19, "https://hongze.oss-accelerate.aliyuncs.com/static/images/202110/20211026/D5UPmQ53dsHGrtdVmC9gJ7qSQ8zp.png"],
      ]),
    };
  },
  created() {
    this.init();
  },
  methods: {
    showDisclaimer() {
      this.showTips = true;
    },
    // 将reportInfo中的list解出来 方便页面展示
    async init() {
      if (this.$route.query.ArticleId) {
        // 有ArticleId 是通过列表点击进来的
        let res = await raiInterface.reportSelectionDetail({ ArticleId: this.$route.query.ArticleId || "" });
        if (res.Ret == 200) {
          this.reportInfo = res.Data;
          this.from = "route";
        } else {
          this.reportInfo = JSON.parse(sessionStorage.getItem("choicenessPre")) || {};
          this.from = "storage";
        }
      } else {
        this.reportInfo = JSON.parse(sessionStorage.getItem("choicenessPre")) || {};
        this.from = "storage";
      }
      if (this.from == "storage") {
        this.reportInfo.List.map((item) => {
          if (this.reportList.length == 0 || this.reportList.every((it) => it.ChartPermissionId != item.ChartPermissionId)) {
            this.reportList.push({
              ChartPermissionId: item.ChartPermissionId,
              ChartPermissionText: this.ChartPermissionTextMap.get(item.ChartPermissionId),
              ChartPermissionIcon: this.ChartPermissionIconMap.get(item.ChartPermissionId),
              contetList: [item],
            });
          } else {
            for (const report of this.reportList) {
              if (report.ChartPermissionId == item.ChartPermissionId) {
                report.contetList.push(item);
                break;
              }
            }
          }
        });
        this.dataListSubject = this.reportInfo.ListChartSummary;
      } else {
        this.reportInfo.List.map((item) => {
          if (this.reportList.length == 0 || this.reportList.every((it) => it.ChartPermissionId != item.ChartPermissionId)) {
            this.reportList.push({
              ChartPermissionId: item.ChartPermissionId,
              ChartPermissionText: this.ChartPermissionTextMap.get(item.ChartPermissionId),
              ChartPermissionIcon: this.ChartPermissionIconMap.get(item.ChartPermissionId),
              contetList: item.List,
            });
          } else {
            for (const report of this.reportList) {
              if (report.ChartPermissionId == item.ChartPermissionId) {
                report.contetList.push(item.List);
                break;
              }
            }
          }
        });
        this.reportList = this.reportList.filter((item) => item.contetList && item.contetList.length > 0);
      }
    },
    reportDetailLink() {
      window.open(this.reportInfo.ReportLink, "_blank");
    },
    strFontSize(str) {
      let font = str
        .replace(/font-size:\s\w+;?/g, "")
        .replace(/font-size\s:\w+;?/g, "")
        .replace(/font-size:\w+;?/g, "");
      return `<div style="font-size:16px">${font}</div>`;
    },
    goArticle(id) {
      window.open(`https://vmp.hzinsights.com/v2/articles/${id}`, "_blank");
    },
  },
  mounted() {
    $("#report-content-box img").css("max-width", "100%");
  },
};
</script>
<style lang="scss" scoped>
.report-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  word-break: break-all;
  box-sizing: border-box;
  .report-title {
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    color: #333333;
    margin-bottom: 10px;
  }
  .report-author-box {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    .report-author-name {
      font-style: normal;
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      margin-bottom: 4px;
    }
    .report-publishTime {
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      color: #999999;
    }
  }
  .report-attention-direction {
    text-align: right;
    span {
      color: #2a65f5;
      cursor: pointer;
    }
  }
  .report-disclaimer {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #999999;
    span {
      color: #3385ff;
      cursor: pointer;
      margin-left: 4px;
    }
  }

  .report-product-description {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    margin-top: 16px;
  }
  .report-macro-strategy-pc {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 20px;
    img {
      width: 26px;
      height: 20px;
      margin-right: 10px;
    }
  }
  .report-content-box {
    .report-content {
      margin-bottom: 40px;
      .report-content-header {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        img {
          height: 14px;
          margin-right: 12px;
        }
      }
      .report-content-report {
        margin-top: 18px;
        display: flex;
        flex-direction: column;
        .content-report-title {
          margin-bottom: 10px;
          min-width: 90px;
          display: flex;
          align-items: center;
          justify-content: center;
          align-self: flex-start;
          padding: 2px 10px;
          box-sizing: border-box;
          border-radius: 2px;
          font-size: 14px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          background: #3385ff;
        }
        .content-report-body {
          margin-bottom: 10px;
        }
        .content-report-detail {
          font-weight: 400;
          font-size: 16px;
          color: #333333;
          text-align: right;
          margin-top: 24px;
          span {
            color: #2a65f5;
            cursor: pointer;
            margin-left: 8px;
          }
        }
      }
    }
  }
  .company-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: #f2f2f2;
    width: 100%;
    padding: 10px 20px;
    line-height: 1.6;
    margin-top: 30px;
    img {
      width: 40px;
      height: 20px;
      margin-right: 22px;
    }
    .item {
      margin-right: 10px;
    }
    .item-subject-name {
      color: #2a65f5;
      margin-right: 30px;
    }
  }
  .industry-ul {
    margin-bottom: 40px;
    .industry-li {
      width: 100%;
      display: flex;
      .industry-name {
        flex-shrink: 0;
        width: 104px;
        background: #2a65f5;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        border-bottom: 1px solid #fff;
      }
      .industry-subject {
        display: flex;
        flex-wrap: wrap;
        .subject-item {
          position: relative;
          height: 38px;
          width: 119px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: -1px;
          border-top: 1px solid #dcdfe6;
          border-right: 1px solid #dcdfe6;
          border-bottom: 1px solid #dcdfe6;
          a {
            color: #666;
            text-decoration: underline;
          }
          .icon_subject {
            position: absolute;
            top: 0;
            left: 0;
            width: 34px;
            height: 34px;
          }
        }
      }
    }
  }
  .macro-strategy {
    width: 100%;
    height: 100px;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    font-size: 26px;
    width: 14px;
    height: 13px;
  }
}
</style>
