<script setup>
import { computed, ref, onMounted,nextTick } from "vue";
import { apiGetReportDetail } from "@/api/hzyb/report.js";
import { getWxConfig } from '@/api/hzyb/common.js'
import { useRoute, useRouter } from "vue-router";
import {ImagePreview } from 'vant'
import LeaveMessage from '../components/leaveMessage/index.vue'
import {useWaterMark} from '../hooks/watermark'
const route = useRoute();
const router=useRouter()
document.title = "报告详情";

localStorage.setItem('hzyb-token',route.query.token)
localStorage.setItem('hzyb-userId',route.query.userId)

// 配置wxjssdk (没用，本来是为了解决pc上小程序不能使用previewImage 问题)
// const setWxConfig=async ()=>{
//     const res=await getWxConfig({token:route.query.token})
//     if(res.code===200){
//         wx.config({
//             debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
//             appId: res.data.app_id, // 必填，公众号的唯一标识
//             timestamp: res.data.timestamp, // 必填，生成签名的时间戳
//             nonceStr: res.data.nonce_str, // 必填，生成签名的随机串
//             signature: res.data.signature,// 必填，签名
//             jsApiList: ['previewImage'] // 必填，需要使用的JS接口列表
//         });
//         wx.ready(function(){
//         // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
//             console.log('ready');
//         });
//     }
// }
// setWxConfig()

//水印盒子
let waterMarkBox=ref('')

// 获取用户信息
import {apiUserInfo} from '@/api/hzyb/user'
const getUserInfo=async ()=>{
    const { code,data }=await apiUserInfo({Authorization: localStorage.getItem('hzyb-token')})
    if(code===200){
        nextTick(()=>{
            useWaterMark(data.mobile,waterMarkBox)
        })
    }
}

let info = ref(null);
let topBg=ref(null)
let noAuth = ref(false);
const getDetail = async () => {
    const res = await apiGetReportDetail({
        Authorization: route.query.token,
        research_report_id: route.query.research_report_id,
    });
    if (res.code === 200) {
        info.value = res.data;
        let temTopBg
        switch (res.data.research_report_info.type) {
            case 'day':
                temTopBg=await import('@/assets/hzyb/daybanner.jpg')
                break;
            case 'week':
                temTopBg=await import('@/assets/hzyb/weekbanner.jpg')
                break;
            case 'two_week':
                temTopBg=await import('@/assets/hzyb/twoweekbanner.jpg')
                break;
            case 'month':
                temTopBg=await import('@/assets/hzyb/monthbanner.jpg')
                break;
            case 'other':
                temTopBg=await import('@/assets/hzyb/otherbanner.jpg')
                break;
            default:
                temTopBg=await import('@/assets/hzyb/daybanner.jpg')
                break;
        }
        topBg.value=temTopBg.default

        noAuth.value = false;
        getUserInfo()
    } else if (res.code == 400) {
        noAuth.value = true;
    }
};
getDetail();

const subval=(val,l,r)=>{//时间格式化
    return val.substring(l,r);
}

const getWeek=(dateString)=>{//获取周几
    let date;
	if( dateString == null || typeof dateString == "undefined" ){
		date = new Date();
	}else{
		let dateArray = dateString.split("-");
		date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
	}
	return "周" + "日一二三四五六".charAt(date.getDay());
}

let showPreViewImg=ref(false)
let preViewImgs=ref([])
let preViewImgIndex=ref(0)
const VanImagePreview = ImagePreview.Component

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);
            });
            preViewImgs.value=imgArray
            preViewImgIndex.value=imgArray.indexOf(curImageSrc)||0
            showPreViewImg.value=true
            // wx.previewImage({current:curImageSrc,urls:imgArray});
            // ImagePreview({
            //     images: imgArray,
            //     startPosition: imgArray.indexOf(curImageSrc)||0,
            //     overlayStyle:{
            //         background: 'rgba(0, 0, 0, 0.9)'
            //     },
            //     teleport:'.report-detail'
            // });
	    }
    })
})

/* 点赞 */
const giveOrCancelLike = ({like_enabled,like_num}) => {
    info.value.like_num = like_num;
    info.value.like_enabled = like_enabled;
}

// 周度报告列表跳转详情
const goDetail=(e)=>{
    router.push({
        path:"/hzyb/activity/report/week/detail",
        query:{
            token:route.query.token,
            report_type_id:e.ResearchReportTypeId,
            type:info.value.research_report_info.type,
            timestamp:new Date().getTime()
        }
    })
}
</script>

