<script setup>
import {ref} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Search } from 'vant'

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

document.title='图表搜索'

import {apiChartList} from '@/api/hzyb/chart.js'
let searchVal=ref('')
let list=ref([])
let finished=ref(false)
const onSearch=async ()=>{
    finished.value=false
    const res=await apiChartList({Keywords:searchVal.value,Page:1,Limit:10000,Authorization:route.query.token})
    finished.value=true
    if(res.code===200){
        list.value=res.data||[]
    }
}

const handleSelect=(item)=>{
    router.replace({
        path:'/hzyb/chart/detail',
        query:{
            ChartInfoId:item.ChartInfoId,
            chartSource: item.Source,
            token:route.query.token,
            searchVal:searchVal.value
        }
    })
}
</script>


<template>
    <div class="chart-search">
        <div class="top-search">
            <Search 
                v-model="searchVal" 
                shape="round" 
                placeholder="请输入图表关键词"
                @search="onSearch"
            />
        </div>
        <div class="empty-box" v-if="list.length==0&&finished">
            <img src="https://hzstatic.hzinsights.com/static/icon/hzyb/chart_empty.png" alt="">
            <p>暂时找不到对应图，试试别的搜索词吧~</p>
        </div>
        <ul class="list" v-else>
            <li 
                class="item" 
                v-for="item in list" 
                :key="item.ChartInfoId"
                @click="handleSelect(item)"
            >{{item.ChartName}}</li>
        </ul>
    </div>
</template>

<style lang="scss" scoped>
.chart-search{
    .list{
        // margin-top: 50px;
        .item{
            padding: 18px 34px 21px 34px;
            border-bottom: 1px solid #E5E5E5;
            font-size: 28px;
            color: #1F243A;
        }
    }
    .empty-box{
        margin-top: 200px;
        text-align: center;
        img{
            width: 346px;
        }
        p{
            color: #999999;
            font-size: 32px;
        }
    }
}
</style>