<script setup>
import {ref,reactive,onMounted,nextTick} from 'vue'
import { useRoute, useRouter } from "vue-router";
import {apiReportClassifyList,apiReportList} from '@/api/report'
import {apiRoadShowVideoList} from '@/api/roadShow'

import { useWindowSize } from '@vueuse/core'
import videoPlayBox from '@/components/VideoPlayBox.vue'
import roadShowList from '@/views/roadShow/List.vue'
import {goYBPCCN,userInfoGo} from '@/utils/common.js'
import AvatarPopover from '../../components/AvatarPopover.vue';
import Pagination from "../../components/Pagination.vue"

import { ArrowRightBold } from '@element-plus/icons-vue';
const { width, height } = useWindowSize()

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

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

//分类
let navList=ref([])
async function getReportClassify(){
    const res=await apiReportClassifyList()

    if(res.code===200){
        navList.value=res.data.list||[]
        console.log(route.query.secclassifyid,route.query.firstclassifyid,route.query.rootclassifyid);
        if(!route.query.rootclassifyid) return 
        let rootItem,firstItem;
        let secondItem={id:+route.query.secclassifyid}
        // 根据Id找对应的分类
        navList.value.map(itR=>{
            if(itR.id == route.query.rootclassifyid){
                rootItem = itR
                rootItem.child.map(itF =>{
                    if(itF.id == route.query.firstclassifyid){
                        firstItem = itF
                    }
                })
            }
        })

        if(route.query.secclassifyid!=0){
            console.log("选中二级分类");
            handleChangeSecClassify(secondItem,firstItem,rootItem)
            return
        }
        if(route.query.firstclassifyid){
            console.log("选中一级分类");
            handleChangeFirstClassify(firstItem,rootItem)
        }
        // initList()
    }
}
getReportClassify()


let listState = reactive({
    rootClassifyId:0, // 顶级分类
    firstClassifyId:0, // 一级分类
    firstClassifyOpt:[],
    // firstClassifyName:'',
    secClassifyId:0, // 二级分类
    secClassifyOpt:[],

    page:1,
    pageSize:10,
    total:0,
    list:[],
    loading:false,
    finished:false,
    reportFinished:false,
    videoPage:1,
    videoPageSize:10,
    videoList:[],
    videoLoading:false,
    videoFinished:false,
})


// 切换顶级分类

function handleChangeRootClassify(item){
    if(width.value<768&&item.id!=0) return
    showFilter.value=false
    if(listState.rootClassifyId===item.id) return
    listState.rootClassifyId=item.id
    listState.firstClassifyOpt=item.child || []
    listState.firstClassifyId=item.child[0]?item.child[0].id:0

    listState.secClassifyId=0

    if(item.child[0] && item.child[0].child.length>0){
        listState.secClassifyOpt=item.child[0].child||[]
    }else{
        listState.secClassifyOpt=[]
    }
    initList()
}

// 切换一级分类
function handleChangeFirstClassify(item,rootItem){
    console.log(rootItem,'rootItem');
    showFilter.value=false
    if(listState.firstClassifyId===item.id) return
    listState.firstClassifyId=item.id
    // listState.firstClassifyOpt=item.classify_name
    listState.secClassifyOpt=item.child||[]
    // listState.secClassifyId=item.child[0]?item.child[0].id:0
    listState.secClassifyId=0

    if(rootItem){
        // 回显父级
        listState.rootClassifyId = rootItem.id
        listState.firstClassifyOpt=rootItem.child || []
    }
    // console.log(listState.secClassifyId,listState.firstClassifyId,listState.rootClassifyId);
    initList()
}
// 切换二级分类
function handleChangeSecClassify(item,fitem,rootItem){
    showFilter.value=false
    if(listState.secClassifyId===item.id) return
    listState.secClassifyId=item.id
    if(rootItem){
        listState.rootClassifyId = rootItem.id
        listState.firstClassifyOpt=rootItem.child || []
    }
    if(fitem){
        listState.firstClassifyId=fitem.id 
        // listState.firstClassifyName=fitem.classify_name
        listState.secClassifyOpt=fitem.child||[]
    }
   initList()
}

//初始化列表
function initList(){
    listState.page=1
    listState.finished=false
    listState.reportFinished=false
    listState.videoFinished=false
    listState.list=[]
    listState.videoList=[]
    getReportList()
    if(listState.secClassifyId!=0){
        getVideoList()
    }
}

