<script setup>
import { onActivated, reactive,ref } from 'vue'
import Search from '@/components/Search.vue'
import SelfList from '@/components/SelfList.vue'
import {apiMyChartList} from '@/api/myChart'
import { useRoute ,onBeforeRouteLeave, useRouter} from 'vue-router'
import { useStore } from 'vuex'

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

let autoFocus=ref(false)

let listState=reactive({
    loading:false,
    finished:false,
    page:1,
    pageSize:20,
    list:[],
    sClassifyId:'',
    keyword:''
})
// 获取列表数据
async function getChartList(){
    listState.loading=true
    const res=await apiMyChartList({
        keyword:listState.keyword,
        classify_id:listState.sClassifyId,
        curr_page:listState.page,
        page_size:listState.pageSize
    })
    listState.loading=false
    if(res.code===200){
        const arr=res.data.list||[]
        listState.list=[...listState.list,...arr]
        listState.finished=res.data.paging.is_end
    }
}

// 加载更多
function onLoad(){
    listState.page++
    getChartList()
}

//搜索
function handleSearch(e){
    listState.keyword=e||''
    listState.page=1
    listState.list=[]
    listState.finished=false
    getChartList()
}

//查看详情
function goDetail(item){
    router.push({
        path:'/mychart/detail',
        query:{
            chartInfoId:item.chart_info_id,
            chartSource: item.chart_info_source,
            chartCode:item.unique_code,
            classifyId:listState.sClassifyId
        }
    })
}

onActivated(()=>{
    console.log('onActivated');
    if(route.query.cid){
        if(route.query.cid==listState.sClassifyId)return
        autoFocus.value=false
        listState.sClassifyId=Number(route.query.cid)
        store.commit('modifyBreadCrumb',route.query.cname)
        getChartList()
    }else{
        autoFocus.value=true
        store.commit('modifyBreadCrumb','搜索')
    }
})

onBeforeRouteLeave((to)=>{
    if(to.name!='MyChartDetail'){
        listState.page=1
        listState.list=[]
        listState.finished=false
        listState.keyword=''
        listState.sClassifyId=''
    }
})



</script>

<template>
    <div class="mychart-search-page">
        <div class="top-wrap">
            <h2 class="title" v-if="$route.query.cname">{{$route.query.cname}}</h2>
            <Search 
                :autoFocus="autoFocus" 
                placeholder="关键词搜索" 
                :defaultVal="listState.keyword"
                style="background-color:#fff"
                @search="handleSearch"
                @clean="handleSearch"
            />
        </div>
        <template v-if="listState.keyword||listState.sClassifyId">
        <SelfList 
            :finished="listState.finished" 
            :isEmpty="listState.list.length===0&&listState.finished"
            :loading="listState.loading"
            :count="listState.list.length"
            emptyMsg="暂无图表收藏的信息"
            @listOnload="onLoad"
        >
            <ul class="flex list-wrap">
                <li class="item" v-for="item in listState.list" :key="item.chart_info_id" @click="goDetail(item)">
                    <div class="multi-ellipsis-l2 title">{{item.chart_name}}</div>
                    <img class="img" :src="item.chart_image" alt="">
                </li>
                <li class="last-add-item"></li>
                <li class="last-add-item"></li>
                <li class="last-add-item"></li>
            </ul>
        </SelfList>
        </template>
    </div>
</template>

<style lang="scss" scoped>
.top-wrap{
    position: sticky;
    top: 60px;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: -20px;
    background-color: #fff;
    .title{
        font-size: 20px;
    }
}
    .list-wrap{
        flex-wrap: wrap;
        justify-content: center;
        .last-add-item{
            height:0;
            flex-shrink: 0;
            width: 285px;
            margin-left: 10px;
            margin-right: 10px;
        }
        .item{
            flex-shrink: 0;
            width: 285px;
            background: #FFFFFF;
            border: 1px solid #EBEBEB;
            box-shadow: 0px 0px 12px rgba(167, 167, 167, 0.25);
            border-radius: 4px;
            padding: 10px;
            margin-bottom: 20px;
            margin-left: 10px;
            margin-right: 10px;
            overflow: hidden;
            cursor: pointer;
            .title{
                margin-bottom: 20px;
            }
            .img{
                width: 100%;
                height: 229px;
                object-fit: contain;
            }
        }
    }
</style>