<!--分页组件-->
<template>
  <div class="footer">
    <div>共{{ count }}条记录 第{{ offset }}/{{ total }}页</div>
    <div>
      <el-pagination
        ref="compontentPage"
        :current-page.sync="offset"
        background
        layout="  prev, pager, next,sizes, jumper"
        :page-size="limit"
        :total="count"
        @size-change="changeSize"
        @current-change="changeOffset"
      />
    </div>
    <!-- <div>页码</div> -->
  </div>
</template>

<script>
export default {
  model: {
    prop: 'isFristPage',
    event: 'changeFristPage'
  },
  props: {
    // 总页数
    total: {
      type: Number,
      default: 1
    },
    // 当前页
    offset: {
      type: Number,
      default: 1
    },
    // 总条数
    count: {
      type: Number,
      default: 10
    },
    // 当前页条数
    limit: {
      type: Number,
      default: 10
    },
    // 是否为第一页
    isFristPage: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  watch: {
    isFristPage(current) {
      if (current) {
        console.log(current)
        // 分页组件跳转到第一页
        this.$refs.compontentPage.handleCurrentChange(1)
        this.$emit('changeFristPage', false)
      }
    }
  },
  methods: {
    // 当前条数改变时触发
    changeSize(res) {
      //  求得当前总页数
      //  let  currentPage = Math.ceil(this.total/res)
      //  if(currentPage<this.offset){
      //     // this.offset= this.offset
      //     // 向外发送一个事件改变当前页
      //     this.$emit('setOffset',this.currentPage)
      // this.$refs.compontentPage.handleCurrentChange(this.currentPage)  // 重查页面数据 及跟新分页组件
      //     return
      //   }

      // 发送每页条数数量
      this.$emit('setLimit', res)
    },
    // 当前页码改变时触发
    changeOffset(index) {
      // console.log(index,"currentPage");
      this.$emit('setOffset', index)
    }
  }
}
</script>

<style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: space-between;
  color: #6666;
  margin: 30px 10px;
}
</style>