hongze_yb_pc/src/views/report/Detail.vue

<script setup>
import {onMounted, onUpdated, ref,computed,nextTick} from 'vue'
import { ElMessageBox } from 'element-plus'
import moment from 'moment';
import 'moment/dist/locale/zh-cn'
import AudioBox from './components/AudioBox.vue'
import SharePoster from '@/components/SharePoster.vue'
import Comment from '@/components/Comment.vue'
import {apiReportDetail,apiReportMoreRecmd,apiReportDetailBanner,apiRddpShareImg,apiReportPPtImgs,apiReportChapterAudioSet,apiPublicBannerMark,apiPublicBannerList} from '@/api/report'
import {apiGetWechatQRCode} from '@/api/common'
import {apiApplyPermission} from '@/api/user'
import preLoadImg from '@/utils/preLoadImg.js'
import { useRoute , onBeforeRouteUpdate,useRouter} from 'vue-router';
import { useStore } from 'vuex';
import {useWaterMark} from '@/hooks/waterMark.js'
import CollectBox from '@/components/CollectBox.vue'
import collectIcon from '@/assets/collect2.png'
import collectSIcon from '@/assets/collect2-s.png'
import {addTokenToIframe} from '@/utils/common.js'
import { onClickOutside } from '@vueuse/core'
import reportCancel from './components/reportCancel.vue'
import ReportContent from './components/ReportContent.vue'
import Disclaimer from '@/components/Disclaimer.vue'
import { apiBaseConfig } from '@/api/common'
moment.locale('zh-cn')

const route=useRoute()
const router=useRouter()
const store=useStore()

const waterMarkEl=ref('')//水印盒子

let reportId=ref(route.query.reportId||'')

//跳转线上路演
const goVideoPage = (item)=>{
  router.push({
    path:'/roadshow/video/list',
    query:{
      videoId:item.road_video_id,
      fromPage:'reportDetail'
    }
  })
}

//获取报告对应的ppt图片
let pptImgs=ref([])
let showPreViewPPT=ref(false)
let preViewPPTIndex=ref(0)
const getReportPPTImgs=async ()=>{
    const res=await apiReportPPtImgs({
        report_id:Number(reportId.value),
        report_chapter_id:0
    })
    if(res.code===200){
        pptImgs.value=res.data||[]
        if(res.data&&res.data.length>0){
            preLoadImg(res.data)
        }
    }
}

const disclaimer = ref('')
function getConfig() {
  apiBaseConfig().then(res => {
    if (res.code == 200) {
      disclaimer.value = res.data.disclaimer
    }
  })
}
getConfig()

// 获取报告详情
let info=ref(null)
let audioData=ref(null)
let isReportPublishCancel=ref(false)//报告取消发布了