// 获取报告列表数据
async function getReportList(){
    listState.loading=true
    const res=await apiReportList({
        page_size:listState.pageSize,
        current:listState.page,
        classify_id_root:listState.rootClassifyId,
        classify_id_first:listState.firstClassifyId,
        classify_id_second:listState.secClassifyId
    })
    setTimeout(() => {
        listState.loading=false
    }, 100);
    if(res.code===200){
        const arr=res.data.list||[]
        // 移动端的报告是滚动加载分页  PC端是分页器加载分页
        
        if(width.value<768){
            listState.list=[...listState.list,...arr]
            if(arr.length<listState.pageSize){
                listState.reportFinished=true
            }
        }else{
            listState.list=arr
        }
        listState.total = res.data.page.total
        if(arr.length<listState.pageSize){
            listState.finished=true
        }
    }
}
//更改页码
const changePageNo=(pageNo)=>{
    listState.page = pageNo
    getReportList()
}
// 切换每页的数量
const changePageSize=(pageSize)=>{
    listState.pageSize = pageSize
    getReportList()
}
// 获取线上路演视频列表数据
async function getVideoList(){
    listState.videoLoading=true
    const res=await apiRoadShowVideoList({
        page_size:listState.videoPageSize,
        current:listState.videoPage,
        classify_id_root:listState.rootClassifyId,
        classify_id_first:listState.firstClassifyId,
        classify_id_second:listState.secClassifyId
    })
    setTimeout(() => {
        listState.videoLoading=false
    }, 100);
    if(res.code===200){
        const arr=res.data.list||[]

        listState.videoList=[...listState.videoList,...arr]

        if(arr.length<listState.videoPageSize){
            listState.videoFinished=true
        }
    }
}

// 格式化视频时长
function getVideoTime(e){
    const minus = parseInt(e / 60);
    const sec = parseInt(e % 60);
    return `${minus > 9 ? minus : "0" + minus}:${sec > 9 ? sec : "0" + sec}`;
}
// 监听页面滚动
function listenScroll(){
    window.onscroll=(e)=>{
        if(!(width.value<768)) return 
        if([0,-1].includes(listState.rootClassifyId)) return
        if(listState.loading||listState.reportFinished) return
        const scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
        const windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        const scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
        if(scrollTop+windowHeight>=scrollHeight){   //考虑到滚动的位置一般可能会大于一点可滚动的高度，所以这里不能用等于
            // console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
            listState.page++
            getReportList()
        }
    }
}

// PC端 视频列表滚动监听
const videoListScroll=(e)=>{
    if(width.value<768) return
    if(listState.rootClassifyId==0) return
    if(listState.videoLoading||listState.videoFinished) return
    const scrollTop = videoBox.scrollTop
    const windowHeight = videoBox.clientHeight
    const scrollHeight = videoBox.scrollHeight
    if(scrollTop+windowHeight>=scrollHeight){
        console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight,'videoBox')
        listState.videoPage++
        getVideoList()
    }
}

listenScroll()

let videoBox;

onMounted(() => {
    videoBox = document.getElementById('video-list-wrap')
})

//跳转详情
function goReportDetail(item){
    const url=router.resolve({
        path:'/report/detail',
        query:{
            code:item.report_code
        }
    })
    window.open(url.href,'_blank')
}
// 视频详情
function goDetail(item){
    const url=router.resolve({
        path:'/roadshow/detail',
        query:{
            code:item.video_code
        }
    })
    window.open(url.href,'_blank')
}

const treeRefList=ref([])

const showFilterFun=()=>{

    if(width.value<768){
        filterSize.value='100%'
    }else{
        filterSize.value='30%'
    }

    showFilter.value=true
    nextTick(()=>{
        console.log(treeRefList.value);
        if(listState.secClassifyId){
            treeRefList.value.map(item => {
                item.setCurrentKey(listState.secClassifyId)
            })
        }
    })
}

const nodeClick=(rootItem,data,node)=>{
    if(!data.child){
        // 二级分类
        handleChangeSecClassify(data,node.parent.data,rootItem)
    }else{
        // 一级分类
        handleChangeFirstClassify(data,rootItem)
    }
}
// 变成纯文本
const html2text=(html)=> {
    const el = document.createElement('div');
    el.id = 'panel';
    el.innerHTML = html
    return el.innerText
}

// 弹窗筛选
let showFilter=ref(false)
let filterSize=ref('30%')

