<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-abstract">
                摘要：{{reportInfo.Abstract}}
            </div>
            <div class="report-content-box" id="report-content-box">
              <div class="report-big-content" v-for="item1 in reportList" :key="item1.name">
                <template v-if="item1.name != '市场QA汇总'">
                  <div class="report-big-content-title">
                    <img :src="item1.icon"/>{{item1.name}}
                  </div>
                  <div class="report-small-content" v-for="item2 in item1.list" :key="item2.ChartPermissionId">
                    <div class="report-type-tag">
                      <img :src="item2.IcoLink"/>
                      {{item2.ChartPermissionName}}
                    </div>
                    <div class="report-content" v-for="(item3,index3) in item2.List" :key="index3">
                      <div class="report-body" v-html="item3.Body"></div>
                      <div class="report-detail-link" @click="toReportDetail(item3.ReportLink)" v-if="item3.ReportLink">点击查看详情</div>
                    </div>
                  </div>
                </template>
                <template v-else>
                  <div class="report-big-content-title">
                    <img :src="item1.icon"/>{{item1.name}}
                  </div>
                  <div class="report-small-content">
                    <div class="report-content" v-for="(item4,index4) in item1.list" :key="index4">
                      <div class="report-body" v-html="item4.Body"></div>
                      <div class="report-detail-link" @click="toReportDetail(item4.ReportLink)" v-if="item4.ReportLink">点击查看详情</div>
                    </div>
                  </div>

                </template>
              </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,
            // 报告数据
            reportList:[]
        }
    },
    created(){
      this.init()
    },
    mounted() {
        $("#report-content-box img").css('max-width','100%')
    },
    methods:{
      showDisclaimer(){
          this.showTips = true
      },
      // 将reportInfo中的list解出来 方便页面展示
      async init(){
        let Content=''
        if(this.$route.query.ArticleId){
          // 有ArticleId 是通过列表点击进来的
          let res = await raiInterface.researchSummaryDetail({ ArticleId: this.$route.query.ArticleId || ""})
          if(res.Ret == 200){
              this.reportInfo = res.Data
              Content = this.reportInfo
          }else{
              this.reportInfo = JSON.parse(sessionStorage.getItem('thisWeekPre')) || {}
              Content = this.reportInfo.Content
          }
        }else{
          this.reportInfo = JSON.parse(sessionStorage.getItem('thisWeekPre')) || {}
          Content = this.reportInfo.Content
        }
        // console.log(Content);
        
        if(Content.SortBzchjh != ''){
          this.reportList.push({
            // 报告列表
            list:Content.ListBzchjh,
            // 名称
            name:'本周晨会精华',
            // 排序
            sort:Content.SortBzchjh,
            icon:''
          })
        }
        if(Content.SortCydyjy != ''){
          this.reportList.push({
            // 报告列表
            list:Content.ListCydyjy,
            // 名称
            name:'产业调研纪要',
            // 排序
            sort:Content.SortCydyjy,
            icon:''
          })
        }
        if(Content.SortSdbg != ''){
          this.reportList.push({
            // 报告列表
            list:Content.ListSdbg,
            // 名称
            name:'深度报告',
            // 排序
            sort:Content.SortSdbg,
            icon:''
          })
        }
        if(Content.SortSjdp != ''){
          this.reportList.push({
            // 报告列表
            list:Content.ListSjdp,
            // 名称
            name:'市场QA汇总',
            // 排序
            sort:Content.SortSjdp,
            icon:''
          })
        }
        if(Content.SortSsgs != ''){
          this.reportList.push({
            // 报告列表
            list:Content.ListSsgs,
            // 名称
            name:'上市公司调研纪要',
            // 排序
            sort:Content.SortSsgs,
            icon:''
          })
        }
        for (let report of this.reportList) {
          if(report.name == "深度报告"){
            report.icon = 'https://hongze.oss-cn-shanghai.aliyuncs.com/static/images/202110/20211027/le8AcRjDz0MhA72bVDiaf3d5ALSe.png'
          }else if(report.name == "产业调研纪要"){
            report.icon = 'https://hongze.oss-cn-shanghai.aliyuncs.com/static/images/202110/20211020/UPAdozy96z9ypzY04vi0Y3Ogqzji.png'
          }else if(report.name == "本周晨会精华"){
            report.icon = 'https://hongze.oss-cn-shanghai.aliyuncs.com/static/images/202110/20211020/DCfekcxaIKGePBsNVu1ULfmNcJBY.png'
          }else if(report.name == "市场QA汇总"){
            report.icon = 'https://hongze.oss-cn-shanghai.aliyuncs.com/static/images/202110/20211020/2a5cXafO3Iws4QcFp1bd5WPdYikV.png'
          }else {
            report.icon = 'https://hongze.oss-cn-shanghai.aliyuncs.com/static/images/202111/20211101/ujHXB48I8ay9T0XoPRI7lorz7OkL.png'
          }
        }
        // 市场QA汇总里面没有排序项目
        for (let report of this.reportList.filter(it => it.name!='市场QA汇总')) {
          for (const item of report.list) {
            if(item.ChartPermissionName == '智造'){
              item.IcoLink = "https://hzstatic.hzinsights.com/static/temp/20220707202207/20220707/1sZLc8DnXMPkB29QQATstvtEvi20.png"
            }else if(item.ChartPermissionName == '医药'){
              item.IcoLink = "https://hzstatic.hzinsights.com/static/temp/20220707202207/20220707/5Xa9gP3A2dyR2AXoXcTyrboTEYl4.png"
            }else if(item.ChartPermissionName == '消费'){
              item.IcoLink = "https://hzstatic.hzinsights.com/static/temp/20220707202207/20220707/yAcPQU6iAgO3tgP1yNSlOmRhgfl9.png"
            }else if(item.ChartPermissionName == '策略'){
              item.IcoLink = ""
            }else{
              item.IcoLink = "https://hzstatic.hzinsights.com/static/temp/20220707202207/20220707/GIMrrZKC1GEOzGbaTBCkE5i6N9DJ.png"
            }
          }
          // 清除没有写排序的项目 没有排序就没有内容
          report.list = report.list.filter(item => item.ChartPermissionSort!='')
          // 里层排序
          report.list.sort((a,b) => a.ChartPermissionSort - b.ChartPermissionSort)
        }
        // 外层排序
        this.reportList.sort((a,b)=> a.sort.charCodeAt()-b.sort.charCodeAt())
        console.log(this.reportList);
      },
      toReportDetail(reportLink){
        window.open(reportLink, '_blank');
      }
    },
}
</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-disclaimer{
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            line-height: 22px;
            color: #999999;
            span{
                color: #3385FF;
                cursor: pointer;
                margin-left: 4px;
            }
        }
        .report-abstract{
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            color: #666666;
            padding: 12px 0;
            text-indent: 14px;
            word-break: break-all;
            position: relative;
            border-bottom: 1px dashed #DCDFE6;
            &:before{
                content: '';
                height: 20px;
                width: 4px;
                background-color: #3385FF;
                position: absolute;
                left: 0;
                top: 12px;
            }
        }
        .report-content-box{
          margin-top: 30px;
          .report-big-content{
            .report-big-content-title{
              font-style: normal;
              font-weight: 400;
              font-size: 14px;
              color: #333333;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-bottom: 20px;
              img{
                height: 14px;
                margin-right: 10px;
              }
            }
            .report-small-content{
              display: flex;
              flex-direction: column;
              margin-bottom: 30px;
              .report-type-tag{
                height: 24px;
                min-width: 90px;
                padding: 2px 10px;
                box-sizing: border-box;
                background-color: #3385FF;
                border-radius: 2px;
                font-weight: 400;
                font-size: 14px;
                color: #FFFFFF;
                display: flex;
                justify-content: center;
                align-items: center;
                align-self: flex-start;
                margin-bottom: 16px;
                img{
                  height: 14px;
                  margin-right: 6px;
                }
              }
              .report-content{
                margin-bottom: 38px;
                &:last-child{
                  margin-bottom: 0;
                }
                .report-detail-link{
                  font-weight: 400;
                  font-size: 16px;
                  color: #2A65F5;
                  margin-top: 14px;
                  text-align: right;
                  cursor: pointer;
                }
              }
            }
          }

        }
    }
</style>