<template>
    <div>
        <search-form v-model="queryParams" @reset-page="resetPage" @reset-params="resetParams" />
        <clue-list :loading="pager.loading" :tableData="pager.lists">
            <template #operation="{ row }">
                <el-button type="primary" link @click="handleDetail(row.id)">详情</el-button>
            </template>
        </clue-list>
        <div class="flex justify-end bg-white pb-[20px]">
            <pagination v-model="pager" @change="getLists" />
        </div>
    </div>
    <clue-detail ref="clueDetailRef" />
</template>

<script setup lang="ts">
import searchForm from './modules/search-form.vue'
import clueList from './modules/clue-list.vue'
import clueDetail from './modules/clue-detail.vue'
import { usePaging } from '@/hooks/usePaging'
import { clueLists } from '@/api/clue'

const queryParams = reactive({
    likeWork: '',
    situation: ''
})

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: clueLists,
    params: queryParams
})
getLists()

const clueDetailRef = ref()
const handleDetail = (id: number) => {
    clueDetailRef.value.openDrawer({
        title: '线索详情',
        data: { id }
    })
}
</script>
<style scoped></style>
