<template>
	<view class="min-body">
		<!-- <u-navbar title="消费补贴" placeholder @rightClick="closePage()" :autoBack="true"> -->
		<!-- </u-navbar> -->
		<view class="mt-30">
			<u-gap height="30rpx"></u-gap>
			<view class="header">
				<view class="img-box">
					<image class="img" :src="walletInfo['user_lv']==3?walletInfo['vipimage']:(walletInfo['user_lv']==1?walletInfo['img']:walletInfo['vipfenimage'])"
						mode="widthFix">
					</image>
					<view class="xx-box">
						<view style="padding-left: 38rpx;">

							<view class="subgift_consume">
								<view>
									余额(元)
								</view>
								<view class="subgift_content" v-show="walletInfo['amount']>0" @click="toSubgift">
									<image class="subgiftImg" :src='subgift'></image>
									<text>余额转赠</text>
								</view>

							</view>
							<view style="font-size: 70rpx;padding-bottom: 20rpx;">
								{{walletInfo['amount']/100}}
							</view>
							<view class="seeEquity">
								<view style="font-weight: 300;padding-bottom: 52rpx;">
									累计已省钱：￥{{walletInfo.consumption/100}}
								</view>
								<view class="seeEquity_detail" v-show="walletInfo['is_vip']==1" @click="toEquity">查看权益
								</view>
							</view>

						</view>
						<view class="flbtn" style="padding-top: 18rpx;">
							<view class="flbtn-item name-style" @tap="goPath(item['link'])"
								v-for="(item,index) in tabList" :key="index">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="big-333 bold">
						线上消费补贴平台
					</view>
				</view>
				<view class="">
					<navigator url="/pages/goods/goods_list/index" hover-class="none">
						<image :src="imageUrl.link1" class="gg-img" mode=""></image>
						<view class="big-333 bold">
							线下消费补贴商家
						</view>
					</navigator>
				</view>

				<view class="">
					<navigator url="/pages/restaurant/restaurant_home_list/index" hover-class="none">
						<image :src="imageUrl.link2" class="gg-img" mode=""></image>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		consumerCard,
		GetUserInvitationCode,

	} from '@/static/js/share.js';
	import {
		consumptionBannerAPI,
		conWalletInfoAPI,
	} from '@/request/recharge/index.js';
	import mixin from '@/static/js/mixin/mixin.js';
	import {
		mapMutations
	} from 'vuex'
	export default {
		mixins: [mixin],
		data() {
			return {

				tabList: [{
						name: '余额明细',
						link: '/pages/pages-recharge/balance_details/index',
						isbd: false
					},
					// {
					// 	name: '消费补贴',
					// 	link: '/pages/pages-recharge/recharge/index?rechargetype=0',
					// 	isbd: false
					// },
					{
						name: '卡密激活',
						link: '/pages/pages-recharge/recharge/index?rechargetype=1',
						isbd: false
					},
					{
						name: '我的订单',
						link: '/pages/pages-recharge/order/index',
						isbd: false
					}
				],
				// 用户数据
				UserInfo: {},
				// 钱包信息
				walletInfo: {
					amount: 0,
					consumption: 0,
					is_vip: 0,
					user_lv:1,

				},
				// 补贴平台
				imageUrl: {
					link1: '',
					link2: ''
				},
				subgift: 'https://img.agrimedia.cn/subgift.png',
				// 正常背景图
				// bg_img: "https://img.agrimedia.cn/chwl/sub_card/bg_img2.png",
				// 新年背景图
				bg_img: "https://img.agrimedia.cn/chwl/sub_card/bg_img2.png",
				vipCardBg: "https://img.agrimedia.cn/chwl/vipCardBg.png",
			}
		},
		onLoad(parameters) {
			console.log(getApp()['globalData'], 'globalData1');
			console.log(this['ModeList'],'ModeList---');
			// 扁平化处理
			// let flatten = (arr)=> [].concat(...arr.map(x => Array.isArray(x) ? flatten(x) : x))
			// 构建传入后台保存的新数组(此方法可以在回显时不需要多级便利对应ID改变数据状态,直接合并即可)
			// 	let _Data = 源解构数据.map(item=>{
			// 		// 用于查找当前类下是否有选中规格
			// 		let IsLength = flatten(item['children'].map(_item=>_item['children']).map(__item=>__item.filter(___item=>___item['isChecked'])));
			// 		// 过滤未选择的类数据(格式同本地使用格式一致)
			// 		if(IsLength['length']) {
			// 			return {
			// 					// 一级
			// 					id:item['id'],
			// 					name:item['name'],
			// 					children:item['children'].map(_item=>{
			// 						// 查找二级下的规格是否有被选中（与IsLength变量获取逻辑不同的是，IsLength若是为空数组则不进入该逻辑，ChildrList则是进入该逻辑后将选中的规格赋值）
			// 						let ChildrList = _item['children'].filter(__item=>__item['isChecked']);
			// 						if(ChildrList['length']) return {
			// 							// 二级
			// 							id:_item['id'],
			// 							name:_item['name'],
			// 							// 当前类下选中的规格
			// 							children:ChildrList
			// 						}
			// 					}).filter(n=>n)
			// 				}
			// 		}
			// 	}).filter(n=>n)
				
			// 	// 合并方法，找到当前对应的类然后将三级规格合并
			// 	this['ModeList2'].forEach((item)=>{
			// 		// 查找一级ID
			// 		let oneindex = this['ModeList'].findIndex(x=> x['id'] == item['id']);
			// 		let str = item['children'].map(item=>item['id']).join();
			// 		this['ModeList'][oneindex]['children'].map(_item=>{
			// 			if(str.includes(_item['id'])) {
			// 				// 此处代码直接合并即可
			// 				// _item['children'] = [..._item['children'],item['children'].find(cItem => cItem['id'] == _item['id'])]
			// 			}
			// 		})
				
			// 	})
			// 	console.log(JSON.stringify(_Data,null,5),'/////////////');
			
		},
		onShow() {
			this.init();

		},
		methods: {
			...mapMutations(['GetState']),
			// 初始化
			init() {
				conWalletInfoAPI().then(res => {
					// 获取钱包信息
					this.walletInfo = res['data'];
					console.log(this.walletInfo, "this.walletInfo哈哈哈哈", "test")
					return consumptionBannerAPI();
				}).then(res => {
					// 获取线上线下数据
					this.imageUrl.link1 = res['data'][0].img_url || '';
					this.imageUrl.link2 = res['data'][1].img_url || '';
					return GetUserInvitationCode();
				}).then(res => {
					// 获取用户信息
					this.UserInfo = res['data'];
				})
			},
			// 余额明细/付费充值/卡密充值/我的订单
			goPath(url) {
				// uni.navigateTo({
				// 	url:'/pa'
				// });
				// return
				if (!url) return;
				uni.navigateTo({
					url
				});
			},
			getWallet() {
				this.$store.dispatch('card/conWalletInfo').then(res => {
					this.walletInfo = res
				})
			},


			//跳转到转赠
			toSubgift() {

				if (this.walletInfo['auth_mobile'] != 1) {
					uni.showToast({
						title: '未绑定手机号无法使用此功能，请在设置中进行绑定',
						icon: 'none'
					});
					return
				}
				// var balance = this.walletInfo['amount'] / 100
				uni.navigateTo({
					url: `/pages/pages-recharge/rechargeSubgift/index`
				});
			},
			toEquity() {
				uni.navigateTo({
					url: `/pages/pages-recharge/rechargeEquity/index`
				});
			},


		},
		onHide() {
			this.walletInfo = {
				amount: 0,
				consumption: 0,
				is_vip: 0
			}
		},
		// 分享
		onShareAppMessage() {
			return consumerCard(this['UserInfo']['userInfo']['invite_code']);
		},


	}
