<template>
<van-pull-refresh v-model="loading" disabled style="min-height:100vh">
    <div class="report-detail-page" v-if="info" :style="{paddingBottom:$store.state.hzyb.audioData.url&&'80px'}">
        <!-- 晨报、周报章节 -->
        <div class="chapter-list-wrap" v-if="['晨报','周报'].includes(info.report_info.classify_name_first)">
            <div class="top-box" :style="'background-image:url(' + info.report_info.banner_url + ')'">
                <div class="title">{{info.report_info.classify_name_first}}</div>
                <div class="sub-title">{{info.report_info.title}}</div>
                <div class="flex top-bot">
                    <div class="flex time-box">
                        <div class="day">{{formatChapterTime(info.report_info.publish_time,'day')}}</div>
                        <div>
                            <div>{{formatChapterTime(info.report_info.publish_time,'week')}}</div>
                            <div>{{formatChapterTime(info.report_info.publish_time,'year-month')}}</div>
                        </div>
                    </div>
                    <div class="num">第{{info.report_info.stage}}期</div>
                </div>
            </div>
            <div class="list-box">
                <div class="flex item" v-for="item in chapterList" :key="item.report_chapter_id" @click="goChapterDetail(item)">
                    <van-image class="img" :src="item.report_chapter_type_thumb" mode="aspectFill" />
                    <div class="con">
                        <div class="title">
                            {{item.report_chapter_type_name}} 
                            <text class="tag" :style="{backgroundColor:getTagColor(tag)}" v-for="tag in item.trend.split(',')" :key="tag">{{tag}}</text>
                        </div>
                        <div class="van-multi-ellipsis--l2 sub-title">{{item.title}}</div>
                        <div class="update-time">更新至：{{formatChapterTime(item.publish_time,'year-month-day')}}</div>
                    </div>
                </div>
            </div>
            <!-- 无权限 -->
            <div class="no-auth-box" v-if="!info.auth_ok">
                <img class="img" 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="btn" @click="handleGoApply">立即申请</div>
                </div>
                <div class="apply-box" v-else>
                    <div>您暂无权限查看报告 </div>
                    <div>若想查看请联系对口销售：{{info.permission_check.name}}</div>
                    <a class="btn" :href="'tel:'+info.permission_check.mobile" tag="div">立即联系</a>
                </div>
            </div>
        </div>

        <!-- 报告详情 -->
        <div :class="['main-box',!info.auth_ok&&'main-box-noauth']" v-else>
            <!-- <div class="title">【第{{info.report_info.stage}}期｜{{info.report_info.classify_name_second}}】{{info.report_info.title}}</div> -->
            <div class="title">{{title}}</div>
            <div class="flex time">
                <span>{{info.report_info.author}}</span>
                <span>{{formatTime(info.report_info.publish_time)}}</span>
            </div>
            <!-- 音频模块 -->
            <AudioBox :audioData="audioData" v-if="info.report_info.video_url&&info.report_info.video_play_seconds>0"></AudioBox>
            <div class="flex tips">
                <div>
                    <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 class="rich-content">
                <!-- <div v-html="info.report_info.content" v-if="info.auth_ok"></div> -->
                <div v-if="info.auth_ok">
                    <ul>
                        <li v-for="item in realContent" :key="item" v-html="item"></li>
                    </ul>
                </div>
                <div v-html="info.report_info.content_sub" v-else></div>
            </div>

            <!-- 无权限 -->
            <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="btn" @click="handleGoApply">立即申请</div>
                </div>
                <div class="apply-box" v-else>
                    <div>您暂无权限查看报告 </div>
                    <div>若想查看请联系对口销售：{{info.permission_check.name}}</div>
                    <a class="btn" :href="'tel:'+info.permission_check.mobile" tag="div">立即联系</a>
                </div>
            </div>

            <!-- 返回顶部 -->
            <img v-if="showToTop&&info.auth_ok" @click="handleBackTop" class="back-top-img" src="@/assets/hzyb/report/back-top.png" mode="aspectFill"/>

        </div>
        
        <!-- 免责声明 -->
        <van-popup :show="showDisclaimers" @close="showDisclaimers=false" round closeable>
            <div class="disclaimers-box">
                <div style="text-align:center;font-size:16px;font-weight:bold;margin-bottom:20px">免责声明</div>
                <div style="margin-bottom:10px">1、本报告仅供弘则弥道（上海）投资咨询有限公司正式签约的机构客户使用，不会仅因接收人/接受机构收到本报告而将其视为客户。</div>
                <div style="margin-bottom:10px">2、本报告根据国际和行业通行的准则，以合法渠道获得这些信息，尽可能保证可靠、准确和完整，但并不保证报告所述信息的准确性和完整性，也不保证本报告所包含的信息或建议在本报告发出后不会发生任何变更。本报告中所提供的信息仅供参考。</div>
                <div style="margin-bottom:10px">3、报告中的内容不对投资者做出的最终操作建议做任何的担保，也没有任何形式的分享投资收益或者分担投资损失的书面或口头承诺。不作为客户在投资、法律、会计或税务等方面的最终操作建议，也不作为道义的、责任的和法律的依据或者凭证，无论是否已经明示或者暗示。</div>
                <div style="margin-bottom:10px">4、在任何情况下，本公司不对客户/接受人/接受机构因使用报告中内容所引致的一切损失负责任，客户/接受人/接受机构需自行承担全部风险。</div>
            </div>
        </van-popup>

        <!-- 申请提示弹窗 -->
        <van-popup :show="pupData.show" @close="pupData.show=false" :close-on-click-overlay="false">
            <div class="global-pup">
                <div class="content">
                    <div v-html="pupData.content"></div>
                </div>
                <div class="flex bot">
                    <div @click="pupData.show=false">知道了</div>
                </div>
            </div>
        </van-popup>
    </div>
    