const typeList=["Report","Online Video"]
const contentType = ref(1)
const contentTypeChange=(index)=>{
    contentType.value = index+1
}


//about us 中视频列表
const staticVideoList=ref([
    {
        title:"Bright Spots in China's Property and Steel Demand",
        img:'https://hzstatic.hzinsights.com/static/images/202401/20240123/yZp8M1jSlIXaJJBVB1Emf9CmViJN.png',
        video_code:'8e296a067a37563370ded05f5a3bf3ec'
    },
    {
        title:'Raw Materials Take the Lead: Iron Ore and Coking Coal',
        img:'https://hzstatic.hzinsights.com/static/images/202401/20240123/jpCfMKGHn6Fo11CnbyPjy0RJfh83.png',
        video_code:'33e75ff09dd601bbe69f351039152189'
    },
    {
        title:'Copper and Aluminum: Expectation VS Reality',
        img:'https://hzstatic.hzinsights.com/static/images/202401/20240123/AydKF4864zF3V1zhd8x5RoRBvJE4.png',
        video_code:'02e74f10e0327ad868d138f2b4fdd6f0'
    },
    {
        title:'Changes and Opportunities in Oil Market in 2024',
        img:'https://hzstatic.hzinsights.com/static/images/202401/20240123/sbkhWyDJS4fPGGL3DxfGzqCid80w.png',
        video_code:'4e732ced3463d06de0ca9a15b6153677'
    },
    {
        title:'Polyester Industry Chain Outlook',
        img:'https://hzstatic.hzinsights.com/static/images/202401/20240123/tby5LYa4GmOquauuCmJvCm9amDUl.png',
        video_code:'1ff1de774005f8da13f42943881c655f'
    },
    {
        title:'Will the supply gap of benzene expand or shrink in China?',
        img:'https://hzstatic.hzinsights.com/static/images/202401/20240123/tby5LYa4GmOquauuCmJvCm9amDUl.png',
        video_code:'37693cfc748049e45d87b8c7d8b9aacd'
    }
])

</script>

