<template>
	<view class="mine-container" :style="{ height: `${windowHeight}px` }">

		<!-- 添加tabs管理槟榔资产 -->
		<view class="header">
			<v-tabs
				v-model="current"
				:tabs="icons"
				field="name"
				height="90rpx"
				fontSize="30rpx"
				:fixed="true"
				:scroll="false"
				:zIndex="1000"
				:topOffset="windowTop"
				@change="changeTab">
			</v-tabs>
		</view>

		<view class="content">
			<!-- 选中 Tab 对应页面渲染区域（小程序端不支持动态组件，改为静态分支） -->
			<account v-if="currentKey === 'account'" :embedded="true"></account>
			<record-index v-else-if="currentKey === 'record'" :embedded="true"></record-index>
			<earn-index v-else-if="currentKey === 'earn'" :embedded="true"></earn-index>
			<coupon-list v-else-if="currentKey === 'coupon'" :embedded="true"></coupon-list>
		</view>
		<view class="cardContent" style="display: none;">
			<view class="card">
				<view class="info">
					<!-- 多少棵 -->
					<view class="line">
						<view class="logo">
							<image src="@/static/ic_bl.png" />
						</view>
						<view class="label">槟榔:</view>
						<view class="value">{{ statistics["ljNum"] }}</view>
						<view class="label">棵</view>
					</view>
					<u-gap height="5"></u-gap>
					<!-- 级别 -->
					<view class="line">
						<view class="logo_no"> </view>
						<view class="label">级别:</view>
						<view class="value" v-if="pageload">
							{{ abc_level.find(i => i.dictValue == chuzhonggao).dictLabel || '无级别' }}
						</view>
						<view v-else>正在获取中...</view>
					</view>
					<u-gap height="5"></u-gap>
					<!-- 推广商 -->
					<view class="line">
						<view class="logo_no"> </view>
						<view class="label">代理:</view>
						<view class="value" v-if="pageload">
							{{agency_level.find(i => i.dictValue == agencyLevel).dictLabel || '无级别'}}
						</view>
						<view v-else>正在获取中...</view>
					</view>
				</view>

			</view>
		</view>
		<!-- 顶部卡片END -->
		<view class="container" style="display: none;">
			<!-- 按钮组START -->
			<view class="btn_group">
				<u-gap height="10"></u-gap>
				<view class="content">
					<view class="item" v-for="(v, i) in icons" :key="i" @click="handleBuilding(v.link)">
						<view class="icon">
							<image :src="v.icon" mode="heightFix" />
						</view>
						<view class="name">{{ v.name }}</view>
					</view>
				</view>
			</view>
			<!-- 按钮组END -->
		</view>

		<!-- 代理等级 -->
		<u-popup :show="dldjShow" mode="center" round="10">
			<view class="dldj-box">
				<view class="dldj-title">{{ dlInfo.status == 0?'代理等级申请中':dlInfo.status == 1? '代理等级申请被驳回':'申请代理等级' }}
				</view>
				<view class="dldj-input" @click="dlPickerShow = true">
					<text>
						{{dlLevel != null ? agency_level.find(i => i.dictValue == dlLevel).dictLabel || '请选择':'请选择' }}
					</text>
					<u-icon name="arrow-right" size="12"></u-icon>
				</view>
				<view class="dldj-btns">
					<u-button size="mini" :text="dlInfo.status == 0? '修改申请':'申请' " type="success"
						@click="applyBlAgency"></u-button>
					<u-button size="mini" text="关闭" type="info" @click="closeDldj"></u-button>
				</view>
			</view>
		</u-popup>
		<u-picker v-if="agency_level.length" :show="dlPickerShow" :columns="[agency_level.slice(1)]" keyName="dictLabel"
			@confirm="dlConfirm" @cancel="dlPickerShow = false"></u-picker>
	</view>
</template>

<script>
	import {
		getUserBalance,
		getMyRecordsStatistics,
		getIdentity,
		getAbclevel,
		getAgencylevel,
		applyBlAgency,
		getMyAgencyRecord
	} from "@/api/system/user.js";
	import {
		mapMutations
	} from "vuex";