</van-pull-refresh>
</template>

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

import {apiGetNewReportDetail} from '@/api/hzsl/report'
import {apiApplyPermission} from '@/api/hzyb/user'
import {Popup,Image as VanImage,PullRefresh} from 'vant'
import AudioBox from '@/views/hzyb/report/components/AudioBox.vue'
import _ from 'lodash';
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
export default {
    components:{
        [Popup.name]:Popup,
        [VanImage.name]:VanImage,
        [PullRefresh.name]:PullRefresh,
        AudioBox,
    },
    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,
            fromPage: '', // message定位到留言板
        }
    },
    created() {
        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: {
        
        //获取报告详情
        async getDetail(){
            const params = this.$route.query;
            const res=await apiGetNewReportDetail(params)
            if(res.code===200){
                this.info=res.data
                this.audioData={
                    auth_ok:res.data.auth_ok,
                    video_name:res.data.report_info.video_name,
                    video_play_seconds:res.data.report_info.video_play_seconds,
                    video_url:res.data.report_info.video_url,
                    video_img:res.data.report_info.video_img
                }
                this.chapterList=res.data.report_chapter_list
                document.title = res.data.report_info.classify_name_first

                this.splitContentHandle(this.info.report_info.content);

                if(!res.data.auth_ok){
                    // 获取详情如果为联系销售根据判断条件是否主动申请一次
                    if(this.info.permission_check.type=='contact'&&!this.info.permission_check.customer_info.has_apply){
                        if(this.info.permission_check.customer_info.status=='冻结'||(this.info.permission_check.customer_info.status=='试用'&&this.info.permission_check.customer_info.is_suspend==1)){
                            apiApplyPermission({
                                company_name:this.info.permission_check.customer_info.company_name,
                                real_name:this.info.permission_check.customer_info.name,
                                source:4,
                                from_page:'报告详情'
                            }).then(res=>{
                                if(res.code===200){
                                    console.log('主动申请成功');
                                }
                            }) 
                        }
                    }
                }

                // 处理报告标题数据
                if(!['晨报','周报'].includes(res.data.report_info.classify_name_first)){
                    //【第{{info.report_info.stage}}期｜{{info.report_info.classify_name_second}}】{{info.report_info.title}}
                    const  time=moment(res.data.report_info.publish_time).format('MMDD')
                    if(res.data.report_info.classify_name_second==res.data.report_info.title){
                        this.title=`【第${res.data.report_info.stage}期】${res.data.report_info.title}（${time}）`
                    }else{
                        this.title=`【第${res.data.report_info.stage}期｜${res.data.report_info.classify_name_second}】${res.data.report_info.title}（${time}）`
                    }
                }

            }
        },

        /*内容分割*/
        splitContentHandle(content) {
            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;
        },

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

        loadMoreHandle: _.throttle(function() {

            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动的高度
            if(scrollTop>window.outerHeight){
                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) {
            console.log('触底')
            this.page_no = this.page_no+1;
            this.loadContent();
            }
        },300),
        
        //返回顶部
        handleBackTop(){
            document.body.scrollTop=document.documentElement.scrollTop=0
        },

        //跳转章节详情
        goChapterDetail({http_url}){
            let params = http_url.split("?")[1];
            location.href = `${http_url}&fromPage=reportdetail`;
            // location.href=`${location.origin}/xcx_h5/hzsl/report/new/chapter/detail?${params}&fromPage=reportdetail`
        },
        
        // 格式化时间
        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')
            }
        },


        //点击申请
        async handleGoApply(){
            if(this.info.permission_check.type=='apply'){
                if(this.info.permission_check.customer_info.has_apply){// 已经申请过
                    this.pupData.show=true
					this.pupData.content=`<p>您已提交过申请，请耐心等待</p>`
                }else{
                    this.pupData.show=true
                    this.pupData.content=`<p>若想查看请联系对口销售</p>`
                }
                
            }
        },

        // 设置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{
        font-size: 34px;
        margin-bottom: 51px;
        &::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;
        }
        :deep(p){
            font-size: 36px !important;
            line-height: 1.8 !important;
        }
        :deep(iframe){
            width: 100% !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;
      }
    }

    .back-top-img{
        position: fixed;
        z-index: 99;
        width: 76px;
        height: 76px;
        right: 34px;
        bottom: 150px;
    }

    .chapter-list-wrap{
        .top-box{
            height: 418px;
            background-color: rgba($color: #000000, $alpha: 0.7);
            background-size: cover;
            color: #fff;
            position: relative;
            .title{
                text-align: center;
                font-size: 34px;
                font-weight: 600;
                padding-top: 78px;
            }
            .sub-title{
                font-size: 32px;
                text-align: center;
                width: 70%;
                margin-left: auto;
                margin-right: auto;
            }
            .top-bot{
                position: absolute;
                bottom: 70px;
                left: 34px;
                right: 34px;
                justify-content: space-between;
                align-items: flex-end;
                .time-box{
                    align-items: center;
                    font-size: 24px;
                    .day{
                        font-size: 32px;
                        border-right: 1px solid #fff;
                        padding-right: 15px;
                        margin-right: 15px;
                    }
                }
                
            }
        }
        .list-box{
            margin-top: -50px;
            border-top-left-radius: 40px;
            border-top-right-radius: 40px;
            min-height: 100px;
            background-color: #fff;
            position: relative;
            z-index: 2;
            .item{
                padding: 30px 34px;
                border-bottom: 1px solid #E5E5E5;
                .img{
                    width: 104px;
                    height: 104px;
                    // background-color: #f5f5f5;
                    flex-shrink: 0;
                    margin-right: 20px;
                }
                .con{
                    flex: 1;
                    position: relative;
                    .title{
                        font-size: 28px;
                        color: #57768D;
                        font-weight: bold;
                        margin-bottom: 5px;
                        .tag{
                            font-size: 20px;
                            color: #fff;
                            font-weight: normal;
                            display: inline-block;
                            background-color: #1E88E5;
                            line-height: 37px;
                            padding: 0 6px;
                            border-radius: 4px;
                            margin-left: 10px;
                        }
                    }
                    .sub-title{
                        color: #999;
                    }
                    .update-time{
                        position: absolute;
                        top: 0;
                        right: 0;
                        color: #D4D4D4;
                        font-size: 20px;
                    }
                }
            }
        }
        .no-auth-box{
            text-align: center;
            font-size: 32px;
            color: #E3B377;
            img{
                width: 100%;
                margin-bottom: 50px;
            }
            .btn{
                width: 90%;
                margin-left: auto;
                margin-right: auto;
                line-height: 80px;
                background-color: #E6B77D;
                border-radius: 4px;
                color: #fff;
                margin-top: 100px;
                display: block;
            }
        }
    }
}
</style>