<template>
	<view class="life-mine-page">
		<view class="header-title" :style="{'paddingTop':statusBarHeight}">
			<view class="header-img"></view>
			<view class="title">个人中心</view>
			<image src="@/static/mine/set.png" mode="" class="header-img" @click="set"></image>
		</view>
		<view class="header-info">
			<view class="info">
				<!-- @click="previewImage" -->
				<image :src="infoDetail.avatarResource ? infoDetail.avatarResource.url : 'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/logo.png' " class="avatar-img" mode="aspectFill"></image>
				<view class="info-detail">
					<view class="name">{{infoDetail.nickname||''}}</view>
					<view class="username">ID:{{infoDetail.username |  mobileFilter(infoDetail.username)}}</view>
				</view>
			</view>
			<view class="sign-in" @click="sign">
				<image src="@/static/mine/jb.png" class="sign-in-img" mode=""></image>
				充值
			</view>
		</view>
		<view class="goods">
			<view class="goods-item" @click="ponitRecord">
				<view class="item-value">{{infoDetail.points||0}}</view>
				<view class="item-title">积分</view>
			</view>
			<view class="shu"></view>
			<view class="goods-item" @click="coupon">
				<view class="item-value">25</view>
				<view class="item-title">优惠券</view>
			</view>
			<view class="shu"></view>
			<view class="goods-item" @click="warehouse">
				<view class="item-value">{{count||0}}</view>
				<view class="item-title">物品</view>
			</view>
		</view>
		<view class="main">
			<view class="order">
				<view class="order-header">
					<view class="order-header-title">我的订单</view>
					<view class="order-header-right" @click="goOrder">
						全部订单
						<image src="@/static/mine/jt.png" mode="" class="order-arr"></image>
					</view>
				</view>
				<view class="order-list">
					<view class="order-list-item" v-for="(item,index) in orderList" :key="index" @click="goPath(item)">
						<image :src="item.img" mode="" :style="{width:item.width,height:item.height}"></image>
						<view class="order-txt">{{item.label}}</view>
					</view>
				</view>
			</view>
			<view class="list-main">
				<view class="order-header">
					<view class="order-header-title">我的服务</view>
				</view>
				<view class="list">
					<view class="list-item" v-for="(item,index) in list" :key="index" @click="goPath(item)">
						<image :src="item.img" mode="" :style="{width:item.width,height:item.height}"></image>
						<view class="list-txt">{{item.label}}</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- <view class="user-info">
			<view class="info">
				<image :src="infoDetail.avatar ? infoDetail.avatar : 'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/logo.png'" mode="aspectFill" class="info-photo"></image>
				<view class="info-detail" v-if="isLogin">
					<view class="detail-name">{{infoDetail.nickname||''}}</view>
					<view class="detail-account">
						账号 {{ infoDetail.username |  mobileFilter(infoDetail.username)}}
						<image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/edit.png" mode="" class="detail-edit" @click="copy(infoDetail.phone)"></image>
					</view>
				</view>
				<view class="info-detail" @click="goLogin" v-if="!isLogin">
					立即登录
				</view>
			</view>
			<image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/shezhi.png" mode="" class="setting" @click="goPersonal"></image>
		</view> -->
		<!-- <view class="member">
			<view class="member-label">
				<view class="member-title">人脉变钱脉</view>
				<view class="member-sub">解锁通行证，惊喜不断</view>
			</view>
			<view class="member-btn">立即激活</view>
		</view> -->
		<!-- <view class="goods">
			<view class="goods-item" @click="ponitRecord">
				<view class="item-num">{{infoDetail.points||0}}</view>
				<view class="item-label">蜜豆</view>
			</view>
			<view class="goods-item" @click="warehouse">
				<view class="item-num">{{count||0}}</view>
				<view class="item-label">物品</view>
			</view>
		</view>
		<view class="opc-view">
			<view class="opc-header" @click="goOrder">
				<view class="header-title">我的订单</view>
				<view class="header-right">
					全部订单
					<image src="../../static/index/jt.png" mode="" class="right-jt"></image>
				</view>
			</view>
			<view class="order-opc">
				<template v-for="(item,index) in orderList">
					<view class="opc-item" @click="goPath(item)" :key="index" >
						<image :src="item.img" mode="" :style="{width:item.width,height:item.height}"></image>
						<view class="opc-txt">{{item.label}}</view>
					</view>
				</template>
			</view>
		</view>
		<view class="opc" style="margin-top: 20rpx;">
			<template v-for="(item,index) in operationList">
				<view v-if="item.isShow" class="opc-item"  @click="goPath(item)" :key="index">
					<image :src="item.img" mode="" :style="{width:item.width,height:item.height}"></image>
					<view class="opc-txt">{{item.label}}</view>
				</view>
			</template>
		</view> -->
		<!-- <aui-loading ref="loading"></aui-loading>
		<login-popup ref="loginPopup"></login-popup> -->
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/mine/index"></page-popup>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? `${uni.getSystemInfoSync().statusBarHeight}px` : '20px'
	import { userInfo,boxCount,recordCountApi,customerApi } from '@/API/user.js'
	export default{
	mixins: [myMixins],
		data(){
			return{
				statusBarHeight,
				list:[
					{label:"盲盒订单",img:"../../static/mine/mhdd.png",width:"31rpx",height:"36rpx",page:'/pages/mine/boxOrder'},
					{label:"地址管理",img:"../../static/mine/ddgl.png",width:"31rpx",height:"36rpx",page:'/pages/mine/address'},
					{label:"我的收藏",img:"../../static/mine/wdsc.png",width:"36rpx",height:"35rpx",page:"/pages/mine/collect"},
					{label:"联系客服",img:"../../static/mine/lxkf.png",width:"36rpx",height:"36rpx",page:'customer'},
					// {label:"意见反馈",img:"../../static/mine/yjfk.png",width:"36rpx",height:"36rpx",page:"/pages/mine/feedback"},
					// {label:"系统公告",img:"../../static/mine/xtgg.png",width:"37rpx",height:"38rpx",page:'/pages/mine/notice'},
					// {label:"关于我们",img:"../../static/mine/gywm.png",width:"35rpx",height:"37rpx",page:'/pages/mine/about'},
				],
				operationList:[
					{isShow:true,label:"盲盒订单",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-dd.png",width:"52rpx",height:"52rpx",page:'/pages/lifeOrder/order'},
					{isShow:true,label:"地址管理",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-dz.png",width:"52rpx",height:"52rpx",page:'/pages/mine/address'},
					{isShow:true,label:"我的收藏",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-sc.png",width:"52rpx",height:"52rpx",page:"/pages/mine/collect"},
					{isShow:true,label:"联系客服",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-kf.png",width:"52rpx",height:"52rpx"},
					{isShow:false,label:"劵码核销",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-qm.png",width:"52rpx",height:"52rpx",page:'/pages/lifeCancel/cancel'},
					{isShow:true,label:"意见反馈",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-yj.png",width:"52rpx",height:"52rpx",page:"/pages/mine/feedback"},
					{isShow:true,label:"系统公告",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-xt.png",width:"52rpx",height:"52rpx",page:'/pages/mine/notice'},
					{isShow:true,label:"关于我们",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-gy.png",width:"52rpx",height:"52rpx",page:'/pages/mine/about'},
				],
				orderList:[
					{label:"待发货",img:"../../static/mine/dfh.png",width:"40rpx",height:"40rpx",page:'/pages/order/index?type=WAITING_FOR_SHIPMENT'},
					{label:"待收货",img:"../../static/mine/dsh.png",width:"41rpx",height:"39rpx",page:'/pages/order/index?type=WAITING_FOR_RECEIPT'},
					{label:"已完成",img:"../../static/mine/ywc.png",width:"39rpx",height:"40rpx",page:'/pages/order/index?type=COMPLETED'},
				],
				infoDetail:{
					phone:"",
					avatarResource:{}
				},//用户信息
				boxCountData:{
					boxes: 0,
					items: 0
				},
				isLogin:uni.getStorageSync('box-token') ? true : false,
				count:0,
				customer:''
			}
		},
		filters:{
			// 隐藏手机号
			mobileFilter(val){
				let reg = /^(.{3}).*(.{4})$/
				return val ? val.replace(reg,'$1****$2') : ''
			},
		},
		onShow() {
			if(uni.getStorageSync('box-token')){
				this.getUserInfo()
				this.getRecordCount()
				this.getCustomer()
			}
			
			// if(this.$isLogin()){
			// 	// this.getCount()
			// 	this.getUserInfo()
			// }else{//未登录
				
			// }
		},
		methods:{
			previewImage(){
				let imgUrl = this.infoDetail.avatarResource.url ? this.infoDetail.avatarResource.url : 'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/logo.png'
				console.log(imgUrl)
				uni.previewImage({
					loop: true,
					urls: [imgUrl], //可以展示imgUrl 列表中所有的图片
					// current: index //首先当前index对应图片，左右可以切换其他序号的图片
				  });
			},
			
			// 设置
			set(){
				uni.navigateTo({
					url:`/pages/mine/setting`
				})
			},
			getCustomer(){
				customerApi().then(res => {
						if(res.code === 200){
							this.customer = res.data
						}else{
							this.$api.msg(res.message)
						}
				})
			},
			sign(){
				uni.navigateTo({
					url:`/pages/mine/topUp`
				})
			},
			coupon(){
				uni.navigateTo({
					url:`/pages/mine/coupon`
				})
			},
			ponitRecord(){
				uni.navigateTo({
					url:`/pages/mine/point`
				})
			},
			getRecordCount(){
				recordCountApi().then(res => {
					if(res.code === 200){
						this.count = res.data
					}else{
						this.$api.msg(res.message)
					}
				})
			},
			goOrder(){
				uni.navigateTo({
					url:`/pages/order/index?type=''`
				})
			},
			goLogin(){
				uni.navigateTo({
					url:`/pages/lifeLogin/login?type='back'`
				})
			},
			warehouse(){
				// if(this.$isLogin()){
					uni.$emit('updateTabData', {newData:'newData'});
					uni.navigateTo({
						url:`/pages/mine/boxRecrd`
					})
				// }else{
				// 	// this.$api.msg('请登录！')
				// 	this.$refs.loginPopup.show()
				// }
			},
			// 复制
			copy(val){
				uni.setClipboardData({
					data: val,
				})
			},
			// 获取礼盒 物品数量
			getCount(){
				boxCount().then(res => {
					console.log(res)
					if(res.code === 200){
						this.boxCountData = res.data
					}
				})
			},
			// 获取用户信息
			getUserInfo(){
				userInfo().then(res => {
					if(res.code === 200){
						this.infoDetail = res.data
						
					}else if(res.code == 400){
						uni.removeStorageSync('userInfo')
						uni.removeStorageSync('info')
						this.$api.msg(res.message)
					}else{
						this.$api.msg(res.message)
					}
				})
			},
			// 个人中心
			goPersonal(){
				// if(this.$isLogin()){
					uni.navigateTo({
						url:`/pages/lifeMine/personal`
					})
				// }else{
				// 	this.$refs.loginPopup.show()
				// }
			},
			goPath(item){
				if(item.page === 'customer'){
					// uni.openUrl({url:this.customer})
					window.open(this.customer)
				}else{
					uni.navigateTo({
						url:`${item.page}`
					})
				}
				// if(this.$isLogin()){
					// uni.navigateTo({
					// 	url:`${item.page}`
					// })
				// }else{
				// 	this.$refs.loginPopup.show()
				// }
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-image: url('@/static/index/bg.png');
		background-size: 100%;
	}
	.life-mine-page{
		// min-height: calc(100vh - var(--window-bottom));
		overflow: hidden;
		// padding: 0 20rpx;
		.header-title{
			font-weight: 500;
			font-size: 34rpx;
			color: #000000;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 23rpx;
			.header-img{
				width: 44rpx;
				height: 42rpx;
			}
			.title{
				
			}
		}
		.header-info{
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 48rpx 80rpx 0 42rpx;
			.info{
				display: flex;
				align-items: center;
				.avatar-img{
					width: 105rpx;
					height: 105rpx;
					border-radius: 50%;
				}
				.info-detail{
					margin-left: 26rpx;
					
					.name{
						font-weight: 500;
						font-size: 34rpx;
						color: #333333;
						width: 250rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.username{
						font-size: 24rpx;
						color: #888888;
						margin-top: 14rpx;
					}
				}
			}
			.sign-in{
				width: 178rpx;
				height: 59rpx;
				border-radius: 30rpx;
				border: 2rpx solid #C6C6C6;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				color: #333333;
				.sign-in-img{
					width: 42rpx;
					height: 43rpx;
					margin-right: 10rpx;
				}
			}
		}
		.goods{
			display: flex;
			align-items: center;
			margin-top: 53rpx;
			padding-bottom: 35rpx;
			.goods-item{
				width: 248rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.item-value{
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}
				.item-title{
					font-size: 22rpx;
					color: #888888;
					margin-top: 4rpx;
				}
			}
			.shu{
				width: 2rpx;
				height: 38rpx;
				background: #DFDFDF;
			}
		}
		.main{
			width: 750rpx;
			// height: calc(100vh - 470rpx);
			background: #F6F6F6;
			border-radius: 20px 20rpx 0 0;
			padding-top: 21rpx;
			.order{
				width: 706rpx;
				background: #FFFEFE;
				border-radius: 20rpx;
				margin-left: 22rpx;
				box-sizing: border-box;
				padding: 24rpx 39rpx 43rpx 34rpx;
				.order-header{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.order-header-title{
						font-weight: 500;
						font-size: 30rpx;
						color: #333333;
					}
					.order-header-right{
						display: flex;
						align-items: center;
						font-size: 22rpx;
						color: #888888;
						.order-arr{
							margin-left: 10rpx;
							width: 13rpx;
							height: 24rpx;
						}
					}
				}
				.order-list{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 44rpx;
					padding: 0 30rpx;
					.order-list-item{
						display: flex;
						align-items: center;
						flex-direction: column;
						.order-txt{
							font-size: 22rpx;
							color: #888888;
							margin-top: 10rpx;
						}
					}
				}
			}
			.list-main{
				width: 706rpx;
				background: #FFFEFE;
				border-radius: 20rpx;
				margin-left: 22rpx;
				box-sizing: border-box;
				padding: 32rpx;
				margin-top: 20rpx;
				.order-header{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 30rpx;
					.order-header-title{
						font-weight: 500;
						font-size: 30rpx;
						color: #333333;
					}
					.order-header-right{
						display: flex;
						align-items: center;
						font-size: 22rpx;
						color: #888888;
						.order-arr{
							margin-left: 10rpx;
							width: 13rpx;
							height: 24rpx;
						}
					}
				}
				.list{
					display: grid;
					gap: 48rpx;
					grid-template-rows: 1fr;
					grid-template-columns: repeat(3, 1fr);
					.list-item{
						display: flex;
						align-items: center;
						flex-direction: column;
						.list-txt{
							font-size: 22rpx;
							color: #888888;
							margin-top: 10rpx;
						}
					}
				}
			}
		}
		
		
		
		.user-info{
			padding: 52rpx 0rpx 40rpx 0rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.info{
				display: flex;
				align-items: center;
				margin-left: 20rpx;
				.info-photo{
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
				.info-detail{
					display: flex;
					// align-items: center;
					justify-content: space-between;
					flex-direction: column;
					margin-left: 20rpx;
					.detail-name{
						font-size: 36rpx;
						color: #000000;
					}
					.detail-account{
						font-size: 24rpx;
						color: rgba(0,0,0,0.7);;
						display: flex;
						align-items: center;
						.detail-edit{
							margin-left: 12rpx;
							width: 20rpx;
							height: 20rpx;
						}
					}
				}
			}
			.setting{
				width: 44rpx;
				height: 40rpx;
			}
		}
		.member{
			margin-top: 40rpx;
			width: 100%;
			height: 140rpx;
			background-image: url(https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/huiyuan.png);
			background-size: 100%;
			padding: 32rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.member-label{
				.member-title{
					font-size: 32rpx;
					color: #F1C68E;
				}
				.member-sub{
					margin-top: 20rpx;
					color: rgba(255,255,255,0.8);
					font-size: 24rpx;
				}
			}
			.member-btn{
				width: 140rpx;
				height: 56rpx;
				background: #F1C68E;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: rgba(0,0,0,0.8);
			}
		}
		// .goods{
		// 	display: flex;
		// 	align-items: center;
		// 	justify-content: space-between;
		// 	padding: 42rpx 0 48rpx 0;
		// 	.goods-item{
		// 		width: 33%;
		// 		display: flex;
		// 		align-items: center;
		// 		justify-content: center;
		// 		flex-direction: column;
		// 		.item-num{
		// 			font-size: 32rpx;
		// 			color: rgba(0,0,0,0.8);
		// 		}
		// 		.item-label{
		// 			color: rgba(0,0,0,0.8);
		// 			font-size: 24rpx;
		// 			margin-top: 12rpx;
		// 		}
		// 	}
		// }
		.opc{
			padding: 48rpx 50rpx 48rpx 52rpx;
			display: grid;
			gap: 48rpx;
			grid-template-rows: 1fr;
			grid-template-columns: repeat(4, 1fr);
			background: #FFFFFF;
			box-shadow: 0px 0px 12rpx 0px rgba(218,218,218,0.5);
			border-radius: 20rpx;
			.opc-item{
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				.opc-txt{
					margin-top: 12rpx;
					color: rgba(0,0,0,0.8);
					font-size: 24rpx;
				}
			}
		}
		.opc-view{
			background: #FFFFFF;
			box-shadow: 0px 0px 12rpx 0px rgba(218,218,218,0.5);
			border-radius: 20rpx;
			.opc-header{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 40rpx 0 40rpx;
				.header-title{
					
					font-size: 24rpx;
					color: #000;
					font-weight: 500;
				}
				.header-right{
					font-size: 24rpx;
					color: #A1A1A1;
					display: flex;
					align-items: center;
					.right-jt{
						width: 12rpx;
						height: 20rpx;
						margin-left: 16rpx;
					}
				}
			}
			.order-opc{
				padding: 30rpx 10rpx 48rpx 10rpx;
				display: grid;
				gap: 48rpx;
				grid-template-rows: 1fr;
				grid-template-columns: repeat(3, 1fr);
				.opc-item{
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					.opc-txt{
						margin-top: 12rpx;
						color: rgba(0,0,0,0.8);
						font-size: 24rpx;
					}
				}
			}
		}
		
	}
</style>