<script generic="D extends Record<string, any>,S extends G.PageParam" lang="ts" setup>
import type {
  Column,
  DataSource,
} from '@/components/data-list/data-list.ts'
import Page from '@/components/page/Page.vue'

const props = withDefaults(defineProps<{
  dataSource: DataSource<D, S>
  searchForm: S
  columns: Column[]
  treeTable?: boolean
}>(), {
  treeTable: false,
})
const emits = defineEmits([ 'update:searchForm' ])
const searching = ref(false)

const tableData = ref<Record<string, any>[]>([])

const pagination = reactive<G.Pagination>({
  total: 0,
  pages: 0,
  current: 1,
  size: 20,
})

function searchHandler() {
  searching.value = true
  props.dataSource.paging(props.searchForm)
    .then(res => {
      console.log(res, 3333)
      tableData.value = res.records ?? []
      Object.assign(pagination, {
        total: res.total ?? 0,
        pages: res.pages ?? 0,
        current: res.current ?? 1,
        size: res.size ?? 20,
      })
    })
    .finally(() => {
      searching.value = false
    })
}

onMounted(() => {
  searchHandler()
})

</script>

<template>
  <Page>
    <slot name="searchForm">
      <ElForm :model="searchForm">
        <slot name="searchFormItem"/>
        <ElFormItem>
          <ElButton :loading="searching" @click="searchHandler">搜索</ElButton>
          <ElButton :loading="searching" @click="searchHandler">重置</ElButton>
        </ElFormItem>
      </ElForm>
    </slot>
    <slot name="dataTable">0
      <ElTable :data="tableData" :load="dataSource.treeLoad" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        lazy
        row-key="id">
        <ElTableColumn v-for="col in columns" :key="col.prop"
          :prop="col.prop"
          :width="col.width"
        />
      </ElTable>
      <!-- <ElPagination
        layout="prev, pager, next"
        :page-size="pagination.size"
        :pager-count="pagination.pages"
        :total="pagination.total"/> -->
    </slot>
  </Page>
</template>

<style lang="stylus" scoped>

</style>
