<template>
	<div class="myTeam">
		<!-- 顶部模块 -->
		<div class="topMod flex align-center justify-between">
			<div class="topMod-item flex align-center justify-between topMod-item1">
				<div class="topMod-item-l">
					<div class="topMod-item-l-title txtColor999999">
						已邀请
					</div>
					<div class="topMod-item-l-num">
						<span>{{countChildren}}</span>人
					</div>
					<div class="topMod-item-l-line">

					</div>
				</div>
				<div class="topMod-item-r">
					<img src="../../../public/images/setting/teamNum.png" alt="" srcset="" />
				</div>
			</div>
			<div @click="goMymoney()" class="topMod-item flex align-center justify-between topMod-item2">
				<div class="topMod-item-l">
					<div class="topMod-item-l-title txtColor999999">
						我的收益
					</div>
					<div class="topMod-item-l-num">
						<span>{{teamMoney}}</span>元
					</div>
					<div class="topMod-item-l-line" style="background-color: #3756E8;">

					</div>
				</div>
				<div class="topMod-item-r">
					<img src="../../../public/images/setting/teamMoney.png" alt="" srcset="" />
				</div>
			</div>
			<div class="topMod-item flex align-center justify-between topMod-item3">
				<div class="topMod-item-l">
					<div class="topMod-item-l-title" v-if="userType==1">
						用户可得邀请好友开通会员奖励
					</div>
					<div class="topMod-item-l-title" v-else>
						企业可得邀请人在平台消费奖励
					</div>
					<div class="topMod-item-l-rate">
						*一级可得{{yijiyongjin * 100}}%的消费奖励
					</div>
					<div class="topMod-item-l-rate">
						*二级可得{{erjiyongjin * 100}}%的消费奖励
					</div>
					<div class="topMod-item-l-btn">
						<el-button @click="tuiguang()" type="primary" size="small">立即邀请</el-button>
					</div>
				</div>
				<div class="topMod-item-r">
					<img src="../../../public/images/setting/teamZhiRate.png" alt="" srcset="" />
				</div>
			</div>
		</div>
		<!-- 底部邀请人列表 -->
		<div class="tabbleList">
			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
				<el-tab-pane :label="'一级('+countChildren+')'" 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="createTime" 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="'二级('+countChildrenChildren+')'" 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="createTime" 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>
	import {
		ElMessageBox,
		ElMessage,
	} from 'element-plus'
	import {
		ROOTPATH,
		ROOTPATH4
	} from '../../../comment/httpUrl.js'
	export default {
		data() {
			return {
				activeName: 'first',
				countChildren: 0, //一级邀请人数
				countChildrenChildren: 0, //二级邀请人数
				list: [], //邀请人的列表
				page: 1,
				pages: 1,
				limit: 5,
				loading: false,
				type: 1,
				teamMoney: 0, //我的收益
				yijiyongjin: 0, //一级收益比例
				erjiyongjin: 0, //二级收益比例
				userType: 1, //用户类型
				tuiguangTxt: '', //推广文字
				url: '',
			}
		},
		computed: {
			invitationCode() {
				return this.$store.state.invitationCode;
			},
		},
		mounted() {
			this.getList()
			this.getTeamMoney()
			this.getUserInfo()
			this.getTuiGunagTxts()
		},
		methods: {
			//文案推广
			getTuiGunagTxts() {
				this.$Request.get('/app/common/type/255').then(res => {
					if (res.code === 0) {
						if (res.data && res.data.value) {
							this.tuiguangTxt = res.data.value;
						}
					}
				});
				this.url = ROOTPATH4 + 'index?inviterCode=' + this.invitationCode;
			},
			tuiguang() {
				ElMessageBox.confirm(
					this.tuiguangTxt + this.url,
					'文案推广', {
						confirmButtonText: '一键复制',
						cancelButtonText: '取消',
						type: 'warning',
					}
				).then(() => {
					navigator.clipboard.writeText(this.tuiguangTxt + this.url)
						.then(() => {
							ElMessage({
								type: 'success',
								message: '复制成功',
								duration: 1500,
								offset: this.screenHeight / 2
							})
							this.dialogShare = false
						})
						.catch(() => {
							ElMessage({
								type: 'info',
								message: '复制失败',
								duration: 1500,
								offset: this.screenHeight / 2
							})

						})
				}).catch(() => {

				})
			},
			//去邀请页面
			goShare() {
				if (localStorage.getItem('userType') == 1) {
					this.$router.push({
						name: 'addResume'
					})
				} else {
					this.$router.push({
						name: 'enterprise'
					})
				}

			},
			//去我的收益页面
			goMymoney() {
				this.$router.push({
					name: 'myMoney'
				})
			},
			getUserInfo() {
				this.$Request.get('/app/user/selectUserById').then(res => {
					if (res.code == 0) {
						this.userType = res.data.userType
						this.yijiyongjin = res.data.zhiRate ? res.data.zhiRate : 0;
						this.erjiyongjin = res.data.feiRate ? res.data.feiRate : 0;
					}
				});
			},
			//用户推广信息
			getTeamMoney() {
				this.$Request.get('/app/invite/getExtensionData').then(res => {
					if (res.code == 0) {
						this.teamMoney = res.data.extensionProfit
						this.countChildren = res.data.countChildren
						this.countChildrenChildren = res.data.countChildrenChildren
					}
				});
			},
			//获取列表数据
			getList() {
				let data = {
					page: this.page,
					limit: this.limit,
					type: this.type,
				}
				this.loading = true
				this.$Request.get('/app/invite/getExtensionList', {
					params: data
				}).then(res => {
					if (res.code == 0 && res.data) {
						this.pages = res.data.pages
						this.list = res.data.records
						this.loading = false
					} else {
						this.loading = false
					}
				});
			},
			//分页
			currentChange(e) {
				this.page = e
				this.getList()
			},
			//切换等级
			handleClick(e) {
				if (e.props.name == 'first') {
					this.type = 1
				} else {
					this.type = 2
				}
				this.page = 1
				this.getList()
				this.getUserInfo()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.txtColor999999 {
		color: #999999;
	}

	.topMod {
		width: 100%;
		height: 120px;

		.topMod-item {
			width: calc((100% - 40px) / 3);
			height: 100%;
			border-radius: 12px;
			cursor: pointer;
		}

		.topMod-item1 {
			background-color: #F7F8FF;
		}

		.topMod-item2 {
			background-color: #F7FAFF;
		}

		.topMod-item3 {
			background-color: #F3FFFB;
		}

		.topMod-item-l {
			margin-left: 20px;
			font-size: 14px;

			.topMod-item-l-num {
				margin-top: 0px;

				span {
					font-size: 18px;
					font-weight: bold;
				}
			}

			.topMod-item-l-line {
				width: 50px;
				height: 6px;
				background-color: #8461F0;
				margin-top: 20px;
				border-radius: 4px;
			}

			.topMod-item-l-rate {
				color: #00DD9A;
				font-size: 13px;
			}

			.topMod-item-l-btn {
				margin-top: 4px;
			}
		}

		.topMod-item-r {
			img {
				width: 60px;
				height: 90px;
				margin-right: 20px;
			}
		}
	}

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

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