<template>
	<div class="app-main app-content">
		<div class="user-wrap">
			<!-- 未登录 -->
			<template v-if="$util.isEmpty(shopUser)">
				<div class="no-login-attr login-attr-wrap">
					<img :src="`${constant.imgUrl}/retail/user/attr-default.png`" alt mode="widthFix" />
				</div>
				<div class="button-wrap">
					<!-- #ifdef H5 -->
					<button class="button-com" @click="showPopup">申请会员</button>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<button class="button-com mini-btn" open-type="getUserInfo" @getuserinfo="getWxAvatar">申请会员</button>
					<!-- #endif -->
				</div>
			</template>
			<!-- 已登录 -->
			<template v-else>
				<div class="is-login-attr">
					<div class="user-wrap-top">
						<div class="user-blo-left">
							<div class="user-name">{{ shopUser.userName }}</div>
							<div class="user-level">
								<!-- <div class="user-level-icon">
									<img src="" alt />
								</div>-->
								<div>成长值 {{ shopUser.userAsset.growth }}/{{ shopUser.userAsset.nextLevelGrowth }}</div>
							</div>
						</div>
						<div class="user-blo-right login-attr-wrap">
							<img :src="smallAvatarUrl | default_avatar" alt="头像" mode="widthFix" />
						</div>
					</div>
					<div class="user-wrap-bottom">
						<div class="level-lint"></div>
						<div>ID {{ shopUser.id }}</div>
					</div>
				</div>
			</template>
		</div>
		<template v-if="!$util.isEmpty(shopUser)">
			<div class="surplus-wrap">
				<div class="surplus-left">
					<div>我的余额(¥)</div>
					<div class="my-surplus">{{ shopUser.userAsset.balance || 0.00 }}</div>
				</div>
				<div class="surplus-right">
					<!-- #ifdef H5 -->
					<button class="button-com" v-if="shopUser.isFull != 1" @click="showPopup">申请会员</button>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<button class="button-com mini-btn" open-type="getUserInfo" v-if="loginInfo.isFull != 1" @getuserinfo="getWxAvatar">申请会员</button>
					<!-- #endif -->
					<button class="button-com" @click="pageToFn({
					url: '/pages/pay/index',
					query: {
						pageStatus: 'recharge'
					}
				})">充值</button>
					<button class="button-com red" @click="pageToFn({
					url: '/pages/pay/index',
					query: {
						pageStatus: 'payment'
					}
				})">付款</button>
				</div>
			</div>
		</template>
		<div class="list-content">
			<tui-list-view class="tui-list-view">
				<tui-list-cell class="tui-list" :arrow="true" @click="pageToFn('/pages/order/list')">
					<div class="list-wrap">
						<div class="list-label">我的订单</div>
						<!-- <div class="list-text">{{ shopUser.userAsset.totalBuyNum }}</div> -->
					</div>
				</tui-list-cell>
				<tui-list-cell class="tui-list" :arrow="true" @click="pageToFn('/pages/interest/invite')">
					<div class="list-wrap">
						<div class="list-label">我的邀请</div>
						<div class="list-text">领金币奖励</div>
					</div>
				</tui-list-cell>
				<tui-list-cell class="tui-list" :arrow="true" @click="pageToFn('/pages/coupon/list')">
					<div class="list-wrap">
						<div class="list-label">我的优惠券</div>
					</div>
				</tui-list-cell>
				<tui-list-cell class="tui-list" :arrow="true" @click="pageToFn('/pages/user/password')">
					<div class="list-wrap">
						<div class="list-label">支付密码设置</div>
					</div>
				</tui-list-cell>
				<tui-list-cell class="tui-list" :arrow="true" @click="pageToFn('/pages/interest/level')">
					<div class="list-wrap">
						<div class="list-label">会员权益</div>
					</div>
				</tui-list-cell>
			</tui-list-view>
		</div>
		<div class="list-content">
			<tui-list-view class="tui-list-view">
				<tui-list-cell class="tui-list" :last="true" @click="logoutFn()">
					<div class="list-wrap">
						<div class="list-label">退出登录</div>
					</div>
				</tui-list-cell>
			</tui-list-view>
		</div>
		<!-- 登录弹窗 -->
		<login-popup :show="popupShow" :info="wxInfo" @hide="hidePopup" />
		<!-- 登录弹窗 -->
		<app-trademark />
		<!-- <app-footer :activeIndex="3" /> -->
		<!-- login -->
		<go-login :show.sync="loginShow" />
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
// import AppFooter from '@/components/app-footer'
import TuiListView from '@/components/plugin/list-view'
import TuiListCell from '@/components/plugin/list-cell'
import LoginPopup from '@/pages/home/components/login-popup'
import AppTrademark from '@/components/module/app-trademark'
import GoLogin from '@/pages/home/components/go-login.vue'
// api
import { getShopUser } from '@/utils/auth'
import { getWxInfo, getWxPhone } from '@/api/mini'
export default {
	name: 'user',
	components: {
		// AppFooter
		TuiListView,
		TuiListCell,
		LoginPopup,
		AppTrademark,
		GoLogin
	},
	data() {
		return {
			constant: this.$constant,
			popupShow: false,
			stepIndex: 0,
			wxInfo: {},
			loginShow: false
		}
	},
	computed: {
		...mapGetters({ shopUser: 'getShopUser' }),
		// #ifdef MP-WEIXIN
		...mapGetters({ loginInfo: 'getLoginInfo' }),
		// #endif
		smallAvatarUrl() {
			return this.shopUser.smallAvatarUrl || ''
		}
	},
	onLoad(option) {
		// this.init()
	},
	methods: {
		init() {
			getShopUser()
		},
		// pageTo
		pageToFn(item) {
			if (this.$util.isLogin()) {
				this.$util.pageTo(item)
			} else {
				this.loginShow = true
			}
		},
		showPopup() {
			// this.popupShow = true
			this.$util.getCheckLogin()
		},
		hidePopup() {
			this.popupShow = false
		},
		logoutFn() {
			uni.clearStorageSync()
			// #ifdef H5
			location.reload()
			// #endif
			// #ifndef H5
			this.$util.pageTo({
				url: '/pages/home/index',
				type: 4
			})
			// #endif
		},
		// 获取微信信息
		getWxAvatar() {
			uni.getUserInfo({
				provider: 'weixin',
				success: res => {
					console.log('res', res)
					this.popupShow = true
					getWxInfo({ iv: res.iv, encryptedData: res.encryptedData }).then(subRes => {
						console.log('用户信息', subRes)
						this.wxInfo = subRes.data
						this.popupShow = true
					})
				},
				fail: () => {
					// this.loading = false
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.user-wrap {
		height: 220px;
		background-image: url('../../static/images/user/bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding-top: 42px;
		color: #f5e5e5;
		.login-attr-wrap {
			width: 90px;
			height: 90px;
		}
		.no-login-attr {
			margin: 0 auto;
			margin-bottom: 12px;
		}
		.is-login-attr {
			padding: 0 20px 0 48px;
			.user-wrap-top {
				@include disFlex(center, space-between);
				.user-name {
					font-size: 36px;
					font-weight: 500;
					margin-bottom: 16px;
					color: #fff;
				}
				.user-level {
					@include disFlex(center, center);
				}
				.user-blo-right {
					margin-right: 30px;
				}
			}
			.user-wrap-bottom {
				.level-lint {
					border-bottom: 4px solid $mainColor;
					border-radius: 4px;
					margin-top: 20px;
					margin-bottom: 10px;
					position: relative;
					&::before {
						position: absolute;
						top: 0;
						left: 0;
						display: inline-block;
						content: '';
						background-color: #ffe4bd;
						width: 200px;
						height: 4px;
						border-radius: 4px;
					}
				}
			}
		}
		.button-wrap {
			@include disFlex(center, center);

			.mini-btn {
				border: none !important;
			}
		}
	}
	.surplus-wrap {
		@include disFlex(flex-end, space-between);
		padding: 10px 50px 34px;
		background-color: #fff;
		.surplus-left {
			color: $fontColor3;
			.my-surplus {
				font-size: 46px;
				margin-top: 14px;
				color: #333;
				font-weight: bold;
			}
		}
		.surplus-right {
			margin-bottom: 10px;
			.button-com {
				margin-left: 20px;
			}
		}
	}
	.list-content {
		margin-bottom: 20px;
		// padding: 0 20px;
		background-color: #fff;
		.tui-list-cell {
			padding-left: 50px;
			padding-right: 50px;
		}
		.list-wrap {
			@include disFlex(center, space-between);
			width: calc(100% - 30px);
			padding-right: 30px;
			.list-text {
				color: $fontColor3;
			}
		}
	}
</style>
