<template>
  <div>
    <div style="margin-bottom: 20px">
      <slot name="search" />
    </div>
    <el-table v-loading="loading" cell-class-name="pro-table-cell" :data="tableData" border style="width: 100%"
      v-bind="$attrs">
      <slot />
      <template #empty>
        <pro-empty></pro-empty>
      </template>
    </el-table>
    <div class="pro-table-pagination" v-if="totalCount && pagination">
      <pro-pagination v-model:current-page="SkipCount" v-model:page-size="maxResultCount"
        :total="totalCount"></pro-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRequest } from 'vue-hooks-plus'
import ProEmpty from '../pro-empty/index.vue'
type ITable = {
  /**表格数据的请求 v 参数*/
  api?: any
  params?: any,
  maxResultCount?: number,
  pagination?: boolean
}
const { api, params, maxResultCount } = withDefaults(defineProps<ITable>(), {
  pagination: true,
  maxResultCount: 20
})
const tableData = ref([])
const SkipCount = ref(1)
const totalCount = ref(0)

const { run, loading } = useRequest(
  () =>
    api({
      ...params,
      MaxResultCount: maxResultCount,
      SkipCount: (SkipCount.value - 1) * maxResultCount
    }),
  {
    manual: false,
    onSuccess: (data: any) => {
      tableData.value = data?.items?.map((el, i) => {
        return {
          ...el,
          rowKey: i
        }
      })
      totalCount.value = data.totalCount
    }
  }
)
const onReset = () => {
  SkipCount.value = 1
  run()
}
/** 暴露搜索方法 */
defineExpose({
  run,
  onReset
})
watch(
  () => [SkipCount.value, maxResultCount],
  () => {
    run()
    console.log('变化了')
  }
)
</script>

<style lang="less">
// .pro-table-cell {
//   background-color: #fbfbfb;
//         .cell {
//           font-weight: bold;
//           color: #2e3a59;
//         }
// }
.pro-table-pagination {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}

.el-table {
  .el-table__header {
    .el-table__cell {
      background-color: #fbfbfb;

      .cell {
        font-weight: bold;
        color: #2e3a59;
        text-align: center;
      }
    }
  }

  .el-table__row {
    height: 50px;
  }
}
</style>
