<template>
  <div class="page-container">
    <div class="page-left-part">
      <el-pagination
        :background="background"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.pageSize"
        :total="page.total"
        layout="total">
      </el-pagination>
    </div>

    <div class="page-right-part" >
    <span class="page-size" >每页
          <el-select v-model="page.pageSize" size="mini" @change="handleSizeChange">
            <el-option
              v-for="item in page.pageSizes"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
          条</span>
      <el-pagination
        :background="background"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.pageSize"
        :total="page.total"
        layout="prev, pager, next, jumper ">
        <span >每页
          <el-select v-model="page.pageSize" size="mini" @change="handleSizeChange">
            <el-option
              v-for="item in page.pageSizes"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
          条</span>
      </el-pagination>
    </div>
    <!--<el-pagination-->
      <!--:background="background"-->
      <!--@current-change="handleCurrentChange"-->
      <!--@size-change="handleSizeChange"-->
      <!--:current-page="page.currentPage"-->
      <!--:page-sizes="page.pageSizes"-->
      <!--:page-size="page.pageSize"-->
      <!--:total="page.total"-->
      <!--:layout="layoutVal">-->
      <!--<slot>-->
        <!--<span class="el-pagination__sizes">每页-->
          <!--<el-select v-model="page.pageSize" size="mini" @change="handleSizeChange">-->
            <!--<el-option-->
              <!--v-for="item in page.pageSizes"-->
              <!--:key="item"-->
              <!--:label="item"-->
              <!--:value="item">-->
            <!--</el-option>-->
          <!--</el-select>-->
          <!--条</span>-->
      <!--</slot>-->
    <!--</el-pagination>-->
  </div>
</template>

<script>
export default {
  name: "page",
  props:['currentPage','pageSize','pageSizes','total','pageStyle'],
  data() {
    return {
      page:{
        currentPage:this.currentPage||1,
        pageSize:this.pageSize||10,
        pageSizes:this.pageSizes||[10, 20, 30, 40],
        total:this.total
      },
      layout:{
        'default':'total, slot, prev, pager, next, jumper ',
        'mini':' prev, pager, next ',
      },
      background:this.pageStyle&&this.pageStyle.background
    };
  },
  computed: {
    layoutVal: function(){
      let pageStyle=this.pageStyle
      let layout=pageStyle?pageStyle.layout:'default'
      return this.layout[layout]?this.layout[layout]:layout;
    }
  },
  mounted(){
    // console.log(this.total)
  },
  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.$emit('sizeChange', val);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.$emit('currentChange', val);
    }
  },

  watch:{
    total:{
      //注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
      handler(curVal,oldVal){
        this.page.total=this.total
        this.$forceUpdate()
      },
      deep:true
    },

    currentPage:{
      //注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
      handler(curVal,oldVal){
        this.page.currentPage=this.currentPage
        this.$forceUpdate()
      },
      deep:true
    }
  }
}
</script>

<style scoped>
</style>