const headImgStyle = ref([])//版头style
const endImgStyle = ref([])//版尾style
const layoutBaseInfo = ref({
    研报标题:'',
    研报作者:'',
    创建时间:''
})
const getReportDetail=async ()=>{
    const res=await apiReportDetail({
        report_id:Number(reportId.value)
    })
    if(res.code===200){
        info.value=res.data

        headImgStyle.value=res.data.report_info.head_style?JSON.parse(res.data.report_info.head_style):[]
        endImgStyle.value=res.data.report_info.end_style?JSON.parse(res.data.report_info.end_style):[]
        layoutBaseInfo.value['研报标题']=res.data.report_info.title
        layoutBaseInfo.value['研报作者']=res.data.report_info.author
        // 已发布已通过的报告才显示发布时间
        layoutBaseInfo.value['创建时间']=moment(res.data.report_info.publish_time).format('YYYY.MM.DD HH:mm')
        
        if(!res.data.report_info.has_chapter) {
            info.value.report_info.content=addTokenToIframe(res.data.report_info.content,res.data.report_info.report_id,0)
        }

        //章节拼接报告拼接iframe token
        if(res.data.report_info.has_chapter&&res.data.report_detail_show_type===1) {
            res.data.report_chapter_list.forEach(chapter => {
                chapter.content = addTokenToIframe(chapter.content,reportId.value,chapter.report_chapter_id)
            })
        }

        audioData.value={
            auth_ok:res.data.auth_ok,
            video_name:res.data.report_info.video_name||`${res.data.report_info.title}(${moment(res.data.report_info.publish_time).format('MMDD')})`,
            video_size:res.data.report_info.video_size||'',
            video_play_seconds:res.data.report_info.video_play_seconds,
            video_url:res.data.report_info.video_url,
            reportId:res.data.report_info.report_id
        }
        document.title = res.data.report_info.classify_name_first
        // if(['晨报','周报'].includes(res.data.report_info.classify_name_first)){
            store.commit('modifyBreadCrumb',res.data.report_info.classify_name_first)
        // }
        
        // 获取详情如果为联系销售根据判断条件是否主动申请一次
        if(!res.data.auth_ok){
            if(info.value.permission_check.type=='contact'&&!info.value.permission_check.customer_info.has_apply){
                if(info.value.permission_check.customer_info.status=='冻结'||(info.value.permission_check.customer_info.status=='试用'&&info.value.permission_check.customer_info.is_suspend==1)){
                    apiApplyPermission({
                        company_name:info.value.permission_check.customer_info.company_name,
                        real_name:info.value.permission_check.customer_info.name,
                        source:4,
                        from_page:'报告详情'
                    }).then(res=>{
                        if(res.code===200){
                            console.log('主动申请成功');
                        }
                    }) 
                }
            }
        }

        // 获取侧边更多推荐
        if(res.data.auth_ok){
            getAsideMoreRecmd(res.data.report_info)
            getAsideBanner(res.data.report_info)
            getReportPPTImgs()

            // 设置水印
            nextTick(()=>{
                useWaterMark(store.state.userInfo?.mobile,waterMarkEl)
            })
        }

        //向小程序发送分享数据
        //处理分享标题
        let shareTitle='',shareImg='',imgText='';
        const shareTime=moment(res.data.report_info.publish_time).format('MMDD')

        if(res.data.report_info.abstract){
            shareTitle=res.data.report_info.abstract
            imgText=`<div style="font-size:78px">第${res.data.report_info.stage}期 | ${res.data.report_info.title}（${shareTime}）</div>`
        }else{
            shareTitle=res.data.report_info.title
            imgText=`<div style="font-size:78px">${moment(res.data.report_info.publish_time).format('YYYY/MM/DD')}</div><div style="font-size:78px">第${res.data.report_info.stage}期 | ${res.data.report_info.classify_name_second}</div>`
            if(['晨报','周报'].includes(res.data.report_info.classify_name_first)){
                imgText=`<div style="font-size:78px">${moment(res.data.report_info.publish_time).format('YYYY/MM/DD')}</div><div style="font-size:78px">第${res.data.report_info.stage}期 | ${res.data.report_info.classify_name_first} </div>`
            }
        }
        const rddpImgRes=await apiRddpShareImg({
            pars:JSON.stringify({
                title:imgText,
                time_format:moment(res.data.report_info.publish_time).format('YYYY/MM/DD'),
                background_img:res.data.report_info.share_bg_img,
                ReportId:Number(reportId.value),
            })
        })
        if(rddpImgRes.code===200){
            shareImg=rddpImgRes.data
        }

        const postData={
            path:['晨报','周报'].includes(res.data.report_info.classify_name_first)?'/pages-report/chapterList':'/pages-report/reportDetail',
            params:{
                reportId:reportId.value
            },
            title:shareTitle,
            shareImg:shareImg
        }
        wx.miniProgram.postMessage({ data: postData })
        
    }else if(res.code===4002){
        isReportPublishCancel.value=true
    }
}
getReportDetail()



// 侧边栏更多推荐
let moreRecmdList=ref([])
const getAsideMoreRecmd=async (data)=>{
    console.log('获取侧边栏更多推荐');
    const res=await apiReportMoreRecmd({
        reportId:Number(data.report_id),
        classify_name_first:data.classify_name_first
    })
    if(res.code===200){
        moreRecmdList.value=res.data 
    }
}

//点击侧边栏更多推荐
const handleClickAsideRecmd=(item)=>{
    router.replace({
        query:{
            reportId:item.ReportId
        }
    })
    // 更新页面数据
    // reportId.value=item.ReportId
    // getReportDetail()
    // getQRCodeImg()
}

//侧边栏报告合集
let banner=ref(null)
const getAsideBanner=async (data)=>{
    console.log('获取侧边栏报告合集');
    const res=await apiReportDetailBanner({
        reportId:Number(data.report_id),
        classify_name_first:data.classify_name_first
    })
    if(res.code===200){
        banner.value=res.data
    }
}

//点击侧边栏报告合集
const handleAsideBanner=(data)=>{
    if(data.Type=='报告合集'&&data.ShowType===1){
        router.push({
            path:'/report/list',
            query:{
                classifyId:data.ClassifyIdFirst,
                classifyName:data.ClassifyNameFirst
            }
        })
    }else if(data.Type=='报告合集'&&data.ShowType===3){
      router.push({
        path:'/report/varietyreportlist',
        query:{
          classifyId:data.ClassifyIdFirst,
        }
      })
    }
    else{
        router.push({
            path:'/report/specialcolumndetail',
            query:{
                columnId:data.ClassifyIdSecond
            }
        })
    }
}

let preViewImgs=ref([])
let preViewImgIndex=ref(0)
let showPreViewImg=ref(false)

