<script setup>
import {onMounted, ref} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {apiReportDetail,apiReportClassifyList} from '@/api/report'
import AvatarPopover from '../../components/AvatarPopover.vue';
import {goYBPCCN,userInfoGo} from '@/utils/common.js'
import NoAuthBox from '@/components/NoAuthBox.vue';
import { ArrowRightBold } from '@element-plus/icons-vue';


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

const userInfo=localStorage.getItem('user_info')?JSON.parse(localStorage.getItem('user_info')):{}


//报告详情
const code=route.query.code
const email=route.query.ShareEmail||0
let info=ref(null)
const hasAuth=ref(false)
const configInfo = ref(null)
async function getReportDetail(){
    const res=await apiReportDetail({
        report_code:code,
        share_email:email
    })
    if(res.code===200){
        info.value=res.data.report
        configInfo.value = { disclaimer:res.data.disclaimer}
        hasAuth.value=res.data.auth_ok
    }
}
getReportDetail()


let showDisclaimers=ref(false)
let wwidth=ref(0)

//预览图片
let preViewImgs=ref([])
let preViewImgIndex=ref(0)
let showPreViewImg=ref(false)

function handlePreviewImg(e){
    const cSrc=e.target.src
    const imgArr=document.querySelectorAll(".html-content img")
    const temArr=Array.prototype.slice.call(imgArr)||[]
    preViewImgs.value=temArr.map(item=>item.src)
    const index=preViewImgs.value.indexOf(cSrc)
    preViewImgIndex.value=index||0
    if(index==-1) return
    showPreViewImg.value=true
}

//分类
let navList=ref([])
let showFilter=ref(false)
let filterSize=ref('30%')

async function getReportNav(){
    const res=await apiReportClassifyList()
    if(res.code===200){
        const arr=res.data.list||[]
        navList.value=[
            ...arr,
            {
                id: 0,
                classify_name: "ABOUT US",
                child: []
            },
        ]
    }
}
getReportNav()

function handleChangeRootClassify(item){
    if(item.id==0){
        router.replace({
            path:'/'
        })
    }    
}

function handleChangeFirstClassify(item,pitem){
        router.replace({
            path:'/report/index',
            query:{
                firstclassifyid:item.id,
                secclassifyid:0,
                rootclassifyid:pitem.id
            }
        })

}

function handleChangeSecClassify(item,pitem,rootItem){
        router.replace({
            path:'/report/index',
            query:{
                firstclassifyid:pitem.id,
                secclassifyid:item.id,
                rootclassifyid:rootItem.id
            }
        })

}

const nodeClick=(rootItem,data,node)=>{
    if(!data.child){
        // 二级分类
        handleChangeSecClassify(data,node.parent.data,rootItem)
    }else{
        // 一级分类
        handleChangeFirstClassify(data,rootItem)
    }
}

onMounted(()=>{
    wwidth.value=window.innerWidth
})

</script>

