<template>
	<view class="mine-page">
		<view class="header">
			<view class="detail">
				<view class="avatar">
					<!-- @click="previewImage" -->
					<image :src="infoDetail.avatarResource ? infoDetail.avatarResource.url : '/static/zy/logo.png' " mode="aspectFit" class="avatar-icon"></image>
				</view>
				<view class="info">
					<view class="top">
						<view class="name" v-if="isLogin">{{infoDetail.nickname||''}}</view>
						<view class="go-login" v-if="!isLogin" @click="goLogin">未登录</view>
						<image src="@/static/my/sz.png" mode="aspectFit" class="set-icon" @click="set"></image>
					</view>
					<template v-if="isLogin">
						<view class="bottom">
							<view class="id-txt">
								<image src="@/static/my/id.png" mode="aspectFit" class="id-icon"></image>
								{{infoDetail.username |  mobileFilter(infoDetail.username)}}
							</view>
							<!-- <view style="width: 100rpx;height: 100rpx;pointer-events: none;">
								  <SpineCom skelUrl="/static/spine/guan_yu/guan_yu.skel" atlasUrl="/static/spine/guan_yu/guan_yu.atlas" />
							</view> -->
							<!-- <view class="id-txt">
								<image src="@/static/my/jf.png" mode="aspectFit" class="id-icon"></image>
								{{infoDetail.coins||0}}
							</view> -->
						</view>
					</template>
				</view>
			</view>
			<!-- <view class="top-up" @click="topUp" v-if="isLogin">充值</view> -->
		</view>
		<view class="contain">
			<view class="item" @click="ponitRecord">
				<view class="label">{{infoDetail.points||0}}</view>
				<view class="value">积分</view>
			</view>
			<view class="item" @click="coupon">
				<view class="label">{{total || 0}}</view>
				<view class="value">优惠券</view>
			</view>
			<view class="item" @click="promptCk">
				<view class="label">{{promptCount || 0}}</view>
				<view class="value">提示卡</view>
			</view>
			<view class="item" @click="warehouse">
				<view class="label">{{count||0}}</view>
				<view class="value">仓库</view>
			</view>
		</view>
		<view class="order">
			<view class="header">
				<view class="label">我的订单</view>
				<view class="value" @click="goOrder">
					全部订单
					<image src="@/static/my/back.png" class="back-icon" mode=""></image>
				</view>
			</view>
			<view class="status">
				<view v-for="(item,index) in orderList" :key="index" class="item" @click="goPath(item)" :class="{'border-left':index === 3}">
					<image :src="item.img" mode="aspectFit" :style="{width:item.width,height:item.height}"></image>
					<view class="label">{{item.label}}</view>
				</view>
			</view>
		</view>
		<view class="order server">
			<view class="header">
				<view class="label">我的服务</view>
				<view class="value"></view>
			</view>
			<view class="status">
				<view v-for="(item,index) in list" :key="index" class="item" @click="goPath(item)">
					<image :src="item.img" mode="aspectFit" :style="{width:item.width,height:item.height}"></image>
					<view class="label">{{item.label}}</view>
				</view>
			</view>
		</view>
		<!-- 是否有未开完的奖品 -->
		<NoOpenCom></NoOpenCom>
		<!-- 所有页面的弹框 -->
			<page-popup page="/pages/mine/mine" v-if="visible"></page-popup>
		<!-- <page-popup page="/pages/mine/mine"></page-popup> -->
		<!-- <customerCom v-if="customerVisible" @isClose="customerVisible = false"></customerCom> -->
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import { userInfo,boxCount,recordCountApi,customerApi } from '@/API/user.js'
	import { userCouponApi,couponCountApi } from '@/API/user.js'
	import NoOpenCom from '@/pages/index/components/noOpen.vue'
	import reportClickFn from '@/utils/report.js'
	import customerCom from '@/pages/components/customer.vue'
	import SpineCom from '@/pages/components/spine.vue'
	import { promptCountApi } from '@/API/index.js'
	export default{
	mixins: [myMixins],
		data(){
			return{
				list:[
					{label:"盲盒订单",img:"../../static/my/mhdd.png",width:"48rpx",height:"48rpx",page:'/pages/mine/boxOrder'},
					{label:"地址管理",img:"../../static/my/dzgl.png",width:"48rpx",height:"48rpx",page:'/pages/mine/address'},
					// {label:"我的收藏",img:"../../static/my/wdsc.png",width:"48rpx",height:"48rpx",page:"/pages/mine/collect"},
					{label:"联系客服",img:"../../static/my/lxkf.png",width:"48rpx",height:"48rpx",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/my/dfh.png",width:"48rpx",height:"48rpx",page:'/pages/order/index?type=WAITING_FOR_SHIPMENT'},
					{label:"待收货",img:"../../static/my/dsh.png",width:"48rpx",height:"48rpx",page:'/pages/order/index?type=WAITING_FOR_RECEIPT'},
					{label:"已完成",img:"../../static/my/ywc.png",width:"48rpx",height:"48rpx",page:'/pages/order/index?type=COMPLETED'},
					{label:"虚拟订单",img:"../../static/new/mine/virtual.png",width:"48rpx",height:"48rpx",page:'/pages/mine/virtual'},
				],
				infoDetail:{
					phone:"",
					avatarResource:{}
				},//用户信息
				boxCountData:{
					boxes: 0,
					items: 0
				},
				isLogin:false,
				count:0,
				total:0,
				customer:'',
				visible:false,
				customerVisible:false,
				promptCount:0
			}
		},
		filters:{
			// 隐藏手机号
			mobileFilter(val){
				let reg = /^(.{3}).*(.{4})$/
				return val ? val.replace(reg,'$1****$2') : ''
			},
		},
		components:{NoOpenCom,customerCom,SpineCom},
		onShow() {
			uni.$on('updateTabData', (data) => {
			  this.visible = false
			  setTimeout(() => {
				  this.visible = true
			  },500)
			});
			if(uni.getStorageSync('box-token')){
				this.getUserInfo()
				this.getRecordCount()
				this.getCustomer()
				this.getCoupon()
				this.getPromptCount()
				this.isLogin = true
			}else{
				this.isLogin = false
			}
			
			// if(this.$isLogin()){
			// 	// this.getCount()
			// 	this.getUserInfo()
			// }else{//未登录
				
			// }
		},
		onLoad(option) {
			this.visible = true
				console.log("aaaa:",option)
		},
		methods:{
			promptCk(){
				// return
				uni.navigateTo({
					url:`/pages/mine/prompt`
				})
			},
			getPromptCount(){
				promptCountApi().then(res => {
					if(res.code === 200){
						this.promptCount = res.data
					}else{
						this.$api.msg(res.message)
					}
				})
			},
			
			getCoupon() {
				uni.showLoading()
				couponCountApi().then(res => {
					uni.hideLoading()
					this.total = res.data
				}).catch(err => {
					uni.hideLoading()
				})
			},
			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)
						}
				})
			},
			topUp(){
				if(uni.getStorageSync('box-token')){
					uni.navigateTo({
						url:`/pages/mine/topUp`
					})
				}else{
					uni.navigateTo({
						url:`/pages/login/login`
					})
				}
				
			},
			coupon(){
				if(uni.getStorageSync('box-token')){
					uni.navigateTo({
						url:`/pages/mine/coupon`
					})
				}else{
					uni.navigateTo({
						url:`/pages/login/login`
					})
				}
				
			},
			ponitRecord(){
				if(uni.getStorageSync('box-token')){
					uni.navigateTo({
						url:`/pages/mine/point`
					})
				}else{
					uni.navigateTo({
						url:`/pages/login/login`
					})
				}
				
			},
			getRecordCount(){
				recordCountApi().then(res => {
					if(res.code === 200){
						this.count = res.data
					}else{
						this.$api.msg(res.message)
					}
				})
			},
			goOrder(){
				if(uni.getStorageSync('box-token')){
					uni.navigateTo({
						url:`/pages/order/index?type=''`
					})
				}else{
					uni.navigateTo({
						url:`/pages/login/login`
					})
				}
				
			},
			goLogin(){
				uni.navigateTo({
					url:`/pages/login/login?type='back'`
				})
			},
			warehouse(){
				if(uni.getStorageSync('box-token')){
				// if(this.$isLogin()){
					// uni.$emit('updateTabData', {newData:'newData'});
					uni.switchTab({
						url:`/pages/mine/boxRecrd`
					})
				}else{
					uni.navigateTo({
						url:`/pages/login/login`
					})
				}
				// }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(uni.getStorageSync('box-token')){
					if(item.page === 'customer'){
						// window.open(this.customer)
						// this.customerVisible = true
						uni.navigateTo({
							url:`/pages/mine/customer`
						})
						// window.location.href = this.customer
					}else{
						uni.navigateTo({
							url:`${item.page}`
						})
					}
				}else{
					uni.navigateTo({
						url:`/pages/login/login`
					})
				}
				
				// if(this.$isLogin()){
					// uni.navigateTo({
					// 	url:`${item.page}`
					// })
				// }else{
				// 	this.$refs.loginPopup.show()
				// }
			},
		},
		onTabItemTap(){
			console.log("我点击了我的的bar")
			// 个人中心tabbar点击次数
			reportClickFn('mine_tabbar');
			this.getRecordCount()
		},
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
	}
	.mine-page{
			background-image: url('@/static/my/bg.png');
			background-repeat: no-repeat;
			background-size: 100%;
		.header{
			padding: 48rpx 0 0 48rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.detail{
				display: flex;
				align-items: center;
				.avatar{
					width: 120rpx;
					height: 120rpx;
					border: 2px solid #39AFFF;
					// border-image: linear-gradient(180deg, rgba(57, 175, 255, 1), rgba(51, 90, 255, 1)) 2 2;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					overflow: hidden;
					.avatar-icon{
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}
				}
				.info{
					margin-left: 24rpx;
					.top{
						display: flex;
						align-items: center;
						.name{
							font-weight: bold;
							font-size: 40rpx;
							color: #000000;
						}
						.go-login{
							font-weight: bold;
							font-size: 30rpx;
							color: #000000;
							width: 100rpx;
						}
						.set-icon{
							margin-left: 16rpx;
							width: 40rpx;
							height: 40rpx;
						}
					}
					.bottom{
						margin-top: 24rpx;
						border-radius: 22px 22px 22px 22px;
						display: flex;
						align-items: center;
						.id-txt{
							position: relative;
							padding-left: 44rpx;
							padding-right: 16rpx;
							font-size: 24rpx;
							color: #333333;
							height: 40rpx;
							line-height: 40rpx;
							background: #FFFFFF;
							margin-right: 24rpx;
							border-radius: 50rpx;
							.id-icon{
								position: absolute;
								width: 32rpx;
								height: 32rpx;
								top: 4rpx;
								left: 4rpx;
							}
						}
					}
				}
			}
			.top-up{
				background-image: url('@/static/my/cz.png');
				background-size: 100%;
				background-repeat: no-repeat;
				width: 192rpx;
				height: 128rpx;
				display: flex;
				
				align-items: center;
				// padding-top: 46rpx;
				justify-content: center;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				// border: 1px solid red;
			}
		}
		.contain{
			margin-top: 20rpx;
			padding: 0 32rpx;
			display: flex;
			align-items: center;
			.item{
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				width: 228rpx;
				height: 148rpx;
				.label{
					font-size: 40rpx;
					color: #000000;
				}
				.value{
					margin-top: 16rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
				}
			}
		}
		.order{
			margin-left: 32rpx;
			width: 686rpx;
			height: 224rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			background-image: url('@/static/my/dd.png');
			background-size: 100%;
			background-repeat: no-repeat;
			// border: 2rpx solid;
			// border-image: radial-gradient(circle, rgba(63, 148, 255, 1), rgba(125, 210, 255, 0.5), rgba(255, 255, 255, 0)) 2 2;
			.header{
				padding: 24rpx 32rpx 0 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.label{
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
				}
				.value{
					display: flex;
					align-items: center;
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
					.back-icon{
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
			.status{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 32rpx;
				margin-top: 16rpx;
				.item{
					width: 154rpx;
					height: 120rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					.label{
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
						margin-top: 8rpx;
					}
				}
				.border-left{
					border-left: 1px solid #999;
				}
			}
		}
		.server{
			margin-top: 24rpx;
			border: none;
			background-image: none;
		}
	}
</style>