<template>
    <div class="report-detail" v-if="info">
        <div class="top-wrap" :style="{backgroundImage:'url(' + topBg + ')'}">
            <h1 class="title">{{info.research_report_info.reportVariety}}</h1>
            <h3 class="sub-title">{{info.research_report_info.researchReportName.substring(info.research_report_info.researchReportName.indexOf('】')+1)}}</h3>
            <div class="time-box">
                <div class="num">{{subval(info.research_report_info.researchReportDate,8,10)}}</div>
                <div class="right">
                    <div>{{getWeek(info.research_report_info.researchReportDate)}}</div>
                    <div>{{subval(info.research_report_info.researchReportDate,0,7)}}</div>
                </div>
            </div>
            <div class="num-box">第{{info.research_report_info.periods}}期</div>
        </div>
        <div class="content-wrap list-content" v-if="['day','week'].includes(info.research_report_info.type)">
            <div class="flex list-item" v-for="item in info.research_report_type_list" :key="item.ResearchReportTypeId" @click="goDetail(item)">
                <div class="left-img">
                    <img :src="item.BannerUrl" alt="">
                </div>
                <div class="right-con">
                    <p style="color:#2E88EB">{{item.ReportChapterTypeName}}</p>
                    <p class="van-multi-ellipsis--l2">{{item.ResearchReportTypeTitle}}</p>
                </div>
            </div>
        </div>

        <template v-else>
            <div class="content-wrap" >
                <div class="water-mark-box" ref="waterMarkBox" style="position: absolute;width:100%;height:100%;z-index: 1"></div>
                <div v-for="item in info.ResearchReportTypeContentList" :key="item.sort" style="position: relative;z-index: 5;">
                    <h2 class="content-title">{{item.content_type?item.content_type:'核心观点'}}</h2>
                    <div v-html="item.content" class="content-text"></div>
                </div>
            </div>

            <!-- 留言点赞模块 -->
            <LeaveMessage
                :info="info"
                @like_change="giveOrCancelLike"
            />
        </template>

        <div class="footer-wrap">
            <img class="img" src="@/assets/hzyb/mzsm.png" alt="" />
            <div class="content">
                <p>1、本报告仅供弘则弥道（上海）投资咨询有限公司正式签约的机构客户使用，不会仅因接收人/接受机构收到本报告而将其视为客户。</p>
                <p>2、本报告根据国际和行业通行的准则，以合法渠道获得这些信息，尽可能保证可靠、准确和完整，但并不保证报告所述信息的准确性和完整性，也不保证本报告所包含的信息或建议在本报告发出后不会发生任何变更。本报告中所提供的信息仅供参考。</p>
                <p>3、报告中的内容不对投资者做出的最终操作建议做任何的担保，也没有任何形式的分享投资收益或者分担投资损失的书面或口头承诺。不作为客户在投资、法律、会计或税务等方面的最终操作建议，也不作为道义的、责任的和法律的依据或者凭证，无论是否已经明示或者暗示。</p>
                <p>4、在任何情况下，本公司不对客户/接受人/接受机构因使用报告中内容所引致的一切损失负责任，客户/接受人/接受机构需自行承担全部风险。</p>
            </div>
        </div>
        <van-image-preview v-model:show="showPreViewImg" :start-position="preViewImgIndex" :images="preViewImgs">
        </van-image-preview>
    </div>
</template>

<style lang="scss">
.report-detail{
    .van-popup{
        background: rgba(0, 0, 0, 0.7) !important;
    }
    .van-image-preview__image{
        background-color: #fff;
    }
}
</style>


<style lang="scss" scoped>
*{
    user-select: none;
    -moz-user-select:-moz-none;
    moz-user-select: none;
    -o-user-select:none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select:none;
}
.flex{
    display: flex;
}
.top-wrap {
    width: 100%;
    height: 412px;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    padding-top: 60px;
    position: relative;
    h1,
    h3 {
        margin: 0;
        padding: 0;
    }
    .title,
    .sub-title {
        text-align: center;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    .title{
        font-size: 52px;
        font-family: '方正行楷';
        letter-spacing: 1px;
    }
    .sub-title {
        font-size: 37px;
        margin-top: 80px;
    }
    .time-box{
        position: absolute;
        left: 30px;
        bottom: 24px;
        display: flex;
        color: #fff;
        align-items: center;
        .num{
            font-size: 40px;
            font-weight: bold;
            padding-right: 10px;
            margin-right: 10px;
            border-right: 1px solid #fff;
        }
        .right{
            font-size: 25px;
        }
    }
    .num-box{
        position: absolute;
        right: 30px;
        bottom: 36px;
        color: #fff;
        font-size: 27px;
    }
}
.footer-wrap {
    background-color: rgb(236, 235, 235);
    padding: 40px 32px;
    .img {
        display: block;
        margin: auto;
        height: 32px;
        margin-bottom: 20px;
    }
    p {
        margin-top: 0;
        margin-bottom: 30px;
    }
    .content {
        background-color: #fff;
        padding: 30px;
        border-radius: 8px;
        line-height: 1.7;
        color: rgb(102, 102, 102);
    }
}
.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;
    overflow: hidden;
    :deep(a){
       word-wrap: break-word;
    }
    :deep(img){
        width: 100%;
        display: block;
        margin: 20px 0;
    }
    .content-title{
        font-size: 38px;
        font-family: '思源黑体';
        margin: 40px 0 15px 0;
    }
    .content-text{
        font-size: 38px;
    }
    :deep(p){
        margin: 0;
        padding: 0;
        background-color: rgba(255, 255, 255, 0) !important;
    }
    :deep(li) {
        list-style: inherit !important;
        list-style-position: inside !important;
    }
}
.list-content{
    padding: 40px 0;
    .list-item{
        padding: 30px 30px;
        border-bottom: 1px solid #f3f3f3;
        align-items: center;
        .left-img{
            flex-shrink: 0;
            width: 100px;
            height: 100px;
            border-radius: 8px;
            border: 1px solid #f3f3f3;
            display: flex;
            justify-content: center;
            align-items: center;
            img{
                width: 60px;
                height: 60px;
            }
        }
        .right-con{
            margin-left: 20px;
            font-size: 26px;
        }
    }
}
</style>