<template>
    <div class="report-detail-page" v-if="info">
        <div class="header-wrap">
            <div class="navigation-row" @click="showFilter=true;filterSize='30%'" >
                <img class="menu-icon-PC" src="@/assets/menu-blue.svg" />
                <span >Table of Contents</span>
                <!-- <span v-for="item in reportClassify" :key="item.id" style="margin-right:20px;cursor: pointer;" @click="goIndex(item)">{{item.classify_name}}</span> -->
            </div>
            <div class="header-right">
                <div @click="$router.replace('/')" class="us-tab">ABOUT US</div>
                <img @click="goYBPCCN" class="ybCN-jump" src="@/assets/icons/yb-cn.png" />
                <AvatarPopover :user-info="userInfo"></AvatarPopover>
            </div>
        </div>
        <div class="mobile-header-wrap">
            <img class="menu-icon" @click="showFilter=true;filterSize='100%'" src="@/assets/menu.svg" alt="">
            <span @click="$router.replace('/')" style="cursor: pointer;">HORIZON INSIGHTS</span>
            <img src="@/assets/icons/avatar.svg" class="user-info-avatar" @click="userInfoGo" />
        </div>
        <div class="no-select-text detail-wrap">
            <h2 class="title">【No.{{info.stage}}|FICC】{{info.title}} ({{info.create_time.substring(5, 7)}}{{info.create_time.substring(8, 10)}})</h2>
            <p class="time">
                <span>{{info.author}}</span>
                <span>{{info.publish_time}}</span>
            </p>
            <div class="abstract-box">
                <div>Abstract：{{info.abstract}}</div>
                <div v-if="info.key_takeaways" style="margin-top:20px">Key Takeaways：<span v-html="info.key_takeaways"></span></div>
                <div class="notes" v-if="configInfo.disclaimer">*Note: Please be sure to read the <span style="color:#00459F" @click="showDisclaimers=true">disclaimer</span></div>
            </div>
            <div class="time-classify-name">
                <span>{{info.classify_name_root}}</span>
                <span v-show="info.classify_name_first!==info.classify_name_root">{{info.classify_name_first}}</span>
                <span v-show="info.classify_name_first!==info.classify_name_second && 
                    info.classify_name_root!==info.classify_name_second">{{info.classify_name_second}}</span>
            </div>
            <div class="overview-box">
                <div class="label">Overview:</div>
                <div v-html="info.overview"></div>
            </div>
            <NoAuthBox v-if="!hasAuth"/>
            <div class="html-content" v-html="info.content" @click="handlePreviewImg" v-else>
            </div>
        </div>
    </div>
    <!-- 免责申明 -->
    <el-dialog v-model="showDisclaimers" title="Disclaimers" center draggable :width="wwidth<800?'90%':'40%'">
        <div class="disclaimers-box" v-html="configInfo.disclaimer"></div>
    </el-dialog>
    <!-- 图片预览 -->
    <el-image-viewer
        v-if="showPreViewImg"
        :initial-index="preViewImgIndex"
        @close="showPreViewImg=false"
        :url-list="preViewImgs"
    />
    <!-- 筛选 -->
    <el-drawer
        v-model="showFilter"
        direction="ltr"
        :size="filterSize"
        class="self-drawer-box"
    >
        <div class="filter-wrap">
            <div class="item" v-for="item in navList" :key="item.id">
                <span  class="title" @click="handleChangeRootClassify(item)">{{item.classify_name}}</span>
                <!-- <div class="text" v-for="_item in item.child" :key="_item.id" @click="handleChangeSecClassify(_item,item)">{{_item.classify_name}}</div> -->
                <el-tree :data="item.child" node-key="id" :props="{label:'classify_name',children:'child'}" ref="treeRefList"
                :icon="ArrowRightBold" :indent="0" @node-click="(data,node)=> nodeClick(item,data,node)" v-if="item.id!=0">
                    <template #default="{ node, data }">
                        <span>{{ data.classify_name }}</span>
                    </template>
                </el-tree>
            </div>
        </div>
    </el-drawer>
</template>

<style lang="scss">
.self-drawer-box{

    .el-drawer__header{
        margin-bottom: 0;
    }
}

.filter-wrap{
    .el-tree-node__content{
        height: 42px;
        &:hover{
            color: #00459F;
            background-color: transparent;
        }
    }
}

