<template>
    <view class="flex-1 h-full flex flex-col">
        <TSearch
            v-model="queryParams.likeWork"
            placeholder="搜索客户姓名/手机号码"
            backgroundColor="#F5F5F5"
            @on-input="searchChange"
        />
        <view class="flex-1 mt-3 px-2 overflow-auto bg-[#FAFAFE]">
            <z-paging
                ref="paging"
                v-model="dataList"
                @query="queryList"
                :fixed="false"
                height="100%"
            >
                <clue-card
                    v-for="(item, index) in dataList"
                    :key="`${index} + 'unique'`"
                    :item="item"
                />
            </z-paging>
        </view>
    </view>
</template>

<script setup lang="ts">
import { useZPaging } from '@/hooks/useZPaging'
import { ref } from 'vue'
import clueCard from './clue-card.vue'
import { apiCluseList } from '@/api/clue'
import { debounce } from 'lodash-es'

const queryParams = ref({
    likeWork: ''
})
const dataList = ref([])
const { paging, queryList, refresh, changeApi, setParams } = useZPaging(
    queryParams.value,
    apiCluseList,
    () => {}
)
const searchChange = debounce(() => {
    refresh()
}, 300)
</script>
<style scoped></style>
