<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 { ref, onMounted } from 'vue'
import { debounce } from 'lodash-es'
import clueCard from './clue-card.vue'
import { useZPaging } from '@/hooks/useZPaging'
import { apiTeleClueList } from '@/api/clue'

const queryParams = ref({
    likeWork: ''
})
const dataList = ref([])
const { paging, queryList, refresh, changeApi, setParams } = useZPaging(
    queryParams.value,
    apiTeleClueList,
    () => {}
)
const searchChange = debounce(() => {
    refresh(queryParams.value)
}, 300)

onMounted(() => {
    uni.$on('refreshPageList', () => {
        refresh(queryParams.value)
    })
})
</script>
<style scoped></style>
