<template>
    <div class="gains-detailed">
        <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>-->
            <span>收益类型：</span>
            <el-select v-model="listQuery.profitType" size="small" placeholder="请选择" class="filter-item">
                <el-option v-for="item in typeOptions" :key="item.label" :label="item.label" :value="item.value"/>
            </el-select>

            <el-input placeholder="用户呢称/手机号码" v-model="listQuery.keyword" size="small" style="width: 250px;" class="filter-item" />
            <el-button class="filter-item btn" size="small" type="primary" icon="el-icon-search" @click="curPage(1)">搜索</el-button>
        </div>

        <el-table
                v-loading="listLoading"
                :data="list.resultList"
                element-loading-text="Loading"
                size="small"
                :header-cell-style="{background:'rgba(60,179,113, .1)'}">
            <el-table-column prop="time" label="时间" align="center"></el-table-column>
            <el-table-column prop="username" label="用户昵称" align="center"></el-table-column>
            <el-table-column prop="mobile" label="手机号码" align="center"></el-table-column>
            <el-table-column label="收益类型" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.profitType | typeFilter }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="profit" label="收益(元)" align="center"></el-table-column>
            <el-table-column label="分成比例" align="center">
                <template slot-scope="scope">
                    {{ scope.row.percentage }} %
                </template>
            </el-table-column>
            <el-table-column prop="actualProfit" label="实际收益(元)" align="center"></el-table-column>
        </el-table>

        <div class="pagination-container" v-show="!listLoading">
            <span>共{{ list.total }}条记录</span>
            <el-pagination background layout="prev, pager, next" :page-size="listQuery.pageSize" :total="list.total" @current-change="curPage" style="float: right;"></el-pagination>
        </div>
    </div>
</template>

<script>
    import api from "@/api/capital"
    export default {
        name: "all-detailed",
        data() {
            return {
                listLoading: false,
                listQuery: {
                    pageNumber: 1,
                    pageSize: 15,
                    manageAreaId: '',
                    profitType: '',
                    // orderDirection: 'desc',
                    // orderProperty: 'create_time',
                    keyword: ''
                },
                typeOptions: [
                    { label: '全部', value: ''},
                    { label: '骑行', value: 'UseBikeCost'},
                    { label: '充值', value: 'Recharge'}
                ],
                list: []
            }
        },
        filters: {
            typeFilter(type) {
                const typeMap = {
                    'UseBikeCost': '骑行',
                    'Recharge': '充值'
                }
                return typeMap[type]
            },
            /*payFilter(type) {
                let typeMap = {
                    Wallet: '余额',
                    WeiXinAPPPay: '微信支付',
                    WeiXinJSAPIPay: '微信支付'
                }
                return typeMap[type]
            }*/
        },
        methods: {
            getList() {
                this.listLoading = true
                api.findSumProfitDetailPage(this.listQuery).then(res => {
                    this.listLoading = false
                    console.log(res)
                    this.list = res.results
                }).catch(err => {
                    console.log(err)
                })
            },
            curPage(val) {
                this.listQuery.pageNumber = val
                this.getList()
            },
        },
        created() {
            this.getList()
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .gains-detailed {
        .filter-container {
            padding: 0px 0 10px 12px;
            .filter-item {
                width: 120px;
                margin-right: 20px;
            }
            .btn {
                width: 90px;
            }
        }
        .pagination-container {
            margin: 20px 0 30px;
        }
    }
</style>

