<template>
    <div class="import-mychart-wrap">
        <div>
            <el-input
				placeholder="关键词搜索"
				v-model="keyword"
				size="medium"
				prefix-icon="el-icon-search"
                @input="handleChange"
			/>
		</div>
		<div class="list" v-infinite-scroll="load" v-if="list.length>0">
            <div class="item" v-for="item in list" :key="item.SaCompareId" @click="handleClickItem(item)">
                <p>{{ item.Title }}</p>
                <img :src="item.PicUrl" alt="" style="-webkit-user-drag:none;">
            </div>
		</div>
        <div v-if="list.length==0" class="empty-box">
            无数据
        </div>
    </div>
</template>

<script>
import {semanticInterface} from '@/api/modules/semanticsApi.js';
export default {
    data() {
        return {
            keyword:'',
            pageSize:20,
			CurrentIndex: 1,
			list:[],
            loading:false,
            finished:false,

        }
    },
    mounted(){
        this.handleGetList()
    },  
    methods: {
		async handleGetList(){
            this.loading=true
            const res=await semanticInterface.compareSearch({
				PageSize: this.pageSize,
				CurrentIndex: this.CurrentIndex,
				Keyword: this.keyword
			})
            this.loading=false
            let arr=res.Data.List||[]
            arr=arr.map(item => {
               return {
                   ...item,
                   PicUrl:item.ResultImg
               } 
            });

            this.list=[...this.list,...arr]
            if(!res.Data){
                this.finished=true
            }
            if(res.Data&&res.Data.Paging.IsEnd){
                this.finished=true
            }
		},

        load(){
            if(this.finished) return
            this.CurrentIndex++
            this.handleGetList()
        },
        handleChange(){
            console.log('aaa');
            this.CurrentIndex=1
            this.finished=false
            this.list=[]
            this.handleGetList()
        },

        handleClickItem(item){
           this.$parent.chooseChart(item,'sandImage')
        }
    },
}
</script>

<style lang="scss" scoped>
.import-mychart-wrap{
    .list{
        height: calc(100vh - 320px);
        overflow-x: hidden;
		overflow-y: auto;
        .item{
            width: 100%;
            margin: 20px 0;
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #eaeaea;
            border-radius: 10px;
            position: relative;
            overflow: hidden;
            p{
                text-align: center;
                font-size: 16px;
                margin-bottom: 10px;
                color: #5882EF;
            }
            img{
                width: 100%;
            }
        }
    }
    .empty-box{
        height: calc(100vh - 320px);
        text-align: center;
        color: #999;
        padding-top: 100px;
    }
}
</style>