<!--
 * @Description: 描述
 * @Author: chd
 * @Date: 2020-08-14 13:10:35
 * @LastEditors: chd
 * @LastEditTime: 2021-03-12 13:33:01
-->
<template>
  <div class="pageinationCon">
    <div class="select-number" v-if="selections">
      选中
      <span style="color: red; font-weight: bold">
        {{ selections ? selections.length : 0 }}
      </span>
    </div>
    <slot></slot>
    <el-pagination
      @current-change="currentChange"
      :current-page.sync="options.currentPage"
      :page-size="options.pageSize"
      :page-sizes="pageSizes"
      :layout="layout"
      :total="options.total"
    >
      <template #default>
        <span class="default-input">
          自定义条数
          <el-input
            placeholder="请输入"
            v-model="customizeNumbers"
            style="width: 55px"
            size="mini"
            @change="onPageSizeInput"
          />
          条/页
        </span>
      </template>
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: 'pagination',
  data() {
    return {
      customizeNumbers: this.options.pageSize,
    }
  },
  props: {
    setValue: {
      type: Function,
      default: () => {},
    },
    options: {
      type: Object,
      default: () => ({}),
    },
    pageSizes: {
      type: Array,
      default: () => [100, 200, 500],
    },
    layout: {
      type: String,
      default: () =>
        'total, prev, pager, next, jumper,slot',
    },
    selections: {
      type: Array,
    },
  },
  methods: {
    currentChange(i) {
      this.setValue({ currentPage: i })
    },
    changeSizes(value) {
      this.setValue({ pageSize: +value })
    },
    onPageSizeInput(value) {
      value = parseInt(value) // + 可能转换出来小数，而 parseInt 就是整数
      if (value <= 0 || isNaN(value)) {
        value = this.options.pageSize || 20
      }
      if (value > 500) value = 500
      this.customizeNumbers = `${value}`
      this.changeSizes(value)
    },
  },
}
</script>
<style scoped>
.pageinationCon::v-deep .default-input {
  margin-left: 24px;
  font-weight: normal !important;
  color: #606266 !important;
}

.select-number {
  position: absolute;
  left: 5px;
  top: 10px;
}
</style>
