<template>
    <div class="page">
        <ul class="list">
            <li v-for="item of listData" :key="item.id">
                <my-image class="img" :src="item.headIcon || '/static/share/avatar.png'"></my-image>
                <div class="info">
                    <div class="name">{{ item.nickName || '' }}</div>
                    <div class="mobile">手机号：{{ item.mobile || '' }}</div>
                    <div class="comission">
                        佣金：{{ item.comission / 100 }}
                    </div>
                </div>
            </li>
        </ul>
        <div class="more-text" v-if="dataEnd">- 没有更多数据了 -</div>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
export default {
    name: "",
    components: { MyImage },
    // 数据
    data() {
        return {
            pageIndex: 1,
            dataEnd: false,
            listData: [],
        };
    },
    onShow() {},

    onLoad() {
        this.getList();
    },
    onPullDownRefresh() {
        this.getList(true);
    },
    onReachBottom() {
        this.getMoreList();
    },

    // 函数
    methods: {
        getList(isPull) {
            uni.showLoading({
                title: "加载中...",
            });
            this.pageIndex = 1;
            this.dataEnd = false;
            let sendData = {
                pageIndex: this.pageIndex++,
                // appId: this.shopInfo.id,
            };
            this.api.get("/User/GetGroupLeaderList", sendData).then((res) => {
                if (isPull) {
                    uni.stopPullDownRefresh();
                }
                uni.hideLoading();
                this.listData = res.data.groupLeaderList;
                if (!res.data.groupLeaderList.length) {
                    this.dataEnd = true;
                }
            });
        },
        getMoreList() {
            uni.showLoading({
                title: "加载中...",
            });
            let sendData = {
                pageIndex: this.pageIndex++,
            };
            this.api.get("/User/GetGroupLeaderList", sendData).then((res) => {
                uni.hideLoading();
                this.listData = [...this.listData, ...res.data.groupLeaderList];
                if (!res.data.groupLeaderList.length) {
                    this.dataEnd = true;
                }
            });
        },
    },

    // 数据计算
    computed: {},

    // 数据监听
    watch: {},
};
</script>

<style lang="scss" scoped>
.filter {
    display: flex;
    align-items: center;
    padding: px(40);
    font-size: px(44);
    background-color: #fff;
    .row {
        padding: 0 px(20);
        flex-shrink: 0;
    }
    .key {
        flex-shrink: 0;
    }
    .value {
        border: 1px solid #f1f1f1;
        height: px(80);
        width: px(200);
        padding: 0 px(10);
        width: 90%;
    }
}

.profit-info {
    text-align: center;
    padding: px(60) px(40);
    background-color: #fff;
    .tit {
        font-size: px(44);
    }
    .money {
        font-size: px(56);
        color: #ff4b26;
        margin-top: px(30);
    }
}
.list {
    padding: px(50) 0;
    border-top: 1px solid #f1f1f1;
    background-color: #fff;
    li {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        padding: px(30);
        border-bottom: 1px solid #f1f1f1;
    }
    .img {
        width: px(200);
        height: px(200);
        margin-right: px(30);
        flex-shrink: 0;
        /deep/ img {
            width: px(200);
            height: px(200);
            background-color: #eee;
        }
    }
    .info {
        width: 100%;
        .name {
            font-size: px(48);
        }
        div ~ div {
            margin-top: px(15);
        }
        .mobile,
        .comission {
            color: #666;
        }
    }
}
.blod {
    font-weight: bold;
}
.more-text {
    display: flex;
    justify-content: center;
    padding-bottom: px(60);
    font-size: px(34);
    color: #999;
}
.shop-name {
    color: #666;
    display: inline-block;
    margin-left: px(10);
    font-size: px(40);
}
</style>