<template>
	<view>
		<view class="top-backgroup">
			<image src="https://resource.tuniaokj.com/images/my/my-bg4.png" mode="widthFix" class="backgroud-image"></image>
		</view>
		<view class="p-30" style="margin-top: -450rpx; padding-bottom: 150rpx" :style="{ paddingTop: statusBarHeight }">
			<view class="flex-ac header" @click="$utils.tn('/pages/me/setting', true)">
				<image class="header_img" v-if="user.avatar_url" :src="user.avatar_url"></image>
				<image class="header_img" v-else src="/static/mr.png"></image>
				<view class="header_tit" v-if="user.nickname || user.username">
					<view class="header_tit_nick">{{ user.nickname }}</view>
					<view class="header_tit_acee">{{ user.username }}</view>
				</view>
				<view class="header_tit" v-else>
					<view class="header_tit_nick" style="margin-bottom: 0rpx">点击登录</view>
				</view>
				<image class="header_you" src="/static/sett.png" mode="widthFix"></image>
			</view>
			<view class="member tn-shadow-blur">
				<view class="member_left">
					<view class="member_left_1">{{ device.cur_level.name }}</view>
					<view class="member_left_2">
						<u-line-progress
							v-if="user.vip < 3 || user === null"
							:percentage="(device.all_device_num / device.up_level.num) * 100"
							:showText="false"
							height="7"
							:activeColor="'#f1c68e'"
							:inactiveColor="'#fff'"
						></u-line-progress>
						<u-line-progress v-else :percentage="100" :showText="false" height="7" :activeColor="'#f1c68e'" :inactiveColor="'#fff'"></u-line-progress>
					</view>
					<view v-if="user.vip < 3 || user === null" class="member_left_3">
						再购买{{ device.up_level.num - device.all_device_num }}台充电桩，可升级{{ device.up_level.name || '' }}
					</view>
					<view v-else class="member_left_3">已到最高级</view>
				</view>
				<!-- <button @click="$utils.tn('/pages/goods/detail?id=1')" class="member_right tn-shadow-blur">去下单</button> -->
			</view>
			<!-- 			<view class="p-t20 miney_g bgf br10 mt30 wallpaper-shadow">
				<u-grid :border="false" align="center">
					<u-grid-item bgColor="#fff" @click="$utils.tn('/pages/resourceBundle/resourceBundle', true)">
						<view>￥{{ user.money || 0.0 }}</view>
						<view class="fs28">余额</view>
					</u-grid-item>
					<u-grid-item bgColor="#fff" @click="$utils.tn('/pages/device/index', true)">
						<view>{{ user.device_num || 0 }}</view>
						<view class="fs28">充电桩</view>
					</u-grid-item>
										<u-grid-item bgColor="#fff" @click="$utils.tn('/pages/option/index', true)">
						<view>{{ user.option || 0.0 }}</view>
						<view class="fs28">期望值</view>
					</u-grid-item>
				</u-grid>
			</view> -->

			<view style="display: flex; align-items: center; justify-content: space-between">
				<view class="wallpaper-shadow b_yubiao" style="width: 330rpx" @click="$utils.tn('/pages/resourceBundle/resourceBundle', true)">
					<image style="width: 70rpx; height: 70rpx" src="/static/b_ye.png"></image>
					<view class="b_yubiao_right">
						<view style="margin-bottom: 15rpx; font-weight: bold">余额</view>
						<view>￥{{ user.money || 0.0 }}</view>
					</view>
				</view>
				<view class="wallpaper-shadow b_yubiao" style="width: 330rpx" @click="$utils.tn('/pages/device/index', true)">
					<image src="/static/b_cd.png"></image>
					<view class="b_yubiao_right">
						<view style="margin-bottom: 15rpx; font-weight: bold">充电桩</view>
						<view>{{ user.device_num || 0 }}个</view>
					</view>
				</view>
			</view>

			<view class="wallpaper-shadow tn-margin-top-lg tn-padding-top-sm tn-padding-bottom-sm tn-bg-white">
				<view class="tn-flex tn-flex-row-center tn-radius tn-padding-top">
					<view class="tn-padding-sm tn-margin-xs tn-radius" @click="$utils.tn('/pages/order/index', true)">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view class="t12_icon">
								<image src="/static/order.png"></image>
							</view>
							<view class="tn-text-center">
								<text class="tn-text-ellipsis">订单</text>
							</view>
						</view>
					</view>
					<view class="tn-padding-sm tn-margin-xs tn-radius" @click="$utils.tn('/pages/resourceBundle/resourceBundle', true)">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view class="t12_icon">
								<image src="/static/ye.png"></image>
							</view>
							<view class="tn-text-center">
								<text class="tn-text-ellipsis">余额</text>
							</view>
						</view>
					</view>
					<view class="tn-padding-sm tn-margin-xs tn-radius" @click="$utils.tn('/pages/device/index', true)">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view class="t12_icon">
								<image src="/static/cdz.png"></image>
							</view>
							<view class="tn-text-center">
								<text class="tn-text-ellipsis">充电桩</text>
							</view>
						</view>
					</view>
					<view class="tn-padding-sm tn-margin-xs tn-radius" @click="$utils.tn('/pages/wallet/list', true)">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view class="t12_icon">
								<image src="/static/zd.png"></image>
							</view>
							<view class="tn-text-center">
								<text class="tn-text-ellipsis">账单</text>
							</view>
						</view>
					</view>
				</view>
				<view class="tn-flex tn-flex-row-center tn-radius tn-padding-top">
					<view class="tn-padding-sm tn-margin-xs tn-radius" @click="$utils.tn('/pages/team/index', true)">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view class="t12_icon">
								<image src="/static/yqjl.png"></image>
							</view>
							<view class="tn-text-center">
								<text class="tn-text-ellipsis">邀请记录</text>
							</view>
						</view>
					</view>
					<view class="tn-padding-sm tn-margin-xs tn-radius" @click="$utils.tn('/pages/share/index', true)">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view class="t12_icon">
								<image src="/static/fxhb.png"></image>
							</view>
							<view class="tn-text-center">
								<text class="tn-text-ellipsis">分享海报</text>
							</view>
						</view>
					</view>
					<!-- @click="$utils.call('4008005326')" -->
					<view class="tn-padding-sm tn-margin-xs tn-radius">
						<button open-type="contact" style="all: unset">
							<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
								<view class="t12_icon">
									<image src="/static/lxkf.png"></image>
								</view>
								<view class="tn-text-center">
									<text class="tn-text-ellipsis">联系客服</text>
								</view>
							</view>
						</button>
					</view>
					<!-- @click="$utils.logOut()" -->
					<view class="tn-padding-sm tn-margin-xs tn-radius">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<!-- <view class="t12_icon">
								<image src="/static/tcdl.png"></image>
							</view>
							<view class="tn-text-center">
								<text class="tn-text-ellipsis">退出登录</text>
							</view> -->
						</view>
					</view>
				</view>
			</view>
			<!-- 			<view class="means-a mt30" @click="$utils.tn('/pages/admin/shop/index', true)">
				<view class="means-a-list">
					<view class="tit">投资人</view>
					<view class="means-zhuomi">
						<view class="means-zhuomi-tit" v-if="userInfo.mobile">{{ userInfo.mobile }}</view>
						<image src="/static/icon/youdao.png"></image>
					</view>
				</view>
				<view class="means-a-list" style="border: 0;" @click="$utils.tn('/pages/admin/order/index', true)">
					<view class="tit">订单</view>
					<view class="means-zhuomi">
						<view class="means-zhuomi-tit" v-if="userInfo.mobile">{{ userInfo.mobile }}</view>
						<image src="/static/icon/youdao.png"></image>
					</view>
				</view>
			</view> -->
			<view v-if="user.vip > 0" style="background-color: #f6faff; padding: 30rpx; border-radius: 10rpx; margin-top: 30rpx">
				<view style="font-size: 30rpx; color: #999999; text-align: center;margin-bottom: 20rpx;">
					邀请码：{{ user.invite_code }}
					<text style="text-decoration:underline;margin-left: 30rpx;" @click="$utils.copy(user.invite_code)">复制</text>
				</view>
				<view class="u-flex u-flex-xy-center">
					<u--image :src="user.appcode" radius="20rpx" width="440rpx" height="440rpx"></u--image>
				</view>
				<view style="height: 10rpx"></view>
				<view style="font-size: 30rpx; color: #999999; text-align: center">长按保存或者转发</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getUser, setUser } from '@/com/storage/auth.js';
