<template>
    <div class='ks-pagin' :class="className" v-if="typeof total === 'number' && total > 0">
        <p class='ks-pagin-total' v-if='!noTotal'>共{{total}}条 
            <span v-if='isShowSelect'>，已选择<span class="ks-pagin-select">{{selectKeys}}</span>条数据
            </span>
        </p>
        <Pagination
            class='ks-pagin-pagin'
            :limits="limits"
            :total='total'
            v-bind="$attrs"
            @change="onChangePagination"
            size="small" 
            showGoto
        />
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { Pagination } from '@king-design/vue';
import { has} from 'lodash-es';
const props = defineProps({
  total: {
    type: Number,
    default: 0
  },
  limits: {
    type: Array,
    default: [10, 20, 50, 100]
  },
  selectKeys: Number,
  change: Function,
  className: String,
  noTotal: {
    type: Boolean,
    default: false
  }
});
// 接收父组件声明的方法
const emit = defineEmits(['change'])
const isShowSelect = typeof props.selectKeys === 'number'
console.log("🚀 ~ isShowSelect:", props,isShowSelect)
const onChangePagination = (page, ...args) => {
    emit('change', page, ...args);
}

</script>

<style scoped lang="less">
.ks-pagin {
    display: flex;
    justify-content: flex-end;
    .ks-pagin-select {
        font-weight: 500;
        padding: 0px 2px;
    }
    .ks-pagin-total {
        margin: 0px;
        position: relative;
        top: 3px;  
        font-size: 12px;
    }
    .ks-pagin-pagin {
        text-align: right;
        flex: 3;
        white-space: nowrap;
    }
}
.ks-pagin :deep(.k-pagination-total) {
    display: none;
}
.ks-pagin :deep(.k-input.k-small) {
    width: 40px;
}
.ks-pagin :deep(.c-middle:last-child) {
    display: none;
}
.ks-pagin :deep(.k-pagination-limits) {
    margin-left: 6px;
}
</style>
