<template>
	<view class="pr pb100">
		<image class="user-bg" src="/static/bg/user-bg.png" mode=""></image>
		<view class="user-top d-b-s white">
			<view class="flex-1">
				<view class=" d-b-s ww100 mb20">
					<image class="user-ava" :src="userInfo.headPath || userInfo.countryCircularIcon" mode=""></image>
					<view class="user-info d-c d-b-s flex-1">
						<view class="d-s-c mb10">
							<text class="f28 fb mr20">{{userInfo.memberName}}</text>
							<!-- 	<view class="grad-btn d-c-c">
								<image class="menber-icon" src="/static/icon/menber-icon.png" mode=""></image>
								<text>{{userData.awardsVal}}</text>
							</view> -->
							<view class="d-s-c">
								<image class="vip-icon" v-if="userInfo.gradeIcon" :src="userInfo.gradeIcon" mode="">
								</image>
								<image class="vip-icon" v-if="userInfo.awardsIcon" :src="userInfo.awardsIcon" mode="">
								</image>
							</view>
						</view>
						<view class="f22">{{$t('MN_T_1')}}:{{userInfo.memberCode}}</view>
					</view>
				</view>

			</view>
			<view class="d-c d-b-e user-info">
				<view class="icon iconfont icon-shezhi1" @click="gotoPage('pages/user/set/index')"></view>
				<!-- <view>服务中心</view> -->
			</view>
		</view>
		<view class="my-assets">
			<view class="my-assets-all">
				<view class="f28">{{$t('N_I_247')}}</view>
				<view class="gray9 f24" @click="jumpPage('/pages/order/myorder')">{{$t('MY_ORD_54')}}<text
						class="icon iconfont icon-jiantou"></text></view>
			</view>
			<view class="d-b-c w100">
				<view class="item" @click="jumpPage('/pages/order/myorder?dataType=0')">
					<view class="icon-box pr">
						<image src="/static/icon/icon-icon.png" mode=""></image>
						<text class="dot  d-c-c"
							v-if="orderCount.waitPayNum != null && orderCount.waitPayNum > 0">{{ orderCount.waitPayNum }}</text>
					</view>
					<text>{{$t('ENU_ORDER_S_0')}}</text>
				</view>
				<view class="item" @click="jumpPage('/pages/order/myorder?dataType=1')">
					<view class="icon-box pr">
						<image src="/static/icon/icon-daifahuo.png" mode=""></image>
						<text class="dot  d-c-c"
							v-if="orderCount.payNum != null && orderCount.payNum > 0">{{ orderCount.payNum }}</text>
					</view>
					<text class="">{{$t('ENU_ORDER_S_1')}}</text>
				</view>
				<view class="item" @click="jumpPage('/pages/order/myorder?dataType=3')">
					<view class="icon-box pr">
						<image src="/static/icon/icon-daishouhuo.png" mode=""></image>
					</view>
					<text>{{$t('ENU_ORDER_S_3')}}</text>
				</view>
				<view class="item" @click="jumpPage('/pages/order/myorder?dataType=4')">
					<view class="icon-box pr">
						<image src="/static/icon/icon-quanbudingdan.png" mode=""></image>
					</view>
					<text>{{$t('ENU_ORDER_S_5')}}</text>
				</view>
			</view>
		</view>
		<view class="menu-list">
			<view class="menu-title border-b f28">{{$t('ENU_MENU_90')}}</view>
			<view v-if="listmenu">
				<view class="d-b-c menu-item" @click="gotoPage('/pages/user/my-wallet/index')" v-if="hasMenu('wallet')">
					<view class="d-s-c ">
						<image class="menu-icon" src="/static/icon/user/wdqb.png" mode=""></image>
						<view>{{$t('ENU_MENU_901')}}</view>
					</view>
					<view class="icon iconfont icon-jiantou"></view>
				</view>
				<view class="d-b-c menu-item" @click="gotoPage('/pages/user/electron-card/index')">
					<view class="d-s-c ">
						<image class="menu-icon" src="/static/icon/user//dzhyk.png" mode=""></image>
						<view>{{$t('PER_DA_13')}}</view>
					</view>
					<view class="icon iconfont icon-jiantou"></view>
				</view>
				<view class="d-b-c menu-item" @click="gotoPage('/pages/order/myorder')" v-if="hasMenu('order')">
					<view class="d-s-c ">
						<image class="menu-icon" src="/static/icon/user/wddd.png" mode=""></image>
						<view>{{$t('ENU_MENU_902')}}</view>
					</view>
					<view class="icon iconfont icon-jiantou"></view>
				</view>
				<view class="d-b-c menu-item" @click="gotoPage('/pages/pickup-area/index')" v-if="hasMenu('pickGoods')">
					<view class="d-s-c ">
						<image class="menu-icon" src="/static/icon/user/thzq.png" mode=""></image>
						<view>{{$t('ENU_MENU_904')}}</view>
					</view>
					<view class="icon iconfont icon-jiantou"></view>
				</view>
				<!-- <view class="d-b-c menu-item" @click="gotoPage('/pages/member-area/index')" v-if="hasMenu('product')">
					<view class="d-s-c ">
						<image class="menu-icon" src="/static/icon/user/hygl.png" mode=""></image>
						<view>会员专区</view>
					</view>
					<view class="icon iconfont icon-jiantou"></view>
				</view> -->
				<view class="d-b-c menu-item" @click="gotoPage('/pages/market/index')" v-if="hasMenu('market')">
					<view class="d-s-c ">
						<image class="menu-icon" src="/static/icon/user/scdt.png" mode=""></image>
						<view>{{$t('ENU_MENU_50')}}</view>
					</view>
					<view class="icon iconfont icon-jiantou"></view>
				</view>
				<view class="d-b-c menu-item" @click="gotoPage('/pages/maker-space/index')" v-if="hasMenu('space')">
					<view class="d-s-c ">
						<image class="menu-icon" src="/static/icon/user/ckkj.png" mode=""></image>
						<view>{{$t('ENU_MENU_70')}}</view>
					</view>
					<view class="icon iconfont icon-jiantou"></view>
				</view>
				<view class="d-b-c menu-item" @click="gotoPage('/pages/self-service/index')" v-if="hasMenu('selfHelp')">
					<view class="d-s-c ">
						<image class="menu-icon" src="/static/icon/user/zzfw.png" mode=""></image>
						<view>{{$t('ENU_MENU_905')}}</view>
					</view>
					<view class="icon iconfont icon-jiantou"></view>
				</view>
				<view class="d-b-c menu-item" @click="gotoPage('pages/user/set/security')">
					<view class="d-s-c ">
						<image class="menu-icon" src="/static/icon/user/zhaq.png" mode=""></image>
						<view>{{$t('w_0026')}}</view>
					</view>
					<view class="icon iconfont icon-jiantou"></view>
				</view>
				<view class="d-b-c menu-item" @click="gotoPage('/pages/user/address/address')">
					<view class="d-s-c ">
						<image class="menu-icon" src="/static/icon/user/dzgl.png" mode=""></image>
						<view>{{$t('w_0027')}}</view>
					</view>
					<view class="icon iconfont icon-jiantou"></view>
				</view>
				<view class="d-b-c menu-item" @click="gotoPage('/pages/user/card/list')">
					<view class="d-s-c ">
						<image class="menu-icon" src="/static/icon/user/yhxx.png" mode=""></image>
						<view>{{$t('MY_WAL_3')}}</view>
					</view>
					<view class="icon iconfont icon-jiantou"></view>
				</view>
				<view class="d-b-c menu-item" @click="gotoPage('/pages/user/feedback/feedback')">
					<view class="d-s-c ">
						<image class="menu-icon" src="/static/icon/user/yjfk.png" mode=""></image>
						<view>{{$t('S_L_15')}}</view>
					</view>
					<view class="icon iconfont icon-jiantou"></view>
				</view>
				<view class="d-b-c menu-item">
					<view class="d-s-c ">
						<image class="menu-icon" src="/static/icon/user/dyyqh.png" mode=""></image>
						<view>{{$t('MY_ORD_55')}}</view>
					</view>
					<view class="icon iconfont icon-jiantou"></view>
				</view>
				<view class="d-b-c menu-item" @click="gotoPage('/pages/user/about/index')">
					<view class="d-s-c ">
						<image class="menu-icon" src="/static/icon/user/gywm.png" mode=""></image>
						<view>{{$t('w_0006')}}</view>
					</view>
					<view class="icon iconfont icon-jiantou"></view>
				</view>
			</view>
		</view>
		<button @click="loginOut()" class="normal-sub-btn">{{$t('w_0028')}}</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				userData: {},
				listmenu: [],
				orderCount:{
					waitPayNum: 0,
					payNum: 0
				}
			};
		},
		onLoad: function(options) {
			this.getMenu();
			this.getUserInfoData();
			this.getUserData();
			this.getCartNum();
		},
		onShow() {
			this.getOrderNumData();
		},
		methods: {
			getOrderNumData() {
				let self = this;
				self.loading = true;
				self._get(
					'sale/api/my-order/num', {},
					function(res) {
						self.orderCount = res.data;
					}, {},
					() => {
						self.loading = false;
					}
				);
			},
			getCartNum() {
				let self = this;
				self._get('sale/api/shopping/getShoppingCount', {
					specialArea: '',
					pkCountry: ''
				}, res => {
					uni.setTabBarBadge({
						index: 2,
						text: res.data.cont + ''
					})
				})
			},
			hasMenu(key) {
				let self = this;
				let flag = false;
				console.log(key)
				self.listmenu.forEach((item, index) => {
					if (item.menuKey == key) {
						flag = true
					}
				})
				console.log(flag)
				return flag
			},
			getMenu() {
				let self = this;
				self._get('system/api/menu/list', {}, res => {
					let list = [];
					let arr = res.data;
					arr.forEach((item, index) => {
						if (item.menuParent == 0 || item.menuParent == 90) {
							list.push(item)
						}
					})
					self.listmenu = list;
					console.log(self.listmenu)
				});
			},
			// 获取用户信息
			getUserInfoData() {
				let self = this;
				self.loadding = true;
				self._get('member/api/member/get-info', {}, function(res) {
					if (res.code == 200) {
						self.userInfo = res.data;
					}
					self.loadding = false;
					uni.hideLoading();
				});
			},
			// 获取用户信息
			getUserData() {
				let self = this;
				self.loadding = true;
				self._get('member/api/member/get-data', {}, function(res) {
					if (res.code == 200) {
						self.userData = res.data;
					}
					self.loadding = false;
					uni.hideLoading();
				});
			},
			/*发送短信*/
			loginOut() {
				let self = this;
				self._delete(
					'member/auth/api/logout', '',
					result => {
						if (result.code == 200) {
							uni.showToast({
								title: '退出成功'
							});
							uni.removeStorageSync('Admin-Token');
							uni.removeStorageSync('expires_in');
							self.gotoPage('/login');
						}
					}
				);
			},
		}
	};
