<template>
    <div class="add-edit-dialog-container">
        <el-dialog
            title="用户分销返利"
            :visible.sync="visible"
            width="400px"
            :before-close="close"
            :close-on-click-modal="false"
        >
            <div class="total" v-if="data.length>0">返利总金额:{{total | pricePipe(2, '￥', true)}}</div>
            <el-tree
                :data="data"
                node-key="userId"
                show-checkbox
                :props="defaultProps"
                default-expand-all
                :expand-on-click-node="false"
            >
                <div class="custom-tree-node" slot-scope="{ node,data }">
                    <span class="user">手机号{{ node.label }}</span>
                    <span>返利:{{data.rebate | pricePipe(2, '￥', true)}}</span>
                </div>
            </el-tree>
        </el-dialog>
    </div>
</template>
<script>
import { queryUserRebates } from '@/apps/mobile/api/operation/user/index';
export default {
    data() {
        return {
            visible: false,
            id: null,
            data: [],
            total: 0,
            defaultProps: {
                children: 'lowerUserInfoList',
                label: 'mobile',
            },
        };
    },
    methods: {
        open(id) {
            this.id = id;
            this.query();
            this.visible = true;
        },
        close() {
            this.visible = false;
        },
        query() {
            queryUserRebates(this.id)
                .then(res => {
                    console.log(res);
                    this.data = res.data || [];
                    if (res.data && res.data.length) {
                        this.total = res.data[0].rebateAll;
                    }
                })
                .catch();
        },
    },
};
</script>
<style lang="stylus" scoped>
.add-edit-dialog-container {
    .total {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .user {
        margin-right: 10px;
    }
}
</style>