<template>
    <div class="report-index-page">
        <div class="header-wrap">
            <img class="menu-icon" @click="showFilterFun" src="@/assets/menu.svg" alt="">
            <span @click="handleChangeRootClassify({id: 0,classify_name: 'ABOUT US', child: []})"
             style="cursor: pointer;">HORIZON INSIGHTS</span>
            <div class="search-box" @click="$router.push('/report/search')">
                <img src="@/assets/search.svg" alt="">
                <span style="margin-left:10px">search for</span>
            </div>
            <img src="@/assets/icons/avatar.svg" class="user-info-avatar" @click="userInfoGo" />
            <div class="header-right">
                <img @click="goYBPCCN" class="ybCN-jump" src="@/assets/icons/yb-cn.png" />
                <AvatarPopover :user-info="userInfo"></AvatarPopover>
            </div>
        </div>
        <div class="content-wrap">
        <div class="nav-wrap">
            <div>
                <img class="menu-icon" @click="showFilterFun" src="@/assets/menu.svg" alt="">
                <span 
                    :class="['nav-item',item.id===listState.rootClassifyId?'active':'']" 
                    v-for="item in navList" 
                    :key="item.id"
                    @click="handleChangeRootClassify(item)"
                >{{item.classify_name}}</span>
            </div>
            <span @click="handleChangeRootClassify({id: 0,classify_name: 'ABOUT US', child: []})"
            :class="['nav-item',0===listState.rootClassifyId?'active':'']" >ABOUT US</span>
        </div>
        <div class="sub-nav-wrap">
            <div class="sub-nav-list fisrt-sub" v-show="listState.rootClassifyId!==0">
                <span 
                    :class="['label',item.id===listState.firstClassifyId?'active':'']" 
                    v-for="item in listState.firstClassifyOpt" 
                    :key="item.id"
                    @click="handleChangeFirstClassify(item)"
                >{{item.classify_name}}</span>
            </div>
            <!-- <h2 class="label" v-show="listState.rootClassifyId===0">ABOUT US</h2> -->
            <div class="sub-nav-list">
                <span 
                    :class="['item',item.id===listState.secClassifyId?'active':'']" 
                    v-for="item in listState.secClassifyOpt" 
                    :key="item.id"
                    @click="handleChangeSecClassify(item)"
                >{{item.classify_name}}</span>
            </div>
        </div>
        <!-- 固定展示的报告区域 -->
        <div class="fix-report-wrap" v-show="listState.rootClassifyId!==0&&listState.secClassifyId===0">
            <div class="left-wrap">
                <div class="report-item-normal" v-for="item in listState.list.slice(0,3)" :key="item.id" @click="goReportDetail(item)">
                    <div class="title">{{item.title}}</div>
                    <div class="intro">{{item.abstract}}</div>
                    <div class="time">{{item.publish_time}}</div>
                </div>
                
                <img class="img" src="https://hzstatic.hzinsights.com/static/yb_en/bg-2.png" alt="">
            </div>
            <div class="center-wrap">
                <img class="img-top" src="https://hzstatic.hzinsights.com/static/yb_en/bg-3.png" alt="">
                <div class="report-item-normal" @click="goReportDetail(listState.list[3])">
                    <div class="title">{{listState.list[3]&&listState.list[3].title}}</div>
                    <div class="intro">{{listState.list[3]&&listState.list[3].abstract}}</div>
                    <div class="time">{{listState.list[3]&&listState.list[3].publish_time}}</div>
                </div>
                <div class="bot-box">
                    <div class="report-item-small" @click="goReportDetail(listState.list[4])">
                        <div class="title">{{listState.list[4]&&listState.list[4].title}}</div>
                        <div class="intro">{{listState.list[4]&&listState.list[4].abstract}}</div>
                        <div class="time">{{listState.list[4]&&listState.list[4].publish_time}}</div>
                    </div>
                    <img class="img-bot" src="https://hzstatic.hzinsights.com/static/yb_en/bg-4.png" alt="">
                </div>
            </div>
            <div class="right-wrap">
                <div class="report-item-normal" v-for="item in listState.list.slice(5,9)" :key="item.id" @click="goReportDetail(item)">
                    <div class="title">{{item.title}}</div>
                    <div class="intro">{{item.abstract}}</div>
                    <div class="time">{{item.publish_time}}</div>
                </div>
            </div>
        </div>
        <div class="mobile-type-zone" v-if="listState.secClassifyId!=0">
            <div v-for="(item,index) in typeList" :key="item" :class="contentType == (index+1)?'active':''"
            @click="contentTypeChange(index)">{{ item }}</div>
        </div>
        <!-- 报告列表 -->
        <div class="list-wrap-container" v-if="listState.secClassifyId!=0">
            <div class="report-list-wrap" v-show="!(width<768) || contentType==1">
                <div class="part-hint">Report</div>
                <div class="item" v-for="item in listState.list" :key="item.id" @click="goReportDetail(item)">
                    <div class="title">
                        <!-- <span class="label">【NO.{{item.stage}}|FICC】</span> -->
                        <img src="@/assets/icons/report.png"  >
                        <span class="title-span">
                            {{item.abstract}}
                            <!-- <span v-if="item.create_time">({{item.create_time.substring(5,7)}}{{item.create_time.substring(8,10)}})</span> -->
                        </span>     
                    </div>
                    <div class="time-classify-name" v-show="width<768">
                        <span>{{item.classify_name_root}}</span>
                        <span v-show="item.classify_name_first!==item.classify_name_root">{{item.classify_name_first}}</span>
                        <span v-show="item.classify_name_first!==item.classify_name_second && 
                            item.classify_name_root!==item.classify_name_second">{{item.classify_name_second}}</span>
                    </div>
                    <div class="intro">{{ html2text(item.overview) }}</div>
                    <div class="time">
                        <span class="time-time">
                            {{item.publish_time}}
                        </span>
                        <div class="time-classify-name" v-show="!(width<768)">
                            <span>{{item.classify_name_root}}</span>
                            <span v-show="item.classify_name_first!==item.classify_name_root">{{item.classify_name_first}}</span>
                            <span v-show="item.classify_name_first!==item.classify_name_second && 
                                item.classify_name_root!==item.classify_name_second">{{item.classify_name_second}}</span>
                        </div>
                    </div>
                </div>
                <div style="text-align: center;color: #666;font-size: 16px;padding-top: 100px;" v-show="listState.list.length==0&&listState.finished">no results</div>
                <Pagination :pageSize="listState.pageSize" :page_no="listState.page"  style="display: flex;justify-content: flex-end;margin-top: 20px;" 
                :total="listState.total" @handleCurrentChange="changePageNo" @handleSizeChange="changePageSize" v-if="!(width<768)"/>
            </div>
            <div class="video-list-wrap" id="video-list-wrap" @scroll="videoListScroll" v-show="!(width<768) || contentType==2">
                <div class="part-hint">Online Video</div>
                <div class="video-box" v-for="item in listState.videoList" :key="item.id">
                    <div class="video-item" @click="goDetail(item)">
                        <div class="video-item-title">{{item.abstract}}</div>
                        <div class="video-item-img">
                            <img :src="item.video_cover_url" />
                            <span class="time">{{getVideoTime(item.video_seconds)}}</span>
                        </div>
                        <div class="video-item-item">{{item.publish_time}}</div>
                    </div>
                </div>
                <div style="text-align: center;color: #666;font-size: 16px;padding-top: 100px;" v-show="listState.videoList.length==0&&listState.videoFinished">no results</div>

            </div>
        </div>
        

        <!-- 关于 我们 -->
        <div class="about-us-box" v-if="listState.rootClassifyId==0||(listState.rootClassifyId!=0&&listState.secClassifyId==0&&width<768)">
            <div class="head-title">Horizon Insights 2024 Commodities Outlook</div>
            <div class="flex video-list">
                <div class="item" v-for="item in staticVideoList" :key="item.code" @click="goDetail(item)">
                    <div class="title">{{item.title}}</div>
                    <div class="img-box">
                        <img class="img" :src="item.img" alt="">
                    </div>
                </div>
            </div>
            <div class="flex box top-box">
                <div class="left">
                    <!-- <video controls loop src="https://hongze.oss-cn-shanghai.aliyuncs.com/static/video_03.mp4"></video> -->
                    <videoPlayBox
                        videoUrl="https://hongze.oss-cn-shanghai.aliyuncs.com/static/video_03.mp4"
                        :autoplay="false"
                    />
                </div>
                <div class="right">
                    <div class="con">
                        <div>ABOUT US</div>
                        <p>Horizon Insights is the largest independent investment research provider in China. Our research product covers global macro, currencies, fixed income, commodities and equities. We adopt a top-down macro-driven research framework and cross check with industry-level data to form our views and strategies. Headquartered in Shanghai, we have established offices in Beijing, Hangzhou, Shenzhen, Hong Kong SAR, Singapore and United States.</p>
                    </div>
                    
                </div>
            </div>
            <div class="flex box bot-box">
                <div class="left">
                    <div class="con">
                        <h2>CONTACT US</h2>
                        <div>English Website: <a href="https://www.hzinsights.com/en">https://www.hzinsights.com/en</a></div>
                        <div>Chinese Website: <a href="https://www.hzinsights.com/">https://www.hzinsights.com/</a></div>
                        <div>Email: stephanie@hzinsights.com</div>
                        <div>
                            Singapore Office: 11 Collyer Quay, The Arcade, #11-04, Singapore 049317<br>
                            Shanghai Office: 12/F, 210 Century Avenue, Shanghai, 200120<br>
                            U.S. Office: 708 Main Street 6 Floor, Houston, Texas 77002<br>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <img src="https://hzstatic.hzinsights.com/static/yb_en/bg-1.png" alt="">
                </div>
            </div>
        </div>

        <!-- 路演视频模块 -->
        <!-- <roadShowList v-if="listState.firstClassifyId==-1" :defaultClassifyId="listState.secClassifyId"></roadShowList> -->
        </div>
    </div>
    <!-- 筛选 -->
    <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)">
                    <template #default="{ node, data }">
                        <span :class="data.id == listState.firstClassifyId || data.id==listState.secClassifyId?'select-node':''">
                            {{ data.classify_name }}
                        </span>
                    </template>
                </el-tree>
            </div>
            <div class="item">
                <span  class="title" @click="handleChangeRootClassify({id: 0,classify_name: 'ABOUT US', child: []})">ABOUT US</span>
            </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;
        }
    }
    .select-node{
        color: #00459F;
        cursor: pointer;
    }
}