onMounted(()=>{
    $(document).on('click', '.rich-content img',function(event) {
	    let imgArray = [];
	    let curImageSrc = $(this).attr('src');
		let oParent = $(this).parent();
		if (curImageSrc && !oParent.attr('href')) {
            if(preViewImgs.value.length===0){
                $('.rich-content img').each(function(index, el) {
                    let itemSrc = $(this).attr('src');
                    imgArray.push(itemSrc);
                });
                preViewImgs.value=imgArray
            }
            preViewImgIndex.value=preViewImgs.value.indexOf(curImageSrc)||0
            showPreViewImg.value=true
	    }
    })
    // getBannerlist()
})

onBeforeRouteUpdate((to,from)=>{
    console.log(to.query);
    // 更新页面数据
    reportId.value=to.query.reportId
    getReportDetail()
    getQRCodeImg()
})

// 设置章节列表tag颜色
const getTagColor=(str)=>{
    if( str.includes('多')||str.includes('强')||str.includes('反弹') ){
        return "#DF6051";
    }else if( str.includes('空')||str.includes('调整') ){
        return "#6FC5B4";
    }else{
        return "#009fe6";
    }
}

// 跳转章节详情
const goChapterDetail=(item)=>{
    router.push({
        path:'/report/chapterdetail',
        query:{
            chapterId:item.report_chapter_id,
            frompage:'reportdetail'
        }
    })
}

//登录
const handleGoLogin=()=>{
    wx.miniProgram.getEnv(res=>{
        if(res.miniprogram){
            localStorage.setItem('goBeforeUrl',window.location.href)
            wx.miniProgram.reLaunch({url:'/pages/login'})
        }
    })
}

// 点击申请
const handleGoApply=async ()=>{
    if(store.state.userInfo.is_bind===0){
        ElMessageBox({
            title:`温馨提示`,
            message:'为了优化您的用户体验，<br>请登录后查看更多信息！',
            dangerouslyUseHTMLString: true,
            center: true,
            confirmButtonText:'去登录',
            confirmButtonClass:'self-elmessage-confirm-btn',
            showCancelButton:true,
            cancelButtonText:'取消',
            cancelButtonClass:'self-elmessage-cancel-btn'
        }).then(res=>{
            wx.miniProgram.reLaunch({url:'/pages/login'})
        }).catch(()=>{})
        return
    }
    if(info.value.permission_check.type=='apply'){
        if(info.value.permission_check.customer_info.has_apply){// 已经申请过
            const htmlStr=`<p>您已提交过申请，请耐心等待</p>`
            ElMessageBox({
                title:'温馨提醒',
                message:htmlStr,
                center: true,
                dangerouslyUseHTMLString: true,
                confirmButtonText:'知道了',
                confirmButtonClass:'self-elmessage-confirm-btn'
            })
        }else{
            if(!info.value.permission_check.customer_info.status||info.value.permission_check.customer_info.status!='流失'||info.value.permission_check.customer_info.status!='关闭'){
                router.push({
                    path:'/apply/permission',
                    query:{
                        source:4,
                        fromPage:'报告详情'
                    }
                })
            }else{//主动调一次申请权限接口 
                const res=await apiApplyPermission({
                    company_name:info.value.permission_check.customer_info.company_name,
                    real_name:info.value.permission_check.customer_info.name,
                    source:4,
                    from_page:'报告详情'
                })
                if(res.code===200){
                    getReportDetail()
                    const htmlStr=`<p>申请已提交</p><p>请等待销售人员与您联系</p>`
                    ElMessageBox({
                        title:'温馨提醒',
                        message:htmlStr,
                        center: true,
                        dangerouslyUseHTMLString: true,
                        confirmButtonText:'知道了',
                        confirmButtonClass:'self-elmessage-confirm-btn'
                    })
                }
            }
        }     
    }
}

// 获取小程序码
let QRCodeImg=ref('')
const getQRCodeImg=async ()=>{
    const res=await apiGetWechatQRCode({
        CodeScene:JSON.stringify({reportId:reportId.value}),
        CodePage:'pages-report/reportDetail'
    })
    if(res.code===200){
        QRCodeImg.value=res.data
    }
}
getQRCodeImg()


let showDisclaimers=ref(false)//显示免责声明

const code_scene=computed(()=>{
    return JSON.stringify({reportId:reportId.value})
})

const posterParams=computed(()=>{
    return {
        report_type:info.value.report_info.classify_name_first,
        // report_title:`【第${info.value.report_info.stage}期 | ${info.value.report_info.classify_name_second}】${info.value.report_info.title}`,
        report_title:formatTitle(info.value.report_info),
        report_abstract:info.value.report_info.content
    }
})

// 报告标题
const formatTitle=(e)=>{
    let t=moment(e.publish_time).format('MMDD')
    let title=''
    if(e.classify_name_second==e.title){
        title=`【第${e.stage}期】${e.title}（${t}）`
    }else{
        title=`【第${e.stage}期 | ${e.classify_name_second}】${e.title}（${t}）`
    }
    return title
}

