<!-- @desc:上翻下翻按钮组件  @auth:周兴  @time:2023/2/15 12:57 -->
<template>
  <div>
    <div style="width: 100%;height: 60px;position: fixed ;top:42px;right:-160px;z-index: 999;">
      <card  style="margin-bottom: 1%;padding: 0;height: 60px;display: flex;width: 100%; ">
<!--        <slot></slot>-->
<!--        <DkButton ref="previous"-->
<!--                  style="margin-right: 10px;" @click="previous"-->
<!--                  :loading="loading">{{ vm.$t('previous') }}-->
<!--        </DkButton>-->
<!--        <DkButton ref="next" type="primary" :disabled="loading" @click="next">{{ vm.$t('next') }}</DkButton>-->
        <Page ref="headerPage" size="default" :total="total" :disabled="disabled" :current="current" :page-size="1" :prev-text="vm.$t('previous')" :next-text="vm.$t('next')"
              @on-change="currentPageChange"/>
      </card>
    </div>
    <!--占位为定fixed-->
    <div style="height: 62px">
    </div>
  </div>
</template>

<script>
export default {
  name: "dk-page-button",
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    // 总条数
    total:{
      type: Number,
      default: 3
    },
    // 当前页码
    current:{
      type: Number,
      default: 1
    },
  },
  data() {
    const vm = window.vm
    return {
      vm: vm,
      disabled:false
    }
  },
  methods: {
    /**
     * @desc   : 聚焦事件
     * @author : 周兴
     * @date   : 2022/5/3 18:27
     */
    focus() {
      if (this.$refs.next) {
        this.$refs.next.$el.focus();
      }
    },
    /**
     * @desc   : 当前页改变
     * @author : 周兴
     * @date   : 2023/2/10 10:01
     */
    currentPageChange(e){
      this.$emit('pageChange', e)
    },
  },
}
</script>

<style scoped>
/deep/ .ivu-card-body {
  padding: 16px;
  width: calc(100% - 180px);
  display: flex;
  justify-content: right;
}

</style>
