<template>
	<div class="app-main app-content">
		<div class="user-wrap">
			<!-- 未登录 -->
			<template v-if="true">
				<div class="no-login-attr login-attr-wrap">
					<img src="../../static/images/user/attr-default.png" alt mode="widthFix" />
				</div>
				<div class="button-wrap">
					<button class="button-com" @click="showPopup">申请会员</button>
				</div>
			</template>
			<!-- 未登录 -->
			<template v-else>
				<div class="is-login-attr">
					<div class="user-wrap-top">
						<div class="user-blo-left">
							<div class="user-name">冯宝宝</div>
							<div class="user-level">
								<div class="user-level-icon">
									<img src alt />
								</div>
								<div>成长值 280/1000</div>
							</div>
						</div>
						<div class="user-blo-right login-attr-wrap">
							<img src="../../static/images/user/attr-default.png" alt />
						</div>
					</div>
					<div class="user-wrap-bottom">
						<div class="level-lint"></div>
						<div>ID 13927762</div>
					</div>
				</div>
			</template>
		</div>
		<div class="surplus-wrap">
			<div class="surplus-left">
				<div>我的余额(¥)</div>
				<div class="my-surplus">0.00</div>
			</div>
			<div class="surplus-right">
				<button class="button-com">充值</button>
				<button class="button-com red">付款</button>
			</div>
		</div>
		<div class="list-content">
			<tui-list-view title class="tui-list-view">
				<tui-list-cell class="tui-list" :arrow="true" @click="$util.pageTo('/pages/order/list')">
					<div class="list-wrap">
						<div class="list-label">我的订单</div>
						<div class="list-text">2</div>
					</div>
				</tui-list-cell>
				<tui-list-cell class="tui-list" :arrow="true" @click="$util.pageTo('/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="$util.pageTo('/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="$util.pageTo('/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="$util.pageTo('/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 title class="tui-list-view">
				<tui-list-cell class="tui-list" :last="true" @click="detail">
					<div class="list-wrap">
						<div class="list-label">退出登录</div>
					</div>
				</tui-list-cell>
			</tui-list-view>
		</div>
		<!-- 登录弹窗 -->
		<bottom-popup class="popup-wrap" :show="popupShow" @close="hidePopup">
			<app-close @close="hidePopup" />
			<div class="popup-content">
				<div class="step-wrap">
					<app-step :index="stepIndex" />
				</div>
				<!-- 获取手机号 -->
				<template v-if="stepIndex == 0">
					<div class="popup-attr-wrap">
						<img src="../../static/images/user/attr-default.png" alt />
					</div>
					<div class="creat-account-btn">
						<button class="button-com red big">点击创建头像</button>
					</div>
				</template>
				<!-- 注册完成 -->
				<template v-if="stepIndex == 1">
					<div class="popup-phone-wrap">
						<div class="phone-icon">
							<i class="iconfont iconshoujihao"></i>
						</div>
						<div class="phone-num font-bold">13285979347</div>
					</div>
					<div class="creat-account-btn">
						<button class="button-com red big">点击创建头像</button>
					</div>
				</template>
				<!-- 关注公众号 -->
				<template v-if="stepIndex == 2">
					<div class="wx-public-wrap">
						<div class="app-color-3">国兰华尚关联的公众号</div>
						<div class="flex-center-between">
							<div class="wx-public-left">
								<div class="wx-public-img">
									<img src="../../static/images/user/attr-default.png" alt />
								</div>
								<div class="wx-public-det">
									<div class="wx-public-tit">国兰华尚</div>
									<div>花艺.品味.生活</div>
								</div>
							</div>
							<button class="button-com wx-public-btn">查看</button>
						</div>
					</div>
				</template>
			</div>
		</bottom-popup>
		<!-- 登录弹窗 -->
		<app-trademark />
		<!-- <app-footer :activeIndex="3" /> -->
	</div>
</template>

<script>
// import appFooter from '@/components/app-footer'
import tuiListView from '@/components/plugin/list-view'
import tuiListCell from '@/components/plugin/list-cell'
import bottomPopup from '@/components/plugin/bottom-popup'
import appStep from '@/components/app-step'
import appTrademark from '@/components/module/app-trademark'
import appClose from '@/components/module/app-close'
export default {
	name: 'user',
	components: {
		// appFooter
		tuiListView,
		tuiListCell,
		bottomPopup,
		appStep,
		appTrademark,
		appClose
	},
	data() {
		return {
			popupShow: false,
			stepIndex: 0
		}
	},
	onLoad(option) {},
	methods: {
		showPopup() {
			this.popupShow = true
		},
		hidePopup() {
			this.popupShow = 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);
		}
	}
	.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;
			}
		}
	}
	// 弹窗
	/deep/.popup-wrap {
		.tui-popup-class {
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			// 适配iphoneX
			padding-bottom: env(safe-area-inset-bottom);
		}
		.popup-content {
			padding-top: 60px;
			.step-wrap {
				width: 80%;
				margin: 0 auto;
			}
			// 第一步
			.popup-attr-wrap {
				width: 160px;
				height: 160px;
				margin: 80px auto 60px;
			}
			.creat-account-btn {
				width: 600px;
				padding-bottom: 80px;
				margin: 0 auto;
				.button-com {
					width: 100%;
					text-align: center;
					font-size: 32px;
				}
			}
			// 第二步
			.popup-phone-wrap {
				@include disFlex(center, flex-start);
				width: 600px;
				// height: 94px;
				margin: 142px auto 62px;
				padding-left: 40px;
				padding-bottom: 40px;
				border-bottom: 1px solid $borderColor;
				.phone-icon {
					i {
						font-size: 44px;
					}
				}
				.phone-num {
					font-size: 60px;
					margin-left: 42px;
					letter-spacing: 3px;
				}
			}
			// 第三步
			.wx-public-wrap {
				width: 90%;
				padding: 10px 16px 28px;
				box-shadow: 2px 2px 10px #eee;
				margin: 118px auto 194px;
				border-radius: 10px;
				.flex-center-between {
					margin-top: 22px;
					.wx-public-left {
						@include disFlex(center, flex-start);
						.wx-public-img {
							width: 78px;
							height: 78px;
						}
						.wx-public-det {
							color: #7c7e7d;
							margin-left: 20px;
							.wx-public-tit {
								color: #333;
								font-size: 32px;
								margin-bottom: 6px;
							}
						}
					}
					.wx-public-btn {
						color: $mainColor1;
						border-color: $borderColor1;
						border-radius: 10px;
					}
				}
			}
		}
	}
</style>
