<template>
    <div class="consumer-account">
        <sum-head title="钱包管理" text="总用户数" :sum="list.total">
            充值总金额：<span>{{ list.totalRechargeMoney }}</span>
            总余额：<span>{{ list.totalWalletMoney }}</span>
        </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-search" @click="curPage(1)">搜索</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
                        @current-change="handleCurChange">
                    <el-table-column prop="username" label="昵称" width="120" align="center"></el-table-column>
                    <el-table-column prop="mobile" label="手机号码" width="120" align="center"></el-table-column>
                    <el-table-column prop="manageAreaName" label="所属区域" width="150" align="center"></el-table-column>
                    <el-table-column prop="deposit" label="押金(元)" width="80" align="center"></el-table-column>
                    <el-table-column prop="recharge" label="充值金额(元)" width="110" align="center"></el-table-column>
                    <el-table-column prop="walletMoney" label="钱包余额(元)" width="120" align="center"></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 class="table-wrp">
                <div class="text">账号明细</div>
                <el-table
                    v-loading="listLoading"
                    :data="tableData.resultList"
                    stripe
                    :header-cell-style="{background: 'rgba(48, 65, 86, .1)'}">
                    <el-table-column prop="username" label="昵称" align="center"></el-table-column>
                    <el-table-column prop="type" label="交易类型" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.tradeType | typeFilter }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" label="支付方式" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.payType | payFilter }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="changeMoney" label="交易金额" align="center"></el-table-column>
                    <el-table-column prop="createTime" label="交易时间" align="center"></el-table-column>
                </el-table>
                <div class="pagination-container">
                    <el-pagination background layout="prev, pager, next" :page-size="10" :total="tableData.total" @current-change="curTable"></el-pagination>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import SumHead from '@/components/SumHead'
import api from '@/api/member'
export default {
    name: 'consumerAccount',
    components: {
        SumHead
    },
    filters: {
        typeFilter(type) {
            let typeMap = {
                Recharge: '充值',
                Cost: '消费',
                Refund: '返还',
                Others: '其他'
            }
            return typeMap[type]
        },
        payFilter(type) {
            let typeMap = {
                Wallet: '余额',
                WeiXinAPPPay: '微信支付',
                WeiXinJSAPIPay: '微信支付',
            }
            return typeMap[type]
        }
    },
    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.getAccountList(this.listQuery).then(res => {
                console.log(res)
                this.listLoading = false
                this.list = res.results
            })
        },
        curPage(val) {
            this.listQuery.pageNumber = val
            this.getList()
        },
        handleCurChange(data) {
            console.log(data)
            this.stepId = data.id
            this.tableQuery.id = this.stepId
            this.getTable()
        },
        getTable() {
            this.listLoading = true
            api.getAccountDetail(this.tableQuery).then(res => {
                console.log(res)
                this.listLoading = false
                this.tableData = res.results
                if(this.tableData.resultList.length==0) {
                    this.$message({
                        type: 'denger',
                        message: '此用户无消费记录'
                    });
                }
            })
        },
        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>