import vTabs from "@/components/v-tabs/v-tabs.vue";
// 引入需要内嵌展示的页面组件
import Account from "@/pages/licai/mine/account/account.vue";
import RecordIndex from "@/pages/licai/mine/record/index.vue";
import EarnIndex from "@/pages/licai/mine/earn/index.vue";
import CouponList from "@/pages/licai/mine/account/couponList.vue";
	export default {
		components: { vTabs, Account, RecordIndex, EarnIndex, CouponList },
		data() {
			return {
				icons: [{
						icon: require("@/static/my1.png"),
						name: "我的资产",
						link: "/pages/licai/mine/account/account",
					},
					// {
					// 	icon: require("@/static/my2.png"),
					// 	name: "打款",
					// 	link: "/pages/licai/mine/recharge/recharge",
					// },
					{
						icon: require("@/static/my3.png"),
						name: "购买记录",
						link: "/pages/licai/mine/record/index",
					},
					{
						icon: require("@/static/my4.png"),
						name: "收益记录",
						link: "/pages/licai/mine/earn/index",
					},
					// {
					//   icon: require("@/static/my5.png"),
					//   name: "分红收益",
					//   link: "/pages/licai/mine/account/withDraw",
					// },
					{
						icon: require("@/static/my6.png"),
						name: "资产明细",
						link: "/pages/licai/mine/account/couponList",
					},
					// {
					// 	icon: require("@/static/my5.png"),
					// 	name: "代理申请",
					// 	link: "dldj",
					// },
					// {
					//   icon: require("@/static/my7.png"),
					//   name: "绿色积分明细",
					//   link: "/pages/licai/mine/recharge/lsjf",
					// },
					// {
					//   icon: require("@/static/my8.png"),
					//   name: "贡献值明细",
					//   link: "/pages/licai/mine/recharge/xf",
					// },
				],
				balance: 0,
				pageload:false,
				chuzhonggao: 0,
				tuiguang: 0,
				agencyLevel: 0,
				statistics: {
					ljNum: 0,
				},
				name: this.$store.state.user.name,
				// version: getApp().globalData.config.appInfo.version,
				userInfo: JSON.parse(uni.getStorageSync("App-UserInfo")),
				abc_level: [],
				agency_level: [],
				dldjShow: false,
				dlInfo: {},
				dlLevel: null,
				dlPickerShow: false,

				current: 0,
				// key 映射，兼容小程序端
				keysMap: {
					"/pages/licai/mine/account/account": "account",
					"/pages/licai/mine/record/index": "record",
					"/pages/licai/mine/earn/index": "earn",
					"/pages/licai/mine/account/couponList": "coupon"
				},
				currentKey: "account"
			};
		},
		computed: {
			avatar() {
				return this.$store.state.user.avatar;
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight;
			},
			// 顶部原生导航（或状态栏）高度，用于 fixed 元素偏移
			windowTop() {
				return 'var(--window-top)'
			}
		},
		created() {
			// 初始化默认渲染第一个 tab 对应的页面（映射为 key）
			const first = this.icons && this.icons[0] ? this.icons[0].link : null;
			this.currentKey = first ? (this.keysMap[first] || "account") : "account";
		},
	 async	onShow() {
	 await	this.getAbclevel();
		await	this.getAgencylevel();
		await	this.getUserBalance();
		await	this.getIdentity();
		await	this.getMyRecordsStatistics();
		await	this.checkToken()
			this.pageload = true
		},
		methods: {
			...mapMutations(["logout"]),
			// 顶部 v-tabs 切换时，切换内嵌组件
			changeTab(i) {
				this.current = i;
				const link = this.icons[i] && this.icons[i].link ? this.icons[i].link : null;
				this.currentKey = link ? (this.keysMap[link] || this.currentKey) : this.currentKey;
			},
			//就是点击下边四个tab的时候调用一下这个接口，返回false的话就调用一下退出登录，给他退掉
			checkToken() {
				this.$http("GET", "/user/userCache").then((res) => {
					if (!res.data) {
						this.logout();
					}
				});
			},


			async getAbclevel() {
				let res = await getAbclevel();
				if (res.code == 200) {
					this.abc_level = res.data
				}
			},
			async getAgencylevel() {
				let res = await getAgencylevel();
				if (res.code == 200) {
					this.agency_level = res.data
				}
			},
			async getIdentity() {
				let res = await getIdentity();
				if (res.code == 200) {
					this.tuiguang = res.data.tuiguang;
					this.chuzhonggao = res.data.abcLevel;
					this.agencyLevel = res.data.blAgencyLevel;
				}
			},

			async getUserBalance() {
				let res = await getUserBalance();
				if (res.code == 200) this.balance = res.data.money;
				console.log("res", res);
			},
			async getMyRecordsStatistics() {
				let res = await getMyRecordsStatistics({
					type: 2
				});
				console.log(res, "槟榔统计")
				if (res.code == 200) {
					for (let key in res.data) {
						if (key == "槟榔") this.statistics.ljNum = res.data[key];
					}
				}
				console.log("res", this.statistics);
			},

			handleToEditInfo() {
				console.log("1");
				// this.$tab.navigateTo('/pages/licai/mine/info	/edit')
			},
			handleToSetting() {
				this.$tab.navigateTo("/pages/licai/mine/setting/index");
			},
			handleToLogin() {
				console.log("1");
				// this.$tab.reLaunch('/pages/licai/login')
			},

			handleToAvatar() {
				this.$tab.navigateTo("/pages/licai/mine/avatar/index");
			},
			handleLogout() {
				this.$modal.confirm("确定注销并退出系统吗？").then(() => {
					this.$store.dispatch("LogOut").then(() => {
						this.$tab.reLaunch("/pages/licai/index");
					});
				});
			},
			handleHelp() {
				this.$tab.navigateTo("/pages/licai/mine/help/index");
			},
			handleAbout() {
				this.$tab.navigateTo("/pages/licai/mine/about/index");
			},
			handleJiaoLiuQun() {
				this.$modal.showToast("QQ群：133713780");
			},
			handleBuilding(url) {
				if (url == 'dldj') {
					this.openDldj()
					return
				}

				if (!url) return this.$msg("暂未开放");
				this.$tab.navigateTo(url);
			},
			openDldj() {
				getMyAgencyRecord().then(res => {
					if (res.code == 200) {
						
						if(res.data.status == 1){
							this.$msg("你已申请过代理等级");
							return
						}
						
						this.dlInfo = res.data
						this.dldjShow = true
						this.dlLevel = res.data.newLevel
					}
				})
			},
			closeDldj() {
				this.dldjShow = false
			},
			dlConfirm(e) {
				this.dlLevel = e.value[0].dictValue
				this.dlPickerShow = false
			},
			applyBlAgency() {
				if (this.dlLevel == null) {
					return this.$msg("请选择会员等级")
				}
				applyBlAgency({
					id: this.dlInfo.id,
					applyLevel: this.dlLevel
				}).then(res => {
					if (res.code == 200) {
						this.$modal.showToast("操作成功，请等待审核");
						this.dldjShow = false
					}
				}).catch(err => {
					return this.$msg(err.message)
				})
			}
		},
	};