.user-info-popper{
    // min-width: 300px!important;
    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-index-page{
    padding: 0 20px;
}
@media (max-width: 768px){
    .report-index-page{
        padding: 0 ;
    }
    .content-wrap{
        padding: 0 20px;
    }
}


.header-wrap{
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    color: var(--el-color-primary);
    padding: 40px 0;
    border-bottom: 1px solid#E6E6E6;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 99;
    .search-box{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 20px;
        font-size: 16px;
        color: #333;
        font-weight: 500;
        cursor: pointer;
        span,img{
            vertical-align: middle;
        }
    }
    .user-info-avatar{
        display: none;
    }
    .header-right{
        display: flex;
        align-items: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 17px;
        z-index: 30;
        cursor: pointer;
        .ybCN-jump{
            height: 30px;
            cursor: pointer;
            margin-right: 20px;
        }
    }
    .menu-icon{
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        display: none;
    }
}

@media (max-width: 940px){
    .header-wrap{
        font-size: 26px;
    }
    .list-wrap-container .video-list-wrap{
        width: 300px!important;
        min-width: 300px!important;
    }

}


@media (max-width: 768px){
    .header-wrap{
        border: none;
        font-size: 17px;
        box-shadow: 0px 4px 20px rgba(180, 180, 180, 0.16);
        padding: 15px 0;
        .search-box{
            left: unset;
            right: 55px;
            span{
                display: none;
            }
        }
        .user-info-avatar{
            display: flex;
            align-items: center;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 17px;
            height: 18px;
        }
        // .ybCN-jump{
        //     display: none;
        // }
        .header-right{
            display: none;
        }
        .menu-icon{
            display: block;
            left: 17px;
            width: 17px;
        }
    }
}

.nav-wrap{
    padding: 15px 20px 19px 20px;
    border-bottom: 1px solid#E6E6E6;
    position: sticky;
    top: 127px;
    background-color: #fff;
    z-index: 99;
    display: flex;
    justify-content: space-between;
    .menu-icon{
        width: 13px;
        cursor: pointer;
    }
    .nav-item{
        color: #666;
        font-size: 16px;
        display: inline-block;
        margin-left: 40px;
        cursor: pointer;
        position: relative;
        &.active::after{
            display: block;
            content: '';
            position: absolute;
            bottom: -19px;
            width: 100%;
            height: 4px;
            background-color: var(--el-color-primary);
        }
        &:hover{
            color: var(--el-color-primary);
        }
    }
}
@media (max-width: 768px){
    .nav-wrap{
        display: none;
    }
}

.sub-nav-wrap{
    .label{
        font-size: 34px;
        font-weight: 700;
        cursor: pointer;
    }
    .sub-nav-list{
        margin-left: -30px;
        .item{
            display: inline-block;
            margin-left: 30px;
            margin-bottom: 20px;
            font-size: 16px;
            color: #666;
            cursor: pointer;
            &:hover{
                color: var(--el-color-primary);
            }
            &.active{
                color: var(--el-color-primary);
            }
        }
        .label{
            &:hover{
                color: var(--el-color-primary);
            }
            &.active{
                color: var(--el-color-primary);
            }
        }
    }
    .fisrt-sub{
      padding: 24px 0 20px;  
      .label{
        margin-left: 30px;
      }
    }
}
@media (max-width: 768px){
    .sub-nav-wrap{
        display: none;
    }
}

.about-us-box{
    background: #2C2E33;
    margin-top: 40px;
    .box{
        .left{
            flex: 2;
        }
        .right{
            flex: 1;
        }
    }
    .top-box{
        .left{
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            video{
                object-fit: contain;
                width: 100%;
                display: block;
            }
        }
        .right{
            .con{
                padding: 60px 40px 40px 40px;
            }
            color: #fff;
            div{
                font-size: 30px;
                font-weight: bold;
            }
            p{
                font-size: 18px;
                line-height: 1.7;
                font-weight: 500;
            }
        }
    }
    .bot-box{
        .right{
            background-color: #000;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }
        }
        .left{
            .con{
                padding: 30px;
                a{
                    color: white;
                }
            }
            color: #fff;
            h2{
                font-size: 30px;
            }
            div{
                line-height: 1.7;
            }
        }
    }
    .video-list{
        flex-wrap: wrap;
        justify-content: space-between;
        background-color: #fff;
        padding-bottom: 20px;
        .item{
            margin-bottom: 20px;
            width: 32%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .title{
                line-height: 1.5;
                font-size: 18px;
            }
            .img-box{
                position: relative;
                .img{
                    width: 100%;
                    display: block;
                }
                &::after{
                    content: "";
                    display: block;
                    width: 55px;
                    height: 55px;
                    background-image: url("@/assets/icon_play.png");
                    background-size: cover;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    cursor: pointer;
                }
            }
        }
    }
    .head-title{
        background-color: #fff;
        font-size: 32px;
        color: #00459F;
        padding-bottom: 30px;
    }
}
@media (max-width: 768px){
    .about-us-box{
        background-color: #fff;
        .top-box{
            flex-direction: column;
            .left{
                flex: 1;
            }
            .right{
                flex: 1;
                color: #333;
                .con{
                    padding: 20px 17px;
                }
                div{
                    font-size: 16px;
                }
                p{
                    color: #666;
                    font-size: 14px;
                }
            }
        }
        .bot-box{
            flex-direction: column-reverse;
            .right{
                background-color: #fff;
                flex: 1;
            }
            .left{
                .con{
                    padding: 20px 17px;
                    a{
                        color: #666666;
                    }
                }
                flex: 1;
                color: #666;
                font-size: 14px;
                h2{
                    color: #333;
                    font-size: 16px;
                }
            }
        }
        .video-list{

            .item{
                width: 49%;
                .title{
                    font-size: 14px;
                }
            }
        }
        .head-title{
            font-size: 16px;
            padding-bottom: 15px;
            font-weight: bold;
        }
    }
}

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

.fix-report-wrap{
    // margin-top: 30px;
    border-top: 1px solid #E6E6E6;
    border-bottom: 1px solid #E6E6E6;
    padding: 20px 0;
    display: flex;
    .report-item-normal{
        border-bottom: 1px solid #E6E6E6;
        padding: 20px 0;
        .title{
            font-size: 20px;
            font-weight: 600;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            cursor: pointer;
            word-break: break-word;
        }
        .intro{
            font-size: 14px;
            color: #666;
            margin: 10px 0;
            line-height: 17px;
            min-height: 30px;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-word;
        }
        .time{
            font-size: 14px;
            color: #999;
        }
    }
    .left-wrap,.center-wrap,.right-wrap{
        width: 33.33%;
    }
    .left-wrap{
        padding-right: 40px;
        .img{
            width: 100%;
            margin-top: 20px;
        }
    }
    .right-wrap{
        padding-left: 40px;
        .report-item-normal{
            .intro{
                -webkit-line-clamp: 3;
                min-height: 45px;
            }
            &:last-child{
                border: none;
            }
        }
    }
    .center-wrap{
        border-left: 1px solid #E6E6E6;
        border-right: 1px solid #E6E6E6;
        padding: 0 20px;
        .img-top{
            width: 100%;
        }
        .report-item-normal{
            .intro{
                -webkit-line-clamp: 3;
                min-height: 45px;
            }
        }
        .bot-box{
            margin-top: 20px;
            display: flex;
            .report-item-small{
                width: 50%;
                padding-right: 20px;
                .title{
                    font-size: 20px;
                    font-weight: 600;
                    display: -webkit-box;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    word-break: break-word;
                }
                .intro{
                    font-size: 14px;
                    color: #666;
                    margin: 20px 0;
                    line-height: 1.7;
                    min-height: 140px;
                    display: -webkit-box;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 6;
                    -webkit-box-orient: vertical;
                    word-break: break-word;
                }
                .time{
                    font-size: 14px;
                    color: #999;
                }
            }
            .img-bot{
                width: 50%;
            }
        }
    }

    
}
@media (max-width: 768px){
    .fix-report-wrap{
        display: none;
    }
    .mobile-type-zone{
        display: flex!important;
        position: sticky;
        background-color: white;
        width: 100vw;
        padding: 13px 0;
        border-bottom: solid 1px #DCDFE6;
        border-top: solid 1px #DCDFE6;
        flex-wrap: nowrap;
        align-items: center;
        margin-left: -20px;
        top: 49px;
        z-index: 1000;
        div{
            font-size: 14px;
            padding: 0 16px;
        }
        .active{
            color: #00459F;
            font-weight: 600;
            position: relative;
            &::after{
                content: '';
                background-color: #00459F;
                height: 3px;
                width: 16px;
                border-radius: 16px;
                position: absolute;
                bottom: -4px;
                left: 50%;
                transform: translateX(-50%);

            }
        }
    }
}
.mobile-type-zone{
    display: none;
}
.part-hint{
    display: inline-block;
    background-color: #DCDFE6;
    color: #333333;
    font-weight: bold;
    font-size: 14px;
    border-radius: 4px;
    padding: 4px 10px;
    line-height: 20px;
}
.list-wrap-container{
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    padding: 10px 0 0;
    border-top: 1px solid #E6E6E6;
    .report-list-wrap{
        flex-grow: 1;
        padding: 0 20px 50px 0;
        border-right: solid 1px #E6E6E6;
        .item{
            padding: 20px 0;
            border-bottom: 1px solid #E6E6E6;
            &:first-child{
                padding-top: 0 ;
            }
            .title{
                font-size: 16px;
                font-weight: 600;
                cursor: pointer;
                display: flex;
                align-items: center;
                img{
                    height: 16px;
                    width: 16px;
                    margin: 0 4px 0 0;
                }
                // .label{
                //     display: inline-block;
                //     background-image: url('@/assets/report_tag.png');
                //     background-size: cover;
                //     background-position: right center;
                //     background-repeat: no-repeat;
                //     color: #fff;
                //     font-size: 12px;
                //     padding-right: 20px;
                //     padding-top: 3px;
                //     padding-bottom: 3px;
                //     box-sizing: border-box;
                //     margin-right: 5px;
                // }
                span{
                    vertical-align: middle;
                }
                .title-span{
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    // word-break: break-all;
                    -webkit-box-orient: vertical;
                }
            }
            .intro{
                font-size: 14px;
                color: #666;
                margin-top: 10px;
                margin-bottom: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                // // 苹果兼容问题，上面的用不了的话，用相对高度
                // line-height:1.2em;
                // max-height: 3.6em;
            }
            .time{
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                .time-time{
                    font-size: 14px;
                    color: #999;
                    margin-right: 20px;
                }
            }
            .time-classify-name{
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                margin-bottom: -6px;
                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;
                }
            }
        }
    }
    .video-list-wrap{
        height: 787px;
        width: 380px;
        min-width: 380px;
        padding-left: 20px;
        // padding-top: 10px;
        overflow: auto;
        .part-hint{
            margin-left: 15px;
        }
        .video-box{
            padding: 20px 15px;
            border-bottom: solid 1px #E6E6E6;
            &:first-child{
                padding-top: 0;
            }
            .video-item{
                padding: 0 20px;
                .video-item-title{
                    font-size: 14px;
                    line-height: 17px;
                    color: #333333;
                    margin-bottom: 10px;
                    overflow: hidden;
                    white-space:nowrap;
                    text-overflow: ellipsis;
                }
                .video-item-img{
                    position: relative;
                    img{
                        width: 100%;
                        object-fit: cover;
                        display: block;
                        cursor: pointer;
                    }
                    .time{
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        background-color: rgba(0, 0, 0, 0.3);
                        color: #fff;
                        font-size: 12px;
                        padding: 4px 8px;
                    }
                    &::after{
                        content: '';
                        display: block;
                        width: 55px;
                        height: 55px;
                        background-image: url('@/assets/icon_play.png');
                        background-size: cover;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%,-50%);
                        cursor: pointer;
                    }
                }
                .video-item-item{
                    text-align: right;
                    margin-top: 10px;
                    font-size: 14px;
                    color: #999;
                }
            }
        }
    }
}


