<template>
	<div class="myMoney">
		<div @click="goBack()" class="back flex align-center">
			<el-icon>
				<ArrowLeft />
			</el-icon>
			返回
		</div>
		<!-- 顶部操作栏 -->
		<div class="topBox flex align-center justify-around">
			<div class="topBox-item">
				<div class="topBox-item-txt">
					总收益
				</div>
				<div class="topBox-item-money">
					{{teamMoney}}元
				</div>
			</div>
			<div class="topBox-item">
				<div class="topBox-item-txt">
					一级收益：<span>{{oneTeamMoney}}元</span>
				</div>

			</div>
			<div class="topBox-item">
				<div class="topBox-item-txt">
					二级收益：<span>{{twoTeamMoney}}元</span>
				</div>
			</div>
			<div class="topBox-item">
				<el-button @click="getMoney()" style="width: 100px;" type="primary">提现</el-button>
				<!-- <el-button style="width: 100px;">收益明细</el-button> -->
			</div>
		</div>
		<div class="tabbleList">
			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
				<el-tab-pane label="一级" name="first">
					<el-table v-loading="loading" :data="list" style="width: 100%">
						<el-table-column prop="userId" label="编号" />
						<el-table-column prop="date" label="头像">
							<template #default="scope">
								<div style="display: flex; align-items: center">
									<img style="width: 40px;height: 40px;border-radius: 50%;" :src="scope.row.avatar"
										alt="" />
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="userName" label="名称" />
						<el-table-column prop="money" label="奖励" />
					</el-table>
					<!-- 分页 -->
					<div v-if="pages>0" class="tabbleList-page flex align-center justify-end">
						<el-pagination @current-change="currentChange" v-model="page" :page-count="pages"
							:default-page-size="limit" background layout="prev, pager, next" />
					</div>
				</el-tab-pane>
				<el-tab-pane label="二级" name="second">
					<el-table v-loading="loading" :data="list" style="width: 100%">
						<el-table-column prop="userId" label="编号" />
						<el-table-column prop="date" label="头像">
							<template #default="scope">
								<div style="display: flex; align-items: center">
									<img style="width: 40px;height: 40px;border-radius: 50%;" :src="scope.row.avatar"
										alt="" />
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="userName" label="名称" />
						<el-table-column prop="money" label="奖励" />
					</el-table>
					<!-- 分页 -->
					<div v-if="pages>0" class="tabbleList-page flex align-center justify-end">
						<el-pagination @current-change="currentChange" v-model="page" :page-count="pages"
							:default-page-size="limit" background layout="prev, pager, next" />
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				countChildren: 0, //一级邀请总人数
				countChildrenChildren: 0, //二级邀请总人数
				page: 1,
				pages: 1,
				limit: 10,
				list: [], //列表
				activeName: 'first',
				teamMoney: 0, //总收益
				oneTeamMoney: 0, //一级收益
				twoTeamMoney: 0, //二级收益
				type: 1,
			}
		},
		mounted() {
			this.getTeamMoney()
			this.getList()
		},
		methods: {
			//去提现页面
			getMoney() {
				this.$router.push({
					name: 'getMoney'
				})
			},
			//切换等级
			handleClick(e) {
				if (e.props.name == 'first') {
					this.type = 1
				} else {
					this.type = 2
				}
				this.page = 1
				this.getList()
				this.getTeamMoney()
			},
			//返回上一页
			goBack() {
				this.$router.go(-1)
			},
			//获取收益信息
			getTeamMoney() {
				this.$Request.get('/app/invite/getExtensionData').then(res => {
					if (res.code == 0) {
						this.teamMoney = res.data.extensionProfit
						this.oneTeamMoney = res.data.oneMoney
						this.twoTeamMoney = res.data.twoMoney
					}
				});
			},
			//收益列表
			getList() {
				let data = {
					page: this.page,
					limit: this.limit,
					type: this.type,
				}
				this.loading = true
				this.$Request.get('/app/invite/getProfitList', {
					params: data
				}).then(res => {
					if (res.code == 0 && res.data) {
						this.pages = res.data.pages
						res.data.records.map(item => {
							if (!item.money) {
								item.money = 0
							}
						})
						this.list = res.data.records
						this.loading = false
					} else {
						this.loading = false
					}
				});
			},
			//分页
			currentChange(e) {
				this.page = e
				this.getList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.back {
		width: fit-content;
		color: #999999;
		cursor: pointer;
		font-size: 14px;
	}

	.topBox {
		width: 100%;
		height: 120px;
		background-color: #FAFAFA;
		border-radius: 12px;
		margin-top: 20px;

		.topBox-item {
			text-align: center;
			font-size: 14px;
			color: #666666;

			.topBox-item-txt {
				span {
					color: #333333;
					font-weight: bold;
				}
			}

			.topBox-item-money {
				color: #00DD9A;
				font-weight: bold;
			}
		}
	}

	.tabbleList {
		width: 100%;
		margin-top: 20px;

		.tabbleList-page {
			width: 100%;
			margin-top: 20px;
		}
	}
</style>