<template>
    <div>
        <search-form v-model="queryParams" @reset-page="resetPage" @reset-params="resetParams" />
        <customer-list :loading="pager.loading" :tableData="pager.lists">
            <template #operation="{ row }">
                <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
            </template>
        </customer-list>
        <div class="flex justify-end pb-[20px] bg-white">
            <pagination v-model="pager" @change="getLists" />
        </div>
    </div>
    <customer-dialog ref="customerDialogRef" @refresh-list="getLists" />
</template>

<script setup lang="ts">
import searchForm from './modules/search-form.vue'
import customerList from './modules/customer-list.vue'
import customerDialog from './components/customer-dialog.vue'
import { usePaging } from '@/hooks/usePaging'
import { customerLists } from '@/api/customer'

const queryParams = reactive({
    studentName: '',
    parentPhone: ''
})
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: customerLists,
    params: queryParams
})
getLists()
const customerDialogRef = ref()
const handleEdit = row => {
    const { id } = row
    customerDialogRef.value.openDialog({
        title: '编辑客户',
        width: 800,
        data: {
            id
        }
    })
}
</script>
<style scoped></style>
