<template>
  <div class="paginationContainer">
        <el-table
          border 
         :header-cell-style="{
            'background-color': '#1989fa',
            'color': '#fff',
            'font-weight': '40'
        }"
        :key="key" :stripe="stripe" style="font-size:12px;width: 368px;height:420px;overflow:auto;background:rgba(255, 255, 255, 0.3)"
        :data="userList"
        >
            <el-table-column type="index" width="60" label="序号">	
            </el-table-column>
            <el-table-column label="名称" prop="name" width="103">	
            </el-table-column>
            <el-table-column label="地址" prop="address" width="92">	
            </el-table-column>
            <!-- <el-table-column label="行政区" prop="adname" width="180">	
            </el-table-column> -->
            <el-table-column label="类型" prop="type" width="113">	
            </el-table-column>	
        </el-table>
        <!-- layout="total, sizes, prev, pager, next, jumper" -->
        <el-pagination
                small
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="pagesize"
                :pager-count=7
                layout="total, prev, pager, next"
                :total="countPage"
                style="width:100%"
                >
        </el-pagination>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
export default {
  name: 'paginationPanel',
  data () {
      return {
				currentPage:1, //默认显示第一页
				pagesize:10,   //每页的数据
                userList: [],
                countPage:1,
                key:new Date()+"",
                stripe:false,//是否为斑马纹 table?
      }
  },
  mounted(){
    this.findData();
  },
	methods: {
		// 初始页currentPage、初始每页数据数pagesize和数据data
		handleSizeChange: function (size) {
				this.pagesize = size;
                console.log(this.pagesize)
                this.findData();
                // console.log(`每页 ${val} 条`);
        },
        // queryData(){
        //     this.findData();
        // },
		handleCurrentChange: function(currentPage){
				this.currentPage = currentPage;
                console.log(this.currentPage)
                this.findData();
                // console.log(`当前页: ${val}`);
        },
        findData(){//后端分页
            let config =  {
                'name':['汽车'],
                'id':'poiArrLayer',
                'scale':0.9,
                'zIndex':10,
                'serurl':'http://127.0.0.1:7001/poiArrDataPagination',
                'tableName':'qingpupoi',
                'img':'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAfCAYAAAAFkva3AAACd0lEQVR42qWU3UuTYRjG34iiw+gk6CAp2XRqsyazWRuz8c656UF/QV8URhQSNaMP5kzRudQ5Zy3zD+i0gygiZ44oogjDJJBqjMTS1Gxzm1s17+4rYmBzbXt38OPhue/r+jEG7yMQURoWZ2QHY2XGmBkm8ff0Y479er01F3N3eBPTzsQs7gQ1eJPUOETUOMzwiTvm2COH/LqyekdoK+Mz98ep4Q4XhzODPXKcH2W2rZGZupY2MiP17hWycDBXkOfec2ZzSlbXuWg39UXJPER5gx76BJmxY347EzPx/1HHy3xBD314BLF97qLYs0zG26uSQZ89VsHQ9mVUHFgh0ZuUDPrwCIfsM3OGmz/I4P0lGfTZMyvU2qaTtbd+UqHAI+ivBZf1gwnSs10q6LMnLOiuBsZ1rgjpeCCZ/gix542gvfLerXXM00FPXDJaxwKxxyMcuDSlqbEFSeNZkQz68Pz5Ampa3o3t75yl6oFY3qCHfupz0lgnS5i42hUmtTuaM8ijh35KBqovTLSp7Z+oqj+aM8ijl/YEqc+Pb2ECqq6vtM8VyQpyyKOXJgNVza8Pqy5PkbJvOSvIIZ/xpQWqcy9HKvnnV/SGM4I953zI/1e29+wLJZMs7w1RJrBHLqsMVJ55drfCFiBFz/c0MMceuZxkytNPy5hV+Y0l+hfMsc9ZBvY0+e+VtgZJ5vyWAnfMsc9LVn7qiahofkXFzsUUuGOet6zspG8D87G44zPt7l4gnLhjnrcMKE48tsmsb6mIXwWcfG/FXJKs9PijUnmTn3byE4UTd8kyUHLs4Yei69OEE/eCZPKjDwZ3tUwSzoJlsiP3RSbEGLNlfwPf80fNP6DL+QAAAABJRU5ErkJggg==',
                "scale":1,
                "zIndex":10
            }
            var initData = {
                "posArray": [{
                    "name": config.name,
                    "tableName": config.tableName,
                    'pageSize':this.pagesize,
                    'currentPage':this.currentPage
                }]
            }
            var _this = this;
            axios.post(config.serurl, qs.stringify(initData), {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                }
            }).then(res => {
                let data = res.data
                _this.userList = [];
                _this.key = new Date()+"";//需要唯一的key值
                _this.userList = data.sliceData
                // _this.countPage = data.totalPages
                _this.countPage = data.allData.length;
                // _this.$set(_this.userList,data.finalDatalist)
                // _this.userList = [];
                // _this.userList = [{
                //         name:'新城盛景D区1',
                //         address:'崧文路338弄19号',
                //         adname:'青浦区',
                //         type:'商务住宅'
                // }]
            })
        },
		handleUserList() {
            // this.userList = [];
            // this.userList = [{
            //         name:'新城盛景D区1',
            //         address:'崧文路338弄19号',
            //         adname:'青浦区',
            //         type:'商务住宅'
            //     }
            // ]
		}
	}
}
</script>
<style scoped>
.paginationContainer {
        width: 368px;
        height: auto;
        margin-top: 5px;
        position: absolute;
        background: rgb(255, 255, 255);
}
.el-table__header-wrapper{
    height: 32px;
}
.el-pager .number{
    margin-top:0px;
}
</style>