<template>
	<view>
		<view class="hm-header-xian"></view>
		<!-- 用户信息 -->
		<view class="header">
			<view class="user">
				<image class="avatar" :src="userInfo.avatar.url" />
				<view v-if="isLogin">
					<view class="name" @click="goTo('user/detail/index')">
						{{userInfo.phone}}
						<view class="setting">
							<u-icon color="#c0c4cc" size="24" name="setting"></u-icon>
						</view>
					</view>
				</view>
				<view v-else>
					<!-- #ifdef H5 -->
					<view class="name" @click="goTo('login/index',false)">
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
						<view class="name" @click="login = true">
							<!-- #endif -->
							登录/注册
							<view class="hm-dis-block-inline">
								<u-icon color="#303133" name="arrow-right"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view v-if="center.vip == 1 && isLogin" class="vip">
					<view class="icon">
						<u-icon color="#fcbd71" bold size="20" name="level"></u-icon>
					</view>
					<view v-if="userInfo.v.value">
						VIP{{userInfo.v.value}}
						<view class="but">
							<u-button @click="goTo('user/vip/index')" icon="play-right-fill" type="info" size="mini"
								text="会员详情"></u-button>
						</view>
					</view>
					<view v-else>
						开通会员卡，各种优惠享不停
						<view class="but">
							<u-button @click="goTo('user/vip/open?action=vip')" icon="play-right-fill" type="info"
								size="mini" text="立即开通"></u-button>
						</view>
					</view>
				</view>
			</view>
			<view class="hm-p-lr-20 hm-m-t-20">
				<view class="navbar">
					<u-grid :border="false" col="4">
						<u-grid-item @click="onTargetOrder(0)">
							<image src="/static/user/order.png"></image>
							<view class="text">全部订单</view>
						</u-grid-item>
						<u-grid-item @click="onTargetOrder(1)">
							<u-badge :count="isLogin?orderCount.payment:0" :offset="[20, 20]"></u-badge>
							<image src="/static/user/payment.png"></image>
							<view class="text">待付款</view>
						</u-grid-item>
						<u-grid-item @click="onTargetOrder(2)">
							<u-badge :count="isLogin?orderCount.comment:0" :offset="[20, 20]"></u-badge>
							<image src="/static/user/evaluate.png"></image>
							<view class="text">待评价</view>
						</u-grid-item>
						<u-grid-item @click="onTargetOrder(3)">
							<u-badge :count="isLogin?orderCount.refund10:0" :offset="[20, 20]"></u-badge>
							<image src="/static/user/refund.png"></image>
							<view class="text">待退款</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<view class="hm-p-lr-20 hm-m-t-20">
				<view class="menu">
					<view class="navbar-list" v-for="(item, index) in center.menu" :key="index"
						@click="goTo(item.path)">
						<image :src="item.logo"></image>
						{{item.title}}
						<view class="arrow-right">
							<u-icon color="#c0c4cc" name="arrow-right"></u-icon>
						</view>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<view v-if="center.contact.is_open == 1" class="navbar-list">
						<view v-if="center.contact.type == 'wechat'">
							<button open-type="contact" class="hm-btn-normal">
								<image src="/static/user/service.png"></image>
								<text style="color: #303133;">联系我们</text>
								<view class="arrow-right">
									<u-icon color="#c0c4cc" name="arrow-right"></u-icon>
								</view>
							</button>
						</view>
						<view v-else @click="callMe(center.contact.phone)">
							<image src="/static/user/service.png"></image>
							联系我们
							<view class="arrow-right">
								<u-icon color="#c0c4cc" name="arrow-right"></u-icon>
							</view>
						</view>
					</view>
					<view v-if="center.setting == 1" class="navbar-list">
						<button open-type="openSetting" class="hm-btn-normal">
							<image src="/static/user/setting.png"></image>
							<text style="color: #303133;">权限设置</text>
							<view class="arrow-right">
								<u-icon color="#c0c4cc" name="arrow-right"></u-icon>
							</view>
						</button>
					</view>
					<view v-if="center.helper == 1" class="navbar-list" @click="helper">
						<image src="/static/user/settle.png"></image>
						商家助手
						<view class="arrow-right">
							<u-icon color="#c0c4cc" name="arrow-right"></u-icon>
						</view>
					</view>
					<!-- #endif -->
				</view>
			</view>
			<!--技术支持 -->
			<view class="hm">
				{{applet.copyright}} <text class="v">V{{applet.version}}</text>
			</view>
			<!-- #ifndef H5 -->
			<u-popup :show="login" round="10" closeable @close="login = false">
				<view class="hm-p-20 hm-border-b">{{applet.app_name}}</view>
				<view class="app-img">
					<image :src="applet.head_img"></image>
				</view>
				<view class="app-title">{{applet.signature}}</view>
				<view class="hm-p-tb-20">
					<view class="app-50">
						<view class="but">
							<u-button @click="login = false" type="info">暂不登录</u-button>
						</view>
					</view>
					<view class="app-50">
						<view class="but">
							<!-- #ifdef MP-WEIXIN -->
							<u-button type="success" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
								text="一键登录"></u-button>
							<!-- #endif -->
							<!-- #ifdef MP-ALIPAY -->
							<button
							  open-type="getAuthorize"
							  scope="phoneNumber"
							  onGetAuthorize="getPhoneNumber"
							  onError="handleAuthError"
							>一键登录</button>
							<!-- #endif -->
						</view>
					</view>
				</view>
				<!--
				<view class="hm-col-tips hm-font-24 hm-text-center hm-p-tb-20">
					授权登录即表示已阅读并同意<text class="hm-col-error">《会员须知》《隐私协议》</text>
				</view>
				-->
			</u-popup>
			<!-- #endif -->
		</view>
