<template>
    <div>
        <!-- 列表 -->
        <el-table
            :data="totalData.dataList"
            highlight-current-row
            v-loading="listLoading"
            style="width: 100%;"
        >
            <el-table-column prop="storeCode" label="门店号码"></el-table-column>
            <el-table-column prop="title" label="门店名称"></el-table-column>
            <el-table-column prop="address" label="门店地址"></el-table-column>
            <el-table-column prop="bankHour" label="营业时间"></el-table-column>
            <!-- <el-table-column prop="lat" label="经度">
      </el-table-column>
      <el-table-column prop="lng" label="纬度">
            </el-table-column>-->
            <el-table-column prop="loc" label="地理位置"></el-table-column>
            <el-table-column prop="mobile" label="联系电话"></el-table-column>
        </el-table>

        <!--分页导航-->
        <el-col :span="24" class="toolbar fl pagination-wrap">
            <div class="page-tips">总共{{total}}条记录，每页{{pageSize}}条，总共{{pageNum}}页</div>
            <el-pagination
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                :total="total"
                style="float:right;"
            ></el-pagination>
        </el-col>
    </div>
</template>

<script>
import { getStoreList } from '../../api/api.js'
export default {
    data() {
        return {
            key: 'value',
            page: 1,
            pageSize: 10,
            total: 0,
            totalData: {
                dataList: []
            },
            listLoading: false
        }
    },
    computed: {
        pageNum() {
            return Math.ceil(this.total / this.pageSize)
        }
    },
    methods: {
        name() {},
        // 点击页数
        handleCurrentChange(val) {
            this.page = val
            console.log('this.page:', this.page)
            this.reqQuery()
        },
        reqQuery() {
            let data = {
                page: this.page,
                size: this.pageSize
            }
            getStoreList(data).then(result => {
                let { content, code } = result
                let { list, total } = content
                this.total = total
                list.forEach(element => {
                    element.loc = element.lat + ' , ' + element.lng
                })
                this.$set(this.totalData, 'dataList', list)
                console.log('this.totalData:', this.totalData.dataList)
            })
        }
    },

    created() {
        this.reqQuery()
    }
}
</script>

<style lang="less" scoped>
.tool-wrap {
    color: #333333;
}

.pagination-wrap {
    .page-tips {
        height: 32px;
        line-height: 32px;
        color: #333333;
    }
}

.fl {
    display: flex;
    justify-content: space-between;
}

.fle {
    display: flex;
    justify-content: flex-end;
}

</style>