// 点击播放周报章节音频
const handlePlayWeekAudio=(e)=>{
    if(store.state.audioData.reportId==info.value.report_info.report_id){
        if(store.state.audioData.paused){
            store.state.audioData.INS.play()
        }else{
            store.state.audioData.INS.pause()
        }
        return
    }
    const arr=[]
    info.value.report_chapter_list.forEach(item=>{
        if(item.is_close==0){
            arr.push({
                url:item.video_url,
                time:item.video_play_seconds,
                name:item.video_name
            })
        }
    })
    console.log(arr);
    let index=0
    if(e){
        arr.forEach((_item,idx)=>{
            if(_item.url==e.video_url) index=idx
        })
    }
    
    store.commit('addAudio',{
        list:arr,
        index:index,
        reportId:info.value.report_info.report_id,
    })
}

let showAudioPlayListSet=ref(false)//显示播放清单配置
const handleAudioSet=(item)=>{
    apiReportChapterAudioSet({
        type_id:item.type_id,
        is_close:item.is_close==0?1:0
    }).then(res=>{
        if(res.code===200){
            item.is_close=item.is_close==0?1:0
        }
    })
}

// banner data
const bannerDataList =ref([])

/* 点击了banner */
const bannerClickHandler = async (item) => {
 if(store.state.userInfo.is_bind===0){
        ElMessageBox({
            title:`温馨提示`,
            message:'为了优化您的用户体验，<br>请登录后查看更多信息！',
            dangerouslyUseHTMLString: true,
            center: true,
            confirmButtonText:'去登录',
            confirmButtonClass:'self-elmessage-confirm-btn',
            showCancelButton:true,
            cancelButtonText:'取消',
            cancelButtonClass:'self-elmessage-cancel-btn'
        }).then(res=>{
            wx.miniProgram.reLaunch({url:'/pages/login'})
        }).catch(()=>{})
        return
  }
  let source = sessionStorage.getItem('platformSource')
  const res = await apiPublicBannerMark({
    first_source: source == 'xcx' ? 2 : 3, //一级来源 1小程序移动 2小程序pc 3研报官网
    second_source: 2 ,//二级来源 1首页 2研报详情页
    id:item.id
  })
  if(res.code ==200){
    router.push({
      path:'/report/disseminatePage',
      query: {
        imgBg: item.jump_url_pc,
        enable: item.enable,
        id: item.id,
        title: item.remark
      }
    })
  }
}

// banner 获取列表
const getBannerlist = async () => {
    const res = await apiPublicBannerList()
    if(res.code ==200){
        bannerDataList.value = res.data
    }
}

// 显示引导
let showAttention=ref(localStorage.getItem('showAttention')?false:true)
const audioPlayListPop=ref(null)
onClickOutside(audioPlayListPop, (event) => {
    if(info.value.report_info.classify_name_first=='周报'&&info.value.auth_ok){
        closeShowAttention()
    }
})
const closeShowAttention=()=>{
    showAttention.value=false
    localStorage.setItem('showAttention','true')
}
let showAttentionPop=ref(localStorage.getItem('showAttentionPop')?false:true)
const attentionPop=ref(null)
onClickOutside(attentionPop, (event) => {
    if(showAudioPlayListSet.value){
        closeShowAttentionPop()
    }
})
const closeShowAttentionPop=()=>{
    showAttentionPop.value=false
    localStorage.setItem('showAttentionPop','true')
}
</script>