.user-info-popper{
    width: unset!important;
    .user-info-message{
        padding: 28px;
        .user-info-item{
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: #333333;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
    }
}
</style>

<style lang="scss" scoped>
.report-detail-page{
    padding: 0 20px 20px;
}
@media (max-width: 768px){
    .report-detail-page{
        padding: 0;
    }
    .detail-wrap{
        padding: 0 17px;
    }
}


.header-wrap{
    position: sticky;
    top: 0;
    border-bottom: 1px solid #E6E6E6;
    padding: 44px 0;
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    z-index: 99;
    background-color: #fff;
    .navigation-row{
        cursor: pointer;
        display: flex;
        align-items: center;
        .menu-icon-PC{
            height: 30px;
            width: 30px;
            margin-right: 8px;
        }
        span{
            color:#00459F;
            font-size: 20px;
            font-weight: 400;
        }
    }
    .header-right{
        display: flex;
        align-items: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 17px;
        z-index: 30;
        .us-tab{
            font-size: 20px;
            font-weight: 400;
            color:#00459F;
            cursor: pointer;
        }
        .ybCN-jump{
            height: 30px;
            cursor: pointer;
            margin: 0 40px;
        }
    }
}
// @media (max-width: 900px){
//     .header-wrap{
//         .navigation-row{
//             span{
//                 font-size: 16px;
//             }
//         }
//     }
// }
.mobile-header-wrap{
    font-size: 17px;
    box-shadow: 0px 4px 20px rgba(180, 180, 180, 0.16);
    padding: 15px 0;
    text-align: center;
    font-weight: bold;
    color: var(--el-color-primary);
    border-bottom: 1px solid#E6E6E6;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 99;
    display: none;
    position: relative;
    .menu-icon{
        position: absolute;
        left: 17px;
        top: 50%;
        transform: translateY(-50%);
        width: 17px;
    }
    .user-info-avatar{
        display: flex;
        align-items: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 17px;
        height: 18px;
    }
}
@media (max-width: 768px){
    .header-wrap{
        display: none;
    }
    .mobile-header-wrap{
        display: block;
    }
}


.detail-wrap{
    padding-top: 40px;
    .title{
        font-size: 40px;
        display: inline;
        margin-left: -20px;
    }
    .time{
        color: #999;
        font-size: 18px;
        margin-bottom: 60px;
        margin-top: 30px;
        span:first-child{
            margin-right: 40px;
        }
    }
    .abstract-box{
        font-size: 18px;
        position: relative;
        padding-left: 24px;
        .notes{
            margin-top: 20px;
        }
        &::before{
            content: '';
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background-color: var(--el-color-primary);
        }
    }
    .time-classify-name{
        margin-top: 30px;
        span{
            display: inline-flex;
            font-size: 14px;
            color: #000;
            background-color: #ECF4FF;
            padding: 0 10px;
            height: 24px;
            box-sizing: border-box;
            border-radius: 24px;
            align-items: center;
            justify-content: center;
            min-width: 68px;
            margin-right: 12px;
            margin-bottom: 6px;
        }
    }
    .overview-box{
        margin-top: 34px;
        padding: 20px;
        margin-bottom: 20px;
        background: rgba(77, 130, 191, 0.1);
        border: 1px solid #E2E2E2;
        line-height: 1.5;
        .label{
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 20px;
        }
    }
    .html-content{
        //line-height: 1.8;
        font-size: 18px;
        :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(p){
            font-size: 18px !important;
            //line-height: 1.8 !important;
            background-color: rgba(255, 255, 255, 0) !important;
            margin:0;
        }
        :deep(iframe){
            width: 100% !important;
        }
        :deep(span.fr-emoticon) {
            width: 18px !important;
            height: 18px !important;
            background-repeat: no-repeat !important;
            background-size: cover !important;
            display: inline-block !important;
            vertical-align: middle !important;
        }
        :deep(ol){
            list-style-position: inside !important;
            margin:0;
            padding:0;
            li{
                list-style-type: inherit;
            }
        }
    }
}
@media (max-width: 768px){
    .detail-wrap{
        padding-top: 20px;
        .title{
            font-size: 20px;
            margin-left: -10px;
        }
        .time{
            font-size: 14px;
            margin-top: 15px;
            margin-bottom: 30px;
            span:first-child{
                margin-right: 15px;
            }
        }
        .abstract-box{
            font-size: 14px;
            padding-left: 15px;
        }
        .overview-box{
            padding: 10px;
            .label{
                margin-bottom: 10px;
                font-size: 16px;
            }
        }
        .time-classify-name{
            margin-top: 15px;
            span{
                font-size: 12px;
            }
        }
        .overview-box{
            margin-top: 14px;
            padding: 10px;
            margin-bottom: 10px;
            .label{
                margin-bottom: 10px;
            }
        }
    }
}

.filter-wrap{
    .item{
        margin-bottom: 50px;
        .title{
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 30px;
            display: block;
            cursor: pointer;
        }
        .text{
            cursor: pointer;
            font-size: 18px;
            margin-bottom: 20px;
            &:hover{
                color: var(--el-color-primary);
            }
        }
    }
}

</style>