<script setup>
import {onMounted,reactive,ref} from 'vue'
import {apiReportSearch} from '@/api/report'
import moment from 'moment'
import Search from "@/components/Search.vue"
import SelfList from '@/components/SelfList.vue'
import { onBeforeRouteLeave,useRouter } from 'vue-router'

const router=useRouter()

let listState=reactive({
    list:[],
    page:1,
    pageSize:20,
    finished:false,
    loading:false,
    keyword:''
})
const getSearchList=async ()=>{
    listState.loading=true
    const res=await apiReportSearch({
        key_word:listState.keyword,
        current_index:listState.page,
        page_size:listState.pageSize
    })
    listState.loading=false
    if(listState.page===1){
        document.body.scrollTop=document.documentElement.scrollTop=0
    }
    if(res.code===200){
        if(res.data.paging.is_end){
            listState.finished=true
        }
        let arr=res.data.list||[]
        listState.list=[...listState.list,...arr]
    }
}

const onLoad=()=>{
    listState.page++
    getSearchList()
}

const handleSearch=(e)=>{
    listState.page=1
    listState.list=[]
    listState.finished=false
    listState.keyword=e||''
    if(!e) return
    getSearchList()
}

const goDetail=(item)=>{
    if(['晨报','周报'].includes(item.classify_name_first)){
        router.push({
            path:'/report/chapterdetail',
            query:{
                chapterId:item.report_chapter_id
            }
        })
    }else{
        router.push({
            path:'/report/detail',
            query:{
                reportId:item.report_id
            }
        })
    }
}

let isMounted = ref(false);
onMounted(() => {
  isMounted.value = true;
});
onBeforeRouteLeave((to,from)=>{
    // 如果是返回到首页则重置搜索页
    if(to.name=='ReportIndex'){
        console.log(to.name);
        listState.list=[]
        listState.page=1
        listState.finished=false
        listState.keyword=''
    }
})
</script>

<template>
    <!-- 搜索 -->
    <template v-if="isMounted&&$route.path=='/report/search'">
        <teleport to="#reportIndex-in-head">
            <Search
                style="margin-top: 10px;"
                placeholder="请输入标题/关键词"
                :defaultVal="listState.keyword"
                :autoFocus="true"
                @search="handleSearch"
                @clean="handleSearch"
            ></Search>
        </teleport>
    </template>
    <div class="report-search-page" v-if="listState.keyword">
        <SelfList 
            :finished="listState.finished" 
            :isEmpty="listState.list.length === 0 && listState.finished" 
            :loading="listState.loading" 
            :count="listState.list.length"
            @listOnload="onLoad"
            emptyMsg="找不到对应报告，试试别的搜索词吧"
        >
        <div class="search-list-wrap">
            <div 
                class="item" 
                v-for="item in listState.list" 
                :key="item.report_id+item.report_chapter_id"
                @click="goDetail(item)"
            >
                <div class="title" v-html="item.title"></div>
                <div class="des" v-html="item.content_sub"></div>
                <div class="tags">
                    <span v-if="item.classify_name_first">#{{item.classify_name_first}}</span>
                    <span v-if="item.classify_name_second">#{{item.classify_name_second}}</span>
                    <span class="time">{{moment(item.publish_time).format('YYYY年MM月DD日 HH:mm')}}</span>
                </div>
            </div>
        </div>
        </SelfList>

    </div>
</template>

<style lang="scss" scoped>
.report-search-page{
    .search-list-wrap{
        .item{
            background: #FFFFFF;
            box-shadow: 3px 3px 12px 1px rgba(184, 184, 184, 0.16);
            border-radius: 4px;
            border: 1px solid #E5E5E5;
            padding: 30px;
            margin-bottom: 20px;
            cursor: pointer;
            &:hover{
                box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.12);
            }
            .title{
                font-size: 18px;
                :deep(span){
                    color: #F3A52F !important;
                }
            }
            .des{
                font-size: 14px;
                margin: 10px 0;
                line-height: 18px;
                :deep(span){
                    color: #F3A52F !important;
                }
            }
            .tags{
                span{
                    font-size: 14px;
                    color: #F3A52F;
                    margin-right: 30px;
                }
                .time{
                    float: right;
                    color: #999999;
                }
            }
        }
    }
}

</style>