@media (max-width: 768px){
    .part-hint{
        display: none;
    }
    .report-list-wrap{
        border-right: none!important;
        .item{
            padding: 10px 0;
            .title{
                font-size: 14px;
                .label{
                    font-size: 10px;
                    padding-right: 20px;
                    padding-top: 2px;
                    padding-bottom: 2px;
                    margin-right: 3px;
                }
            }
            .intro{
                margin-bottom: 10px;
            }
            .time{
                font-size: 12px;
            }
        }
    }
    .list-wrap-container{
        border-top: none;
        .report-list-wrap{
            padding: 0;
            .item{
                padding: 10px 0;
                .intro{
                    margin: 8px 0;
                }
                .time-classify-name{
                    margin-bottom: 0;
                    span{
                        font-size: 12px;
                        margin-bottom: 0;
                        margin-top: 8px;
                    }
                }
            }
        }
        .video-list-wrap{
            height: unset;
            width: 100%!important;
            min-width: 100%!important;
            padding-left: 0;
            padding-top: 0;
            .video-box{
                padding: 0;
                .video-item{
                    padding: 0;
                    .video-item-title{
                        margin-top: 10px;
                    }
                    .video-item-item{
                        margin-bottom: 10px;
                    }
                }
                &:first-child{
                    .video-item-title{
                        margin-top: 0;
                    }
                }
            }
        }
    }
}
</style>