</template>
<script>
	const App = getApp();
	export default {
		data() {
			return {
				center: {}, //用户中心配置
				isLogin: false,
				userInfo: {
					avatar: {
						url: '/static/default-avatar.jpg'
					},
					v: {
						value: 0
					}
				},
				orderCount: {},
				couponCount: {},
				login: false,
				applet: {},
			};
		},
		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			let _this = this;
			_this.getCenter();
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			let _this = this;
			_this.login = false;
			_this.isLogin = App.checkIsLogin();
			_this.getApplet();
			if (_this.isLogin) {
				// 获取当前用户信息
				_this.getUserDetail();
			}
		},

		methods: {
			/**
			 * 一键授权登录
			 */
			getPhoneNumber: function(e) {
				let _this = this;
				// #ifdef MP-ALIPAY
				my.getPhoneNumber({
					protocols:{
					    isvAppId: _this.applet.component_appid    
					},
					success: (res) => {
						let rs = JSON.parse(res.response);
						_this.login = false;
						if(rs.response.code){
							App.showError('错误代码：'+rs.response.subCode+'错误信息：'+rs.response.subMsg);
							return false;
						}
						App.getPhoneNumber(rs, (msg) => {
							_this.isLogin = true;
							_this.getUserDetail();
							App.showSuccess(msg);
						});
					}
				});
				// #endif
				// #ifdef MP-WEIXIN
				App.getPhoneNumber(e, (msg) => {
					_this.login = false;
					_this.isLogin = true;
					_this.getUserDetail();
					App.showSuccess(msg);
				});
				// #endif
			},

			/**
			 * 打开商户端小程序
			 */
			helper: function() {
				let _this = this;
				if (_this.applet.helper_appid == '') {
					App.showError('未配置助手小程序');
				} else {
					uni.navigateToMiniProgram({
						appId: _this.applet.helper_appid,
						success(res) { // 打开成功
						}
					});
				}
			},

			/**
			 * 拨打电话
			 */
			callMe(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},

			/**
			 * 获取当前用户信息
			 */
			getUserDetail() {
				let _this = this;
				App._get('user.index/detail', {}, result => {
					_this.setData(result.data);
				});
			},
			/**
			 * 获取用户中心配置
			 */
			getCenter() {
				let _this = this;
				App._get('applet/center', {}, result => {
					_this.center = result.data;
				});
			},
			/**
			 * 订单导航跳转
			 */
			onTargetOrder(order_type) {
				let _this = this;
				uni.setStorageSync('order_type', order_type);
				App.goTo('order/index'); // 转跳指定的页面
			},

			/**
			 * 菜单列表导航跳转
			 */
			goTo(url) {
				let _this = this;
				if (url != 'login/index') {
					if (!_this.onCheckLogin()) {
						return false;
					}
				}
				App.goTo(url); // 转跳指定的页面
			},

			/**
			 * 验证是否已登录
			 */
			onCheckLogin() {
				let _this = this;
				if (!_this.isLogin) {
					App.showError('很抱歉，您还没有登录');
					return false;
				}
				return true;
			},
			/**
			 * 获取当前小程序配置
			 */
			getApplet() {
				let _this = this,
					applet;
				if (applet = uni.getStorageSync('applet')) {
					_this.applet = applet;
				} else {
					App.getAppletBase(() => {
						_this.getApplet();
					});
				}
			}

		}
	};
</script>
<style lang="scss" scoped>
	.header {
		padding: 0 20rpx;
		background-color: #fff;

		.user {
			height: 100rpx;
			padding: 20rpx;

			.avatar {
				width: 100rpx;
				height: 100rpx;
				float: left;
				margin-right: 20rpx;
				border-radius: 50%;
			}

			.name {
				font-size: 30rpx;
				font-weight: 600;
				line-height: 100rpx;
				color: #303133;

				.setting {
					float: right;
					margin-top: 28rpx;
					display: inline-block;
				}
			}
		}

		.vip {
			padding: 15rpx 40rpx;
			height: 50rpx;
			line-height: 50rpx;
			background-color: #303133;
			font-size: 24rpx;
			color: #fff;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;

			.icon {
				display: inline-block;
				float: left;
				margin-top: 8rpx;
				margin-right: 5rpx;
			}

			.but {
				display: inline-block;
				float: right;
				margin-top: 6rpx;
			}
		}

	}

	.navbar {
		background-color: #fff;
		border-radius: 15rpx;
		padding: 30rpx 20rpx;

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

		.text {
			color: #000;
			font-weight: bold;
			font-size: 28rpx;
		}
	}

	.menu {
		border-radius: 15rpx;
		padding: 0 20rpx 30rpx 20rpx;
		background-color: #fff;

		.navbar-list {
			padding-top: 30rpx;
			line-height: 50rpx;

			image {
				float: left;
				margin-right: 20rpx;
				height: 50rpx;
				width: 50rpx;
			}

			.text {
				display: inline-block;
				float: right;
				margin-right: 10rpx;
				font-size: 24rpx;
				color: #fa3534;
			}

			.arrow-right {
				display: inline-block;
				float: right;
				margin-top: 10rpx;
			}
		}
	}

	.app-img {
		text-align: center;

		image {
			height: 120rpx;
			width: 120rpx;
			margin-top: 40rpx;
			border-radius: 50%;
		}
	}

	.app-title {
		color: #999;
		padding: 10rpx 0rpx 20rpx 0rpx;
		text-align: center;
	}

	.app-50 {
		width: 50%;
		text-align: center;
		display: inline-block;

		.but {
			width: 50%;
			display: inline-block;
		}
	}
</style>