<template>
    <div class="consumer-account">
        <sum-head title="充值管理">
        </sum-head>

        <div class="filter-container">
            <!-- <span>所属区域：</span>
            <el-select v-model="listQuery.manageAreaId" size="small" placeholder="请选择" class="filter-item" style="width: 160px">
                <el-option v-for="item in $root.regionOptions" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
            <el-input placeholder="昵称/手机号码/真实姓名" v-model="listQuery.keyword" size="small" style="width: 200px;" class="filter-item" /> -->
            <!-- <el-button class="filter-item" size="small" type="primary" icon="el-icon-plus" @click="search">新增</el-button> -->
        </div>

        <div class="table-container">
            <div class="table-wrp">
                <el-table
                        v-loading="listLoading"
                        :data="list.resultList"
                        border
                        :header-cell-style="{background:'rgba(60,179,113, .1)'}"
                        highlight-current-row
                        >
                    <el-table-column prop="truename" label="姓名" min-width="10%" align="center"></el-table-column>
                    <el-table-column prop="mobile" label="手机号" min-width="10%" align="center"></el-table-column>
                    <el-table-column prop="create_time" label="充值时间" min-width="10%" align="center"></el-table-column>
                    <el-table-column prop="recharge_money" label="充值金额" min-width="10%" align="center"></el-table-column>
                    <el-table-column prop="gift_money" label="赠送金额" min-width="10%" align="center"></el-table-column>
                    <el-table-column label="操作" align="center" width="300px">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="detail(scope.row)">详情</el-button>
                    <!-- <bike-details ref="bikeDetails" @updateList="getList">aaa</bike-details> -->
                </template>
            </el-table-column>
                </el-table>
                <div class="pagination-container">
                    <el-pagination background layout="prev, pager, next" :page-size="10" :total="list.total" @current-change="curPage"></el-pagination>
                </div>
            </div>
        </div>
        <bike-details ref="bikeDetails" @updateList="getList"></bike-details>
        <bike-details ref="bikeDetails" @update="getList"></bike-details>
        <!-- <import-template ref="importTemplate" @updateList="getList"></import-template>
        <view-qcode ref="viewQcode"></view-qcode>
        <download-qcode ref="downloadQcode"></download-qcode> -->
    </div>
</template>

<script>
import SumHead from '@/components/SumHead'
import bikeDetails from './components/viewQcode'
import api from '@/api/recharge'
export default {
    name: 'consumerAccount',
    components: {
        SumHead,
        bikeDetails
    },
    data() {
        return {
            listQuery: {
                pageNumber: '1',
                pageSize: '10',
                // orderDirection: 'desc',
                // orderProperty: 'create_time',
                manageAreaId: '',
                keyword: undefined
            },
            stepId: '',
            tableQuery: {
                pageNumber: '1',
                pageSize: '12',
                // orderDirection: 'desc',
                // orderProperty: 'create_time',
                id: ''
            },
            listLoading: false,
            list: [],
            tableData: {}
        }
    },
    methods: {
        getList() {
            this.listLoading = true
            api.chargeOrder(this.listQuery).then(res => {
                console.log(res)
                this.listLoading = false
                this.list = res.results
            })
        },
        curPage(val) {
            this.listQuery.pageNumber = val
            this.getList()
        },
        search(){

        },
        handleCurChange(data) {
            console.log(data)
            this.stepId = data.id
            this.tableQuery.id = this.stepId
            // this.getTable()
        },
        detail(id) {
            this.$refs.bikeDetails.open('check', id)
        },
        curTable(val) {
            console.log(this.tableQuery)
            this.tableQuery.id = this.stepId
            if(this.tableQuery.id) {
                this.tableQuery.pageNumber = val
                // this.getTable()
            } else {

            }
        }
    },
    created() {
        this.getList()
    }
}
</script>
<style>
    .table-wrp:first-child tbody .el-table__row {
        cursor: pointer;
    }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.consumer-account {
    position: relative;
    padding: 5px 16px 0;
    margin-bottom: 30px;

    .filter-container {
        padding: 10px 0 10px 12px;
        .filter-item {
            width: 90px;
            margin-right: 20px;
        }
    }

    .table-container {
        display: flex;
        .table-wrp {
            margin-right: 50px;
        }
        .table-wrp:first-child {
            width: 701px;
            text-align: center;
        }
        .table-wrp:last-child {
            flex: 1;
            .text {
                font-size: 16px;
                padding: 15px 0;
            }
        }
        .pagination-container {
            margin: 20px 0 30px;
            float: right;
        }
    }
}
</style>
