<!--
 * @Descripttion: 下级查看
 * @version: 1.0
 * @Author: zzx
 * @Date: 2024-11-09 16:08:16
 * @LastEditors: zzx
 * @LastEditTime: 2024-11-19 16:08:16
-->
<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="hover">
            <back-button></back-button>
        </el-card>
        <div class="table-container">
            <el-table ref="adminTable" :data="list" style="width: 100%" v-loading="juniorListLoading" border>
                <el-table-column label="分销员编号" width="100" align="center" prop="number"></el-table-column>
                <el-table-column label="分销员姓名" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.userName||'--' }}
                    </template>
                </el-table-column>
                <el-table-column label="分销员层级" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.type == 1 || scope.row.type == null" type="info">普通用户</el-tag>
                        <el-tag v-else-if="scope.row.type == 2" type="success">一级分销</el-tag>
                        <el-tag v-else="scope.row.type == 3" type="warning">二级分销</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="手机号" align="center" prop="phone"></el-table-column>
                <el-table-column label="身份证号码" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.card || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="银行卡号" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.bankCard || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="开户行" align="center" prop="depositBank"></el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination background @size-change="juniorhandleSizeChange" @current-change="juniorhandleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper" :current-page.sync="juniorQuery.pageNum"
                :page-size="juniorQuery.pageSize" :page-sizes="[10, 15, 20]" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { getJuniorList } from "@/api/distribution";
const juniorListQuery = {
    pageNum: 1,
    pageSize: 10,
    userId: null,
};
export default {
    name: "junior",
    data() {
        return {
            juniorQuery: Object.assign({}, juniorListQuery),
            list: null,
            total: null,
            juniorListLoading: false,
        };
    },
    created() {
        this.juniorQuery.userId = this.$route.query.adminUserId
        this.getList();
    },
    methods: {
        juniorhandleSizeChange(val) {
            this.juniorQuery.pageNum = 1;
            this.juniorQuery.pageSize = val;
            this.getList();
        },
        juniorhandleCurrentChange(val) {
            this.juniorQuery.pageNum = val;
            this.getList();
        },
        getList() {
            this.juniorListLoading = true;
            getJuniorList(this.juniorQuery).then((response) => {
                this.juniorListLoading = false;
                this.list = response.data.list;
                this.total = response.data.total;
            });
        },
    },
};
</script>
<style scoped></style>
