<template>
  <div class="sk-conftable">
    <div v-if="filter" class="toolbar_x">
      <div class="sk-flex">
        <slot></slot>
        <el-button v-if="$slots.default" type="primary" @click="search">搜索</el-button>
      </div>
      <slot name="right"></slot>
    </div>
    <el-table
      ref="elTableNode"
      :data="data"
      v-bind="$attrs"
      @select="handleSelect"
      @select-all="handleSelectAll"
    >
      <conf-clumn :options="tempColOptions" />
    </el-table>
    <div class="pagination_x">
      <el-pagination
        v-bind="pagination"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        @update:pageSize="handleSizeChange"
        @update:currentPage="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" >
import ConfClumn from 'skzz-conf-column'
import { defineComponent, PropType } from 'vue'
import useDtable from './hooks/useDtable'
import useSelection from './hooks/useSelection'

export default defineComponent({
  name: 'SkConfTable',
  components: {
    ConfClumn,
  },
  props: {
    selection: Boolean,
    selectionKey: {
      type: String,
      default: 'id',
    },
    colOption: Array,
    filter: {
      type: Boolean,
      default: false,
    },
    pageKey: {
      type: Object as PropType<{ size: string; limit: string; data: string; total: string; }>,
      default () {
        return {
          size: 'size',
          limit: 'limit',
          data: 'data.data',
          total: 'total',
        }
      },
    },
    toolValue: {
      type: Object,
      default () {
        return {}
      },
    },
    getData: {
      type: Function,
      default () {
        return Promise.resolve({
          total: 99,
          data: {
            data: [
              { name: '1' },
              { name: '2' },
              { name: '3' },
            ],
          },
        })
      },
    },
    pagination: {
      type: Object,
      default () {
        return {
          pageSize: 10,
          currentPage: 1,
          layout:'total, prev, pager, next, jumper, sizes',
        }
      },
    },
  },
  setup () {
    return {
      ...useDtable(),
      ...useSelection(),
    }
  },
})
</script>

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