<template>
    <div class="report-detail-page" v-if="info">
        <div class="hasrightaside-box">
            <div class="content-box">
                <!-- 晨报、周报章节 列表展示形式 -->
                <div class="chapter-list-wrap" v-if="info.report_info.has_chapter&&info.report_detail_show_type===2">
                    <div 
                        :class="['top-box',info.report_info.classify_name_first=='周报'?'top-box-week':'']" 
                        :style="'background-image:url(' + info.report_info.banner_url + ')'"
                    >
                        <div class="time-box">
                            <div class="day">{{moment(info.report_info.publish_time).format('DD')}}</div>
                            <div style="font-size:14px">
                                <div>{{moment(info.report_info.publish_time).format('ddd')}}</div>
                                <div>{{moment(info.report_info.publish_time).format('YYYY-MM')}}</div>
                            </div>
                        </div>
                        <div class="title">{{info.report_info.classify_name_first}}</div>
                        <div class="sub-title">{{info.report_info.title}}</div>

                        <!-- 列表有音频 章节就不显示 -->
                        <template v-if="!info.report_info.video_url">
                            <!-- 音频设置 -->
                            <el-popover
                                :visible="showAttention&&info.auth_ok"
                                placement="bottom-end"
                                :width="340"
                            >
                                <template #reference>
                                    <img 
                                        src="@/assets/audio-set.png"
                                        class="audio-set-box" 
                                        v-if="info.report_info.classify_name_first=='周报'&&info.auth_ok" @click="showAudioPlayListSet=true" 
                                    />
                                </template>
                                <template #default>
                                    <div ref="audioPlayListPop" style="position: relative;">
                                        <h2 style="color:#F3A52F;font-size:16px">配置播放列表</h2>
                                        <p>点击<span style="color:#F3A52F">设置</span>，打开<span style="color:#F3A52F">播放列表</span>，进行<span style="color:#F3A52F">关注品种配置</span></p>
                                        <img src="@/assets/icon-close-2.png" alt="" style="width:9px;height:9px;position: absolute;top:-12px;right:10px" @click="closeShowAttention">
                                    </div>
                                </template>
                            </el-popover>
                            <!-- 播放 按钮 -->
                            <div 
                                class="audio-play-box" 
                                v-if="info.report_info.classify_name_first=='周报'&&info.auth_ok"
                                @click="handlePlayWeekAudio(null)"
                            >
                                <div :class="['icon',$store.state.audioData.reportId==info.report_info.report_id&&!$store.state.audioData.paused?'icon-active':'']"></div>
                                <span>{{$store.state.audioData.reportId==info.report_info.report_id&&!$store.state.audioData.paused?'暂停':'播放'}}</span>
                            </div>
                        </template>
                    </div>
                    <div class="list-box">
                        <div class="flex item" v-for="item in info.report_chapter_list" :key="item.report_chapter_id" @click="goChapterDetail(item)">
                            <div class="img-box">
                                <el-image class="img" :src="item.report_chapter_type_thumb" fit="cover" />
                            </div>
                            <div class="con">
                                <div class="title">
                                    {{item.report_chapter_type_name}} 
                                    <span class="tag" :style="{backgroundColor:getTagColor(tag)}" v-for="tag in item.trend.split(',')" :key="tag">{{tag}}</span>
                                </div>
                                <div class="van-multi-ellipsis--l2 sub-title">{{item.title}}</div>
                                <div class="update-time">更新至：{{moment(item.publish_time).format('YYYY-MM-DD')}}</div>
                                <div 
                                    :class="['audio-icon-box',$store.state.audioData.list[$store.state.audioData.index]?.url==item.video_url&&!$store.state.audioData.paused?'audio-icon-box--active':'']" 
                                    v-if="info.report_info.classify_name_first=='周报'&&item.is_close==0&&!info.report_info.video_url"
                                    @click.stop="handlePlayWeekAudio(item)"
                                ></div>
                            </div>
                        </div>
                    </div>
                    <!-- 无权限 -->
                    <div class="no-auth-wrap"  v-if="store.state.userInfo?.is_bind==0">
                        <div class="apply-box">
                            <div>您尚未登录，请登录后查看更多信息</div>
                            <div class="global-main-btn btn" @click="handleGoLogin">立即登录</div>
                        </div>
                    </div>
                    <template v-else>
                        <div class="no-auth-wrap" v-if="!info.auth_ok">
                            <img class="img" width="400" src="https://hzstatic.hzinsights.com/static/icon/hzyb/activity_no_auth.png" mode="widthFix" />
                            <div class="apply-box" v-if="info.permission_check.type=='apply'">
                                <div>您暂无权限查看报告，若想查看请申请开通</div>
                                <div class="global-main-btn btn" @click="handleGoApply">立即申请</div>
                            </div>
                            <div class="apply-box" v-else>
                                <div>您暂无权限查看报告 </div>
                                <div>若想查看请联系对口销售：{{info.permission_check.name}}--{{info.permission_check.mobile}}</div>
                            </div>
                        </div>
                    </template>
                </div>
                
                <!-- 报告详情 章节报告拼接形式 -->
                <div class="report-box" v-else>
                    <!-- <template v-if="bannerDataList.length > 0">
                        <el-carousel height="90px" style="margin-bottom:20px;" :interval="4000" :indicator-position="bannerDataList.length==0?'none':''" :arrow="bannerDataList.length==0?'never':''">
                            <el-carousel-item @click="bannerClickHandler(item)" v-for="item in bannerDataList" :key="item.id">
                                <img style="width:100%;height:100%;cursor:pointer;" :src="item.image_url_pc" alt="">
                            </el-carousel-item>
                        </el-carousel>
                    </template> -->
                    
                    <div :style="{backgroundColor:info.report_info.canvas_color||''}">
                        <!-- 无版头板尾显示标题 -->
                        <template v-if="(!info.report_info.head_img) && (!info.report_info.end_img)">
                            <div class="title">{{formatTitle(info.report_info)}}</div>
                            <div class="time">
                                <span>{{info.report_info.author}}</span>
                                <span>{{moment(info.report_info.publish_time).format('YYYY.MM.DD HH:mm')}}</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" style="position:relative">
                            <div>
                                <div v-if="info.road_video_id">点击<span style="color: #F3A52F;cursor: pointer;" @click="goVideoPage(info)">查看视频</span></div>
                                <div class="abstract" v-if="info.report_info.abstract">摘要：{{info.report_info.abstract}}</div>
                                <div v-if="disclaimer">
                                    <span>*注：请务必阅读</span>
                                    <span style="color:#F3A52F;margin-left:20px;cursor: pointer;" @click="showDisclaimers=true">免责声明</span>
                                </div>
                            </div>
                        </div>
                        <!-- 音频模块 -->
                        <AudioBox :data="audioData" v-if="info.report_info.video_url&&info.report_info.video_play_seconds>0"></AudioBox>

                        <div id="report-rich-content" class="no-select-text rich-content" ref="waterMarkEl">
                            <template v-if="info.auth_ok">
                                <!-- 展示拼接的章节报告 -->
                                <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>

                                <!-- 单人报告 -->
                                <ReportContent :html="info.report_info.content" v-if="!info.report_info.has_chapter"></ReportContent>
                            </template>

                            <div v-html="info.report_info.content_sub" v-else></div>
                            <!-- 隐藏的水印 -->
                            <div class="hide-watermark-box">
                                <div v-for="item in 20" :key="item">{{$store.state.userInfo.mobile}}</div>
                            </div>
                        </div>

                        <!-- 拼接版尾 -->
                        <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>

                    <!-- 评论点赞模块 -->
                    <Comment
                        :data="{
                            report_id:info.report_info.report_id,
                            report_chapter_id:0,
                            old_report_id:0,
                            old_report_chapter_id:0,
                            like_enabled:info.like_enabled,
                            like_num:info.like_num
                        }"
                        v-if="info.auth_ok"
                    />

                    <!-- 无权限 -->
                    <div class="no-auth-wrap"  v-if="store.state.userInfo?.is_bind==0">
                        <div class="apply-box">
                            <div>您尚未登录，请登录后查看更多信息</div>
                            <div class="global-main-btn btn" @click="handleGoLogin">立即登录</div>
                        </div>
                    </div>
                    <template v-else>
                        <div class="no-auth-wrap" v-if="!info.auth_ok">
                            <div class="apply-box" v-if="info.permission_check.type=='apply'">
                                <div>您暂无权限查看报告，若想查看请申请开通</div>
                                <div class="global-main-btn btn" @click="handleGoApply">立即申请</div>
                            </div>
                            <div class="apply-box" v-else>
                                <div>您暂无权限查看报告 </div>
                                <div>若想查看请联系对口销售：{{info.permission_check.name}}--{{info.permission_check.mobile}}</div>
                            </div>
                        </div>
                    </template>
                    <!-- 右侧悬浮操作栏 -->
                    <div class="right-fix-opt-box">
                        <!-- 收藏 -->
                        <CollectBox
                            :type="1"
                            :primaryId="info.report_info.report_id"
                            :collectId="info.collection_id"
                            @change="e=>info.collection_id=e"
                            v-if="info&&info.auth_ok"
                        >
                            <img class="collect-icon" :src="info.collection_id>0?collectSIcon:collectIcon" alt="">
                        </CollectBox>
                        <!-- ppt -->
                        <img class="ppt-icon" src="@/assets/ppt-icon.png" v-if="pptImgs.length>0" @click="showPreViewPPT=true" alt="">
                        <!-- 生成海报 -->
                        <SharePoster  
                            :shareData="{
                                type:'report_detail',
                                code_page:'pages-report/reportDetail',
                                code_scene:code_scene,
                                data:posterParams
                            }"
                            :style="{position:'static',display:'inline-block'}"
                            v-if="info&&info.auth_ok"
                        >
                        </SharePoster>
                    </div>
                </div>
            </div>
            <div class="right-aside-box" v-if="info.auth_ok&&!info.report_info.has_chapter">
                <div class="fix-top">
                <div class="share-box">
                    <div class="label">分享</div>
                    <el-popover 
                        :width="200" 
                        popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
                    >
                        <template #reference><div class="icon"></div></template>
                        <template #default>
                            <img :src="QRCodeImg" class="share-xcx-img" alt="" style="width: 150px;display: block;margin: 0 auto;">
                        </template>
                    </el-popover>
                </div>
                <div class="hot-box" style="margin-top: 60px;" v-if="banner">
                    <div class="label">{{banner.Type}}</div>
                    <div class="img-con" :style="'background-image:url('+banner.ImgUrl+')'" @click="handleAsideBanner(banner)">
                        <!-- 专栏 -->
                        <div v-if="banner.Type=='专栏详情'" class="cloumn-box">
                            <div class="title">{{banner.ClassifyNameSecond.substring(0, 12)}}</div>
                            <div class="multi-ellipsis user">{{banner.ReportAuthor}} {{banner.VipTitle}}</div>
                            <div class="stage">更新至{{banner.Stage}}期</div>
                        </div>
                        <!-- 报告列表 -->
                        <div v-else class="rep-box cloumn-box">
                          <div class="title">{{banner.ClassifyNameFirst.substring(0, 12)}}</div>
                            <!-- <span class="stage">第{{banner.Stage}}期</span> -->
                        </div>
                    </div>
                </div>
                <div class="recmd-box" style="margin-top: 40px;">
                    <div class="label">更多推荐</div>
                    <div 
                        class="recmd-item" 
                        v-for="item in moreRecmdList" 
                        :key="item.Id"
                        @click="handleClickAsideRecmd(item)"
                    >
                        <div class="title">{{item.ClassifySecondFirst}}</div>
                        <div>{{item.Stage}} | {{item.Title}}</div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
    <report-cancel v-if="isReportPublishCancel"/>

    <!-- 图片预览 -->
    <el-image-viewer
        v-if="showPreViewImg"
        :initial-index="preViewImgIndex"
        @close="showPreViewImg=false"
        :url-list="preViewImgs"
    />

    <!-- 预览ppt -->
    <div class="ppt-preview-box" v-if="showPreViewPPT">
        <el-image-viewer
            v-if="showPreViewPPT"
            :initial-index="preViewPPTIndex"
            @close="showPreViewPPT=false"
            :url-list="pptImgs"
        />
    </div>
    

    <!-- 免责申明 -->
    <Disclaimer v-model:show="showDisclaimers"/>

    <!-- 播放清单设置 -->
    <el-dialog v-model="showAudioPlayListSet" :close-on-click-modal="false" @closed="closeShowAttentionPop" custom-class="audioplaylist-popup" draggable width="40%">
        <template #header>
            <span style="font-weight:bold">播放列表</span>
            <span style="margin-left:10px;cursor: pointer;" @click="showAttentionPop=true">
                <img src="@/assets/icon-atten.png" alt="" style="width:11px;height:11px;margin-right:4px">
                <span style="color:#999;font-size:12px">操作提示</span>
            </span>
        </template>
        <div class="audioplaylist-wrap">
            <div class="item" v-for="item in info.report_chapter_list" :key="item.report_chapter_id">
                <span>{{item.report_chapter_type_name}}</span>
                <el-switch
                    :model-value="item.is_close==0?true:false"
                    @change="handleAudioSet(item)"
                />
            </div>
            <div class="attention-box" ref="attentionPop" v-if="showAttentionPop">
                <h2 style="color:#F3A52F;font-size:16px">配置播放列表</h2>
                <p>
                    品种<span style="color:#F3A52F">开启</span>，表示添加到待播放列表；<br>
                    品种<span style="color:#F3A52F">关闭</span>，表示从待播放列表中清除；<br>
                    您可以根据自己关注的品种进行选择~
                </p>
                <img src="@/assets/icon-close-2.png" alt="" style="width:9px;height:9px;position: absolute;top:15px;right:15px" @click="closeShowAttentionPop">
            </div>
        </div>
    </el-dialog>
