<script setup>
import {reactive} from 'vue'
import { Search } from '@element-plus/icons-vue'
import { apiReportSearch } from '@/api/report'
import { useRouter } from 'vue-router'
import Pagination from "../../components/Pagination.vue"
import { useWindowSize } from '@vueuse/core'
const { width, height } = useWindowSize()

const router=useRouter()

let listState=reactive({
    keywords:'',
    page:1,
    pageSize:10,
    total:0,
    list:[],
    loading:false,
    finished:false,
    reportFinished:false
})  

async function getReportList(){
    if(!listState.keywords) return
    listState.loading=true
    const res=await apiReportSearch({
        key_word:listState.keywords,
        page_size:listState.pageSize,
        current:listState.page
    })
    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()
}

function handleSearch(){
    listState.list=[]
    listState.page=1
    listState.finished=false
    listState.reportFinished=false
    getReportList()
}

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

// 监听页面滚动
function listenScroll(){
    window.onscroll=(e)=>{
        if(!(width.value<768)) 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()
        }
    }
}

listenScroll()

</script>

<template>
    <div class="report-search-page">
        <div class="header-wrap" @click="$router.replace('/')">
            <span @click="$router.replace('/')" style="cursor: pointer;">HORIZON INSIGHTS</span>
        </div>
        <div class="search-box">
            <el-input
                v-model="listState.keywords"
                class="self-input"
                placeholder="Please Input Keywords"
                :suffix-icon="Search"
                @change="handleSearch"
            />
        </div>
        <div v-if="listState.list.length===0" class="empty">no results</div>
        <div class="report-list-wrap" v-else>
            <div class="item" v-for="item in listState.list" :key="item.id" >
                <div @click="goReportDetail(item)" v-if="item.report_type===0">
                    <div class="title">
                        <!-- <span class="label">【NO.{{item.stage}}|FICC】</span> -->
                        <img src="@/assets/icons/report.png"  >
                        <span class="title-span">
                            <span v-html="item.abstract"></span>
                            <!-- <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" v-html="item.content_sub"></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 class="time">{{item.publish_time}}</div> -->
                </div>
                <div @click="goVideoDetail(item)" v-if="item.report_type===1">
                    <div class="title" v-html="item.title"></div>
                    <div class="video-img">
                        <img :src="item.video_cover_url" alt="">
                    </div>
                    <div class="time">{{item.publish_time}}</div>
                </div>
            </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>
</template>

<style lang="scss" scoped>
.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;
    cursor: pointer;
}
@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{
    width: 640px; 
    margin: 60px auto 0 auto;
    .self-input{
        :deep(.el-input__wrapper){
            border-radius: 24px;
            border: 1px solid #000000;
            height: 48px;
        }
    }
}
@media (max-width: 768px){
    .search-box{
        width: calc(100vw - 34px);
        margin: 30px auto 0 auto;
        .self-input{
            :deep(.el-input__wrapper){
                height: 40px;
            }
        }
    }
}

.empty{
    padding: 50px 0 ;
    text-align: center;
    color: #666;
}

.report-list-wrap{
    max-width: 1200px;
    margin: 50px auto;
    padding-bottom: 20px;
    .item{
        border-bottom: 1px solid #E6E6E6;
        padding: 20px 0;
        .title{
            font-size: 20px;
            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;
            line-height: 17px;
            margin: 10px 0;
        }
        .video-img{
            width: 216px;
            height: 132px;
            margin: 10px 0;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }
            position: relative;
                &::after{
                    content: '';
                    display: block;
                    width: 32px;
                    height: 32px;
                    background-image: url('@/assets/icon_play.png');
                    background-size: cover;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%,-50%);
                    cursor: pointer;
                }
        }
        .time{
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            font-size: 14px;
            color: #999;    
            .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: 6;
            }
        }
    }
}
@media (max-width: 768px){
    .report-list-wrap{
        width: 100%;
        padding: 0 17px;
        margin: 25px 0;
        .item{
            padding: 10px 0;
            .title{
                font-size: 14px;
                .label{
                    font-size: 10px;
                    padding-right: 20px;
                    padding-top: 2px;
                    padding-bottom: 2px;
                    margin-right: 3px;
                }
            }
            .time{
                font-size: 12px;
            }
            .video-img{
                width: 100%;
                height: 200px;
                &::after{
                    width: 50px;
                    height: 50px;
                }
            }
            .time-classify-name{
                margin-bottom: 0;
                span{
                    font-size: 12px;
                    margin-bottom: 0;
                    margin-top: 8px;
                }
            }
        }
    }
}
</style>