<script setup name="PPTSearch">
import {ref} from 'vue'
import {apiPPTSearch} from '@/api/ppt'
import { showToast } from 'vant'
import { useRouter,onBeforeRouteLeave } from 'vue-router'
import {useCachedViewsStore} from '@/store/modules/cachedViews'
const cachedViewsStore=useCachedViewsStore()

const router=useRouter()

const searchVal=ref('')

let list=ref([])
let finished=ref(false)
async function handleSearch(){
    finished.value=false
    const res=await apiPPTSearch({
        Keyword:searchVal.value
    })
    if(res.Ret===200){
        list.value=res.Data.List||[]
        finished.value=true
    }
}

function onSearch(){
    if(!searchVal.value){
        showToast('请输入关键词')
        return
    }
    handleSearch()
}

async function goDetail(item){
    await cachedViewsStore.removeCaches('PPTDetail')
    if(window.location.pathname.startsWith('/ppten')){
        router.push({
            path:"/ppten/detail",
            query:{
                id:item.PptId
            }
        })
    }else{
        router.push({
            path:"/ppt/detail",
            query:{
                id:item.PptId
            }
        })
    }
}

</script>

<template>
    <div class="mobile-ppt-search-page">
        <div class="search-wrap">
            <van-search 
                v-model="searchVal"
                shape="round"  
                placeholder="请输入PPT标题"
                @search="onSearch"
            />
        </div>
        <van-empty image="search" description="试试别的关键词吧~" v-if="list.length==0&&finished"/>
        <ul class="list-wrap">
            <li class="item" v-for="item in list" :key="item.PptId" @click="goDetail(item)">
                <div class="title" v-html="item.Title"></div>
                <div class="time">{{item.AdminRealName}} {{item.PptCreateTime.split(' ')[0]}}创建</div>
            </li>
        </ul>
    </div>
</template>

<style lang="scss" scoped>
.search-wrap{
    position: sticky;
    top: 0;
    z-index: 99;
}

.list-wrap{
    padding: 34px;
    .item{
        padding: 30px 0 20px 0;
        border-bottom: 1px solid $border-color;
        :deep(.color-light){
            color: $theme-color;
        }
        .time{
            color: $font-grey_999;
            margin-top: 10px;
            font-size: 24px;
        }
    }
}

@media screen and (min-width:$media-width){
    .list-wrap{
        padding: 30px;
        .item{
            padding: 10px 0;
            .time{
                margin-top: 10px;
                font-size: 12px;
            }
        }
    }
}
</style>