</template>

<style lang="scss">
.audioplaylist-popup{
    .el-dialog__header{
        border-bottom: 1px solid #F2F2F2;
    }
}
</style>

<style lang="scss" scoped>
.report-detail-page{
    .report-box{
        .title{
            display: inline;
            font-size: 24px;
            font-weight: bold;
            margin-left: -14px;
        }
        .time{
            color: #666;
            margin-top: 20px;
            margin-bottom: 30px;
            font-size: 16px;
            span:last-child{
                float: right;
            }
        }
        .tips{
            font-size: 18px;
            margin-bottom: 30px;
            &::before{
                content: '';
                width: 6px;
                display: inline-block;
                background-color: #F3A52F;
                margin-right: 10px;
            }
        }
        .abstract{
            font-size: 18px;
            margin-bottom: 20px;
        }
        .rich-content{
            margin-top: 30px;
            line-height: 1.8;
            font-size: 18px;
            position: relative;
            :deep(img){
                width: 100% !important;
            }
            :deep(span){
                font-size: 18px !important;
                line-height: 1.8 !important;
                background-color: rgba(255, 255, 255, 0) !important;
            }
            :deep(ul,ol,li,p){
                font-size: 18px !important;
                line-height: 1.8 !important;
                background-color: rgba(255, 255, 255, 0) !important;
            }
            :deep(iframe){
                width: 100% !important;
            }
        }
        .right-fix-opt-box{
            position: fixed;
            right: 33px;
            bottom: 150px;
            z-index: 1000;
            .ppt-icon{
                width: 54px;
                height: 54px;
                object-fit: cover;
                display: block;
                margin: 0 auto;
            }
            .collect-icon{
                width: 57px;
                height: 57px;
                object-fit: cover;
                display: block;
                margin: 0 auto;
            }
        }
    }
    .no-auth-wrap{
        text-align: center;
        color: #F3A52F;
        margin-top: -140px;
        padding-top: 140px;
        min-height: 200px;
        position: relative;
        z-index: 5;
        background: linear-gradient(360deg, #FFFFFF 60%, rgba(255, 255, 255, 0) 88%);
        .btn{
            width: 218px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 20px;
        }
    }
    
    .chapter-list-wrap{
        .top-box{
            height: 140px;
            background-color: rgba($color: #000000, $alpha: 0.7);
            background-size: cover;
            position: relative;
            margin-bottom: 20px;
            padding: 39px 34px 20px 34px;
            color: #fff;
            .title{
                font-size: 25px;
                font-weight: 600;
            }
            .sub-title{
                margin-top: 8px;
            }
            .time-box{
                position: absolute;
                right: 34px;
                bottom: 30px;
                display: flex;
                align-items: center;
                .day{
                    padding-right: 5px;
                    font-size: 23px;
                    font-weight: 600;
                    border-right: 1px solid #fff;
                    margin-right: 5px;
                }
            }
            .audio-set-box{
                width: 46px;
                height: 28px;
                position: absolute;
                top: 20px;
                right: 34px;
                cursor: pointer;
            }
            .audio-play-box{
                width: 88px;
                height: 24px;
                background-color: #F3A52F;
                border-radius: 24px;
                position: absolute;
                bottom: 20px;
                right: 34px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #FFFFFF;
                cursor: pointer;
                .icon{
                    width: 14px;
                    height: 14px;
                    background-image: url('@/assets/audio-pause-white.png');
                    background-size: cover;
                    margin-right: 5px;
                }
                .icon-active{
                    background-image: url('@/assets/audio-doing-white.png');
                }
            }
        }
        .top-box-week{
            padding: 20px 34px;
            .title{
                margin-top: 10px;
            }
            .time-box{
                position: relative;
                bottom: 0;
                right: 0;
            }
        }
        .list-box{
            min-height: 100px;
            background-color: #fff;
            position: relative;
            .item{
                align-items: center;
                padding: 20px 0;
                border-bottom: 1px solid #E5E5E5;
                cursor: pointer;
                .img-box{
                    width: 55px;
                    height: 55px;
                    box-sizing: border-box;
                    border-radius: 8px;
                    border: solid 1px #E5E5E5;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 20px;
                    .img{
                        width: 35px;
                        height: 35px;
                    }
                }
                .con{
                    flex: 1;
                    position: relative;
                    
                    .title{
                        margin-bottom: 8px;
                        font-weight: bold;
                        
                        .tag{
                            font-size: 12px;
                            color: #fff;
                            font-weight: normal;
                            display: inline-block;
                            background-color: #1E88E5;
                            line-height: 20px;
                            padding: 0 6px;
                            border-radius: 4px;
                            margin-left: 10px;
                        }
                    }
                    &:hover{
                        .title{
                            color: #F3A52F;
                        }
                    }
                    .sub-title{
                        color: #333;
                    }
                    .update-time{
                        position: absolute;
                        top: 0;
                        right: 0;
                        color: #999999;
                        font-size: 14px;
                    }
                    .audio-icon-box{
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        width: 21px;
                        height: 21px;
                        background-image: url('@/assets/audio-pause.png');
                        background-size: cover;
                    }
                    .audio-icon-box--active{
                        background-image: url('@/assets/audio-doing.png');
                    }
                }
            }
        }
    }

    .right-aside-box{
        .hot-box{
            .img-con{
                position: relative;
                .cloumn-box{
                    padding: 17px 15px;
                    .title{
                        font-size: 16px;
                        font-weight: bold;
                        color: #fff;
                        width: 105px;
                    }
                    .user{
                        font-size: 12px;
                        color: #fff;
                        margin-top: 4px;
                        width: 105px;
                    }
                    .stage{
                        margin-top: 10px;
                        color: #F3A52F;
                        font-size: 12px;
                    }
                }
                .rep-box{
                    .stage{
                        position: absolute;
                        bottom: 27px;
                        left: 16px;
                        color: #F3A52F;
                        font-size: 12px;
                    }
                }
            }
        }
    }
}
.audioplaylist-wrap{
    max-height: 70vh;
    overflow-y: auto;
    position: relative;
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #F2F2F2;
        font-size: 16px;
        padding: 15px 20px;
    }
    .attention-box{
        position: absolute;
        top: 50px;
        right: 20px;
        border: 1px solid #F2F2F2;
        border-radius: 8px;
        background-color: #fff;
        width: 300px;
        box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.06);
        padding: 16px;
    }
}
.disclaimers-box{
    max-height: 60vh;
    overflow: auto;
}

.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: 10px 0;
    .chapter-title {
        display: flex;
        align-items: center;
        font-size: 15px;
        .type {
            height: fit-content;
            display: inline-block;
            color: #fff;
            padding: 5px 10px;
            background-color: #E6A23C;
            border-radius: 4px; 
            margin-right: 10px;
        }
        .chapter-title-text {
            font-size: 15px;
        }
    }
}
</style>