<template>
  <div class="hw-custom-list">
    <div class="content-wrapper">
      <slot></slot>
    </div>
    <hw-pagination
      :total="total"
      :total-pages="pages"
      :current-page="currentPage"
      :page-size="pageSize"
      @page-change="handlePageChange">
    </hw-pagination>
  </div>
</template>

<script>
import HwPagination from './HwPagination.vue'

export default {
  name: 'HwCustomList',
  components: {
    HwPagination
  },
  props: {
    model: {
      type: Object,
      required: true
    },
    pageSize: {
      type: Number,
      default: 10
    },
    currentPage: {
      type: Number,
      default: 1
    }
  },
  computed: {
    total() {
      return this.model.total || 0
    },
    pages() {
      return this.model.pages || 0
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page
      this.$emit('page-change', page)
    },
    search() {
      this.$emit('search', this.currentPage, this.pageSize)
    }
  }
}
</script>

<style scoped>
.hw-custom-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.content-wrapper {
  flex-grow: 1;
  overflow-y: auto;
}
</style>
