<template>
  <div class="uif-list-header">
    <div class="header-title">{{title}}</div>
    <slot><div class="header-free"></div></slot>
    <u-button-group v-if="menus.length" :menus="menus" @click="onClick"></u-button-group>
    <u-pager v-if="paginate" :total="total" :size="size" :value="index" @change="onChange"></u-pager>
  </div>
</template>

<script>
import UButtonGroup from '@uif/admin/lib/components/button-group'
import UPager from '@uif/admin/lib/components/pager'
export default {
  name: 'u-list-header',
  components: {
    UButtonGroup,
    UPager
  },
  props: {
    title: {
      type: String,
      required: true
    },
    paginate: {
      type: Boolean,
      default: false
    },
    // 当前页码
    index: {
      type: Number,
      default: 1
    },
    // 数据总数
    total: {
      type: Number,
      default: 0
    },
    // 每页条数
    size: {
      type: Number,
      default: 50
    },
    menus: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    onChange (value) {
      this.$emit('change', value)
    },
    onClick (value) {
      this.$emit('click', value)
    }
  }
}
</script>
