<template>
	<a-spin :spinning="loading">
		<div>
			<div className="s-table-tool">
				<slot name="operator"></slot>
			</div>
			<a-row :gutter="15" style="margin-bottom: 15px" type="flex" justify="start">
				<a-col
					:span="span"
					v-for="item in dataList"
					slot-scope="scope"
					style="margin-bottom: 15px; color: #444444"
					v-if="dataList && dataList.length > 0"
				>
					<slot name="body" :record="item"></slot>
				</a-col>
				<a-col :span="24" v-else>
					<a-empty/>
				</a-col>
			</a-row>
			<a-pagination
				v-model:current="pageParam.current"
				:total="pageParam.total"
				show-less-items
				:defaultPageSize="props.size || defaultSize"
				:page-size-options="sizeOption"
				:showSizeChanger="true"
				:show-total="showTotal"
				@change="loadDataOp"
				size="small"
				style="justify-content: flex-end; display: flex"
			/>
		</div>
	</a-spin>
</template>
<script setup name="cardList">
import './index.less'

const span = ref(6)
const defaultSize = ref(12)
const sizeOption = ref(['12', '24', '48','96'])
const emit = defineEmits({onDelete: null, onClick: null, onEdit: null})
const loading = ref(false)
const dataList = ref([])
const pageParam = ref({size: 12, current: 1, total: 0, pages: 0})
const showTotal = (total, range) => {
	return `${range[0]}-${range[1]} 共 ${total} 条 `
}
const props = defineProps(['loadData', 'size', 'span', 'sizeOption', 'checkIds'])
const del = (record) => {
	emit('onDelete', record)
}
const click = (record) => {
	emit('onClick', record)
}
const edit = (record) => {
	emit('onEdit', record)
}
const loadDataOp = (page, pageSize) => {
	if (page) {
		pageParam.value.current = page
	}
	if (pageSize) {
		pageParam.value.size = pageSize
	}
	loading.value = true
	props
		.loadData({pageSize: pageParam.value.size, pageNum: pageParam.value.current})
		.then((res) => {
			pageParam.value.pages = res.pages
			pageParam.value.total = res.total
			dataList.value = res.records
		})
		.finally(() => (loading.value = false))
}
nextTick(() => {
	if (props.size) {
		pageParam.value.size = props.size
	}
	if (props.span) {
		span.value = props.span
	}
	if (props.sizeOption) {
		sizeOption.value = props.sizeOption
	}
	loadDataOp()
})
const refresh = (clean) => {
	if (clean) {
		pageParam.value.current = 1
	}
	loadDataOp()
}
defineExpose({
	refresh
})
</script>