export default {
	data() {
		return {
			statusBarHeight: 20,
			user: null,
			device: {
				all_device_num: 0,
				team_device_num: 0,
				cur_level: {
					name: '普通用户',
					level: 0
				},
				up_level: {
					name: '',
					level: 0,
					num: 0
				}
			},
			pshop: null
		};
	},
	watch: {
		'$store.state.auth.user'(newVal, oldVal) {
			console.log(newVal);
			console.log('watch');

			if (!newVal.id) return (this.user = null);
			this.user = newVal;
		}
	},
	onLoad() {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 44 + 'px';
		console.log(this.statusBarHeight);
	},
	async onShow() {
		this.user = uni.getStorageSync('user') || null;
		if (!this.user.id) return (this.user = null);
		if (await this.$utils.token()) return true;
		this.getuser();
	},
	methods: {
		getuser() {
			this.$http.get('/shop/v10/user/info').then(({ data, success }) => {
				if (success) {
					this.device = data.device;
					this.pshop = data.pshop;
					this.$store.commit('auth/setUser', data.info);
				}
			});
		}
	}
};
</script>

<style lang="scss">
.header {
	&_img {
		width: 140rpx;
		height: 140rpx;
		margin-right: 30rpx;
		border-radius: 50%;
	}
	&_tit {
		flex: 1;
		&_nick {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		&_acee {
			font-size: 28rpx;
		}
	}
	&_you {
		width: 40rpx;
		height: 40rpx;
	}
}
.member {
	margin-top: 50rpx;
	border-radius: 15rpx;
	padding: 20rpx 40rpx;
	position: relative;
	background: linear-gradient(-120deg, #3e445a, #31374a, #2b3042, #262b3c);
	display: flex;
	align-items: center;
	&_left {
		flex: 1;
		margin-right: 20rpx;
		&_1 {
			color: #fff;
			font-weight: bold;
			font-size: 32rpx;
		}
		&_2 {
			margin: 20rpx 0;
		}
		&_3 {
			color: #fff;
			font-size: 24rpx;
		}
	}

	&_right {
		all: unset;
		background-color: #f1c68e;
		color: #634738;
		width: 160rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10rpx 0;
		overflow: visible;
	}
}

.tn-flex {
	display: flex;
}

.tn-padding-sm {
	width: 25%;
}
.tn-padding-sm {
	margin: 10rpx;
}

.t12_icon {
	image {
		width: 60rpx;
		height: 60rpx;
	}
}

.tn-flex-direction-column {
	flex-direction: column;
	align-items: center;
}

.tn-text-ellipsis {
	font-size: 26rpx;
}
.means-a {
	width: 100%;
	background: #ffffff;
	border-radius: 15rpx;
	padding: 0 25rpx;

	.means-a-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 100rpx;
		background-color: #ffffff;
		padding: 0;
		border: 0;
		border-bottom: 1rpx solid #f6f6f6;

		.tit {
			font-size: 30rpx;
			color: #333;
		}

		.header {
			width: 140rpx;
			height: 140rpx;
			margin-bottom: 20rpx;
			border-radius: 50%;
		}

		.nickname {
			font-size: 30rpx;
			color: #222222;
		}

		.means-zhuomi {
			display: flex;
			align-items: center;

			image {
				width: 11rpx;
				height: 21rpx;
			}
		}
	}
}
.b_yubiao {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 20rpx;
	image {
		width: 48rpx;
		height: 48rpx;
	}
	&_right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
}
</style>
