<template>
	<view class="myTable">
		<kevyloading v-if="loading" type="bsm-loader" color="#618af8" transparent></kevyloading>

		<wd-table :data="list" :border="true">
			<slot></slot>
		</wd-table>

		<wd-pagination v-model="query.page" :total="total" :page-size="query.pageSize" @change="handleChange" show-icon
			show-message />
	</view>
</template>

<script setup>
import { ref } from 'vue'
import kevyloading from "@/components/kevy-loading/kevy-loading";

const props = defineProps({
	apiObj: {
		type: Function,
		default: () => (() => { })
	},
	params: {
		type: Object,
		default: () => ({})
	}
})

const query = ref({
	page: 1,
	pageSize: 20
})

const loading = ref(false)
const total = ref(0)
const list = ref([])

const getData = async () => {
	loading.value = true
	const res = await props.apiObj({
		...query.value,
		...props.params
	})

	query.value.pageSize = res.data.pageSize
	total.value = res.data.total
	list.value = res.data.rows
	loading.value = false
}

getData()

const upData = async (upParams = {}) => {
	loading.value = true
	query.value.page = 1
	query.value.pageSize = 20

	const res = await props.apiObj({
		...query.value,
		...props.params,
		...upParams
	})

	query.value.pageSize = res.data.pageSize
	total.value = res.data.total
	list.value = res.data.rows
	loading.value = false
}


function handleChange({ value }) {
	query.value.page = value
	getData()
}


defineExpose({
	upData
})
</script>

<style lang="scss"></style>
