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

<script>
export default {
  data(){
    return {
    }
  },
  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,
    }
  },
  model:{
    prop: 'isFristPage',
    event: 'changeFristPage'
  },
  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);
    },
  },
  watch:{
    isFristPage(current){
    
      if(current){
        console.log(current);
        // 分页组件跳转到第一页
        this.$refs.compontentPage.handleCurrentChange(1)  
        this.$emit('changeFristPage',false)
      }
      
    }
  }
}
</script>

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