</script>

<style>
	page {
		background-color: #f4f4f4;
	}
</style>
<style lang="scss" scoped>
	@import "../common/style/base.scss";

	/deep/.u-navbar__content__title {
		color: #fff;
	}

	.team_count {
		font-size: 36rpx;
		margin-left: 178rpx;
	}

	.mine-container {
		width: 100%;
		height: 100%;
		overflow-y: scroll;
	}

	.cardContent {
		min-height: 200px;
		background-image: linear-gradient(to bottom,
				rgba(75, 178, 46, 1) 0%,
				rgba(75, 178, 46, 1) 70%,
				rgba(75, 178, 46, 0) 100%);
		padding: 20rpx;
		box-sizing: border-box;

		.card {
			width: 100%;
			height: 358rpx;
			background-image: url("~@/static/cardContent.png");
			background-size: 100% 100%;
			margin-bottom: 20rpx;
		}
	}

	.info {
		padding-top: 40rpx;
		padding-left: 40rpx;

		.line {
			display: flex;
			align-items: center;

			.logo_no {
				width: 45rpx;
			}

			.logo {
				width: 45rpx;
				height: 45rpx;
				background: #fff;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 26rpx;
					height: 35rpx;
				}
			}

			.label {
				color: #ccc;
				margin: 0 12rpx;
				font-size: 30rpx;
				font-weight: 400;
			}

			.value {
				color: #efe3bc;
				font-size: 30rpx;
				font-weight: 600;
			}

			.level {
				width: 42rpx;
				height: 34rpx;
				margin-right: 10rpx;
			}
		}
	}

/* 已移除 three_data 模块，删除对应样式 */


	.container {
		padding: 0 20rpx;
		box-sizing: border-box;
	}

/* 已移除 two_link 模块，删除对应样式 */

	.btn_group {
		background: #fff;
		border-radius: 15rpx;
		padding: 20rpx 30rpx 0 30rpx;
		box-sizing: border-box;

		.content {
			display: flex;
			flex-wrap: wrap;

			.item {
				width: 25%;
				margin-bottom: 50rpx;
				// border: 1px solid red;
				display: flex;
				flex-direction: column;
				align-items: center;

				.icon {
					height: 60rpx;

					// border: 1px solid red;
					image {
						height: 100%;
					}
				}

				.name {
					font-size: 28rpx;
					color: #111;
					margin-top: 12rpx;
					font-weight: 500;
				}
			}
		}
	}

	.dldj-box {
		padding: 30rpx 20rpx 40rpx;
		width: 600rpx;

		.dldj-title {
			text-align: center;
			font-size: 26rpx;
			margin-bottom: 30rpx;
		}

		.dldj-input {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40rpx;
			border: solid 1rpx #eee;
			padding: 10rpx;
			border-radius: 10rpx;
			font-size: 22rpx;
		}

		.dldj-btns {
			.u-button {
				margin-top: 20rpx;
				height: 70rpx;
			}
		}
	}

	.bl-subsection {
		padding: 9rpx 18rpx;
		background-color: #FFFFFF;
	}

	/* 内嵌页面时，统一隐藏子页面内部的 u-navbar（仅作用于本页的 .content 容器内） */
	.content {
		/deep/ .u-navbar {
			display: none !important;
		}
		/deep/ .u-navbar__placeholder {
			display: none !important;
		}
	}
</style>