</script>

<style lang="scss">
	.header {
		position: relative;

		.bold {
			margin-top: 32rpx !important;
		}

		.img-box {
			.img {
				width: 100%;
			}

			.xx-box {
				position: absolute;
				z-index: 1;
				color: #fff;
				padding-top: 38rpx;
				font-size: 32rpx;
				top: 0;
				width: 100%;
				margin-bottom: 32rpx;

				.subgift_content {
					background: #FFFFFF;
					border-radius: 10rpx;
					line-height: 50rpx;
					padding-left: 8rpx;
					padding-right: 8rpx;
					margin-left: 18rpx;

					text {
						font-size: 28rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #B28A1E;
					}

					.subgiftImg {
						width: 40rpx;
						height: 40rpx;
						vertical-align: middle;
						margin-right: 6rpx;
					}
				}

				.subgift_consume {
					display: flex;
					margin-bottom: 10rpx;
					align-items: center;



				}

				.seeEquity {
					display: flex;
					justify-content: space-between;

					.seeEquity_detail {
						margin-right: 60rpx;
						background: #FFFFFF;
						border-radius: 10rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #B28A1E;
						padding-left: 8rpx;
						padding-right: 8rpx;
						height: 40rpx;
					}
				}
			}
		}
	}

	.gg-img {
		width: 100%;
		height: 317rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;
	}

	.border-style {
		width: 2rpx;
		background-color: #FFEDBF;
		height: 40rpx;
	}

	.name-style {
		width: 100%;
		text-align: center;
		font-size: 28rpx;
	}

	.flbtn {
		position: relative;

		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 2rpx;
			background-color: #ffffff;
		}

		&-item {
			position: relative;

			&:last-child::after {
				display: none;
			}

			&::after {
				content: '';
				position: absolute;
				right: 0;
				top: 0;
				width: 2rpx;
				height: 100%;
				background-color: #ffff;
			}
		}
	}
</style>