</script>

<style lang="scss">
	.user-bg {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
		width: 750rpx;
		height: 331rpx;
	}

	.user-top {
		width: 750rpx;
		height: 331rpx;
		position: relative;
		z-index: 1;
		padding: 77rpx 25rpx 0 22rpx;
		box-sizing: border-box;
	}

	.grad-btn {
		// width: 146rpx;
		height: 46rpx;
		line-height: 46rpx;
		padding: 0 18rpx;
		background: rgba(#000, 0.25);
		border-radius: 23rpx;
		margin-left: 22rpx;
	}

	.menber-icon {
		width: 23rpx;
		height: 18rpx;
		margin-right: 7rpx;
	}

	.user-info {
		height: 88rpx;
	}

	.user-ava {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		display: block;
		margin-right: 18rpx;
	}

	.icon.icon-shezhi1 {
		font-size: 44rpx;
		color: #fff;
	}

	.vip-icon {
		width: 59rpx;
		height: 59rpx;
		margin-right: 26rpx;
		display: block;
	}

	.menu-list {
		background-color: #fff;
		border-radius: 25rpx 25rpx 0 0;
		padding: 23rpx;
		margin-top: -30rpx;
		position: relative;
		z-index: 2;
	}

	.menu-item {
		height: 100rpx;
		font-size: 26rpx;
	}

	.menu-title {
		height: 100rpx;
		line-height: 100rpx;
	}

	.menu-icon {
		width: 56rpx;
		height: 56rpx;
		display: block;
		margin-right: 28rpx;
	}

	.icon.icon-jiantou {
		font-size: 26rpx;
		color: #999;
	}

	.normal-sub-btn {
		margin: 50rpx auto;
	}

	.my-assets {
		margin: 0 20rpx 0 22rpx;
		padding: 22rpx;
		padding-top: 0;
		background: #ffffff;
		border-radius: 20rpx;
		margin-top: -50rpx;
		z-index: 2;
		position: relative;
		margin-bottom: 24rpx;
	}

	.my-assets .item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.my-assets .icon-box image {
		width: 48rpx;
		height: 48rpx;
		margin-bottom: 16rpx;
	}

	.my-assets .icon-box {
		width: 60rpx;
		height: 60rpx;
	}

	.my-assets .icon-box .iconfont {
		font-size: 50rpx;
		color: #333333;
	}

	.my-assets .icon-box .dot {
		position: absolute;
		top: -13rpx;
		right: -8rpx;
		height: 25rpx;
		min-width: 25rpx;
		padding: 4rpx;
		border-radius: 20rpx;
		font-size: 20rpx;
		background: linear-gradient(180deg, #FC4133, #FF7A04);
		color: #ffffff;
	}
	.my-assets-all {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.my-assets-all .icon.icon-jiantou {
		font-size: 12px;
		color: #999999;
	}
</style>