<template>
	<view>
		<!-- <view class="status_bar"></view> -->
		
		<view class="account_info " :style="{background:`url(${userbg})`}">
			<image src="../../static/icon/nologin2.png" mode="" class="header_img" v-show="!user_info.isLogin"></image>
			<image :src="user_info.user_head" mode="" class="header_img" v-show="user_info.isLogin"></image>
			<!-- <image :src="user_info.user_head?user_info.user_head:user_info.headicons[5]" mode="" class="header_img" v-if="user_info.isLogin"></image> -->
			<view class="info_name" v-if="!user_info.isLogin">
				<navigator url="/pages/login/index" >
					LOGIN / SIGUP>
				</navigator>
			</view>
			<view class="info_name" v-else>
				<navigator url="/pages/account/myProfile" >
					hi,{{user_info.nickname!=''?user_info.nickname:user_info.email}}>
				</navigator>
			</view>
			
			<view class="info_like">
				<navigator :url="noLogin==0?'/pages/account/myCoupons':'../login/index'" class="info_like_item">
					<text class="info_like_item_img">{{ hb_num }}</text>
					<text class="info_like_item_span">Coupons</text>
				</navigator>
				<navigator :url="noLogin==0?'/pages/account/pointsDetails':'../login/index'" class="info_like_item">
					<text class="info_like_item_img">{{ count }}</text>
					<text class="info_like_item_span">Points</text>
				</navigator>
				<navigator :url="noLogin==0?'/pages/account/wishlist':'../login/index'" class="info_like_item">
					<image src="../../static/img/like_white.png" mode="" class="info_like_item_img"></image>
					<text class="info_like_item_span">Wishlist</text>
				</navigator>
				<navigator :url="noLogin==0?'/pages/account/favorites':'../login/index'" class="info_like_item">
					<image src="../../static/img/favorites_white.png" mode="" class="info_like_item_img"></image>
					<text class="info_like_item_span">Favorites</text>
				</navigator>
			</view>
		</view>
		
		<view class="order">
			<navigator url="/pages/account/myOrders?scroll_active=0" class="order_title">My Orders<view class="icon_right"><image mode="" src="../../static/img/right.png"></image></view></navigator>
			<view class="order_info">
				<navigator :url="noLogin==0?'/pages/account/myOrders?scroll_active=1':'../login/index'" class="order_info_item">
					<image src="../../static/img/unpaid.png" mode="" class="info_img"></image>
					<text>Unpaid</text>
				</navigator>
				<navigator :url="noLogin==0?'/pages/account/myOrders?scroll_active=2':'../login/index'" class="order_info_item">
					<image src="../../static/img/Processing.png" mode="" class="info_img"></image>
					<text>Processing</text>
				</navigator>
				<navigator :url="noLogin==0?'/pages/account/myOrders?scroll_active=3':'../login/index'" class="order_info_item">
					<image src="../../static/img/Shipped.png" class="info_img" mode=""></image>
					<text>Shipped</text>
				</navigator>
				<navigator :url="noLogin==0?'/pages/account/myOrders?scroll_active=4':'../login/index'" class="order_info_item">
					<image src="../../static/img/Returns.png" class="info_img" mode=""></image>
					<text>Completed</text>
				</navigator>
			</view>
		</view>
		
		<view class="order">
			<view class="order_title">My Service</view>
			<view class="order_info" >
				<navigator v-for="(item,index) in indexDate.blocks" :key="item.block_title" @click="gotopage(item.block_title,item.block_link)" class="order_info_item">
					<image :src="item.block_pic" class="info_img" mode=""></image>
					<text>{{ item.block_title }}</text>
				</navigator>
				<!-- <navigator :url="noLogin==0?'/pages/account/myReview':'../login/index'" class="order_info_item">
					<image src="../../static/img/My Review.png" class="info_img" mode=""></image>
					<text>My Review</text>
				</navigator>
				<navigator :url="noLogin==0?'/pages/account/address':'../login/index'" class="order_info_item">
					<image src="../../static/img/My Address.png" class="info_img" mode=""></image>
					<text>My Address</text>
				</navigator>
				<view class="order_info_item">
					<image src="../../static/img/Return Policy.png" class="info_img" mode=""></image>
					<text>Return Policy</text>
				</view>
				<view class="order_info_item">
					<image src="../../static/img/Help Center.png" class="info_img" mode=""></image>
					<text>Help Center</text>
				</view>
				<view class="order_info_item">
					<image src="../../static/img/Attention CHIC.png" class="info_img" mode=""></image>
					<text>Attention CHIC</text>
				</view>
				<view class="order_info_item">
					<image src="../../static/img/About CHIC.png" class="info_img" mode=""></image>
					<text>About CHIC</text>
				</view>
				
				<navigator url="/pages/account/settings" class="order_info_item">
					
						<image src="../../static/img/Setting.png" class="info_img" mode=""></image>
						<text>Setting</text>
					
				</navigator> -->
			</view>
			
			<scroll-view scroll-x="true"><image :src="item.block_pic" v-for="(item,index) in Imglist" :key="item.block_pic"class="mine_banner" mode="" @click="imgto(item)"></image></scroll-view>
			<template v-if="catList.length!=0">
				<view class="order_title">Recommend</view>
				<scroll-view class="spike1" scroll-x="true" :show-scrollbar="false">
					<view class="spike1_item" v-for="(item,index) in catList"  :key="index" @click="goDetails(item.id)">
						<view class="spike1_item_img">
							<image :src="item.thumb" mode=""></image>
						</view>
						<view class="spike1_item_bottom1">
							<!-- <view class="spike1_item_text">{{item.name}}</view> -->
							<text class="spike1_item_text1">US${{item.is_promote==0? item.shop_price :item.promote_price}}</text>
						</view>
					</view>
				</scroll-view>
			</template>
			
			
		</view>
	</view>
</template>

<script>
	import {defaultRequest,defaultRequest2,defaultRequest4} from '../../api/index.js'
	export default {
		data() {
			return {
				user_info:{
					isLogin:false,
				},
				// 获取该分类的其他商品的请求参数
				catQuery:{
					_action:'getgoods',
					page_index:1,
					page_size:30,
					type:'hot'
				},
				catList:[],
				hb_num:0,
				noLogin:-1,
				isLogin:-1,
				Imglist:[],
				count:0,
				backButtonPress:0,
				indexDate:[],
				userbg:''
			}
		},
		onBackPress(options) {
							this.backButtonPress++;
							if (this.backButtonPress > 1) { 
								plus.runtime.quit();
							} else {
								plus.nativeUI.toast('Click again to exit');
							} 
							setTimeout(function() {
								this.backButtonPress = 0;
							}, 1000);
							return true;
					},
		methods:{
			goDetails(id){
				uni.navigateTo({
					url:'/pages/productDetails/index?goodid='+id
				})
			},
			gotopage(title,url){
				
				const a = url.indexOf('?')
				console.log(a)
				const s = url.substring(17);
				console.log(title)
				console.log(url)
			   if(this.isLogin == 1 &&url==''){
				   if(title.includes('Setting')){
				         uni.navigateTo({
				         	url:'./settings'
				         })
				   }
						if(title.includes('Review')){
						      uni.navigateTo({
						      	url:'./myReview'
						      })
						}
			   }
			   else if(this.isLogin == 1 &&url.includes('dope.addressmanage')){
				   uni.navigateTo({
				   	url:'./address'
				   })
			   }
			   else if(this.isLogin == 1 &&url.includes('meiqu.meiqu')){
			   				   uni.navigateTo({
			   				   	url:'./message'
			   				   })
			   }
			   else if(url.includes('html')){
			   				   // plus.runtime.openURL(url)
							   uni.navigateTo({
							   	url:'../order/paypalWebview?src='+url
							   })
			   }
			  else if(url.includes('dope.adspecial')){
			  				   uni.navigateTo({
			  				   	url:'../specialTitle/index'+s
			  				   })
			  }
			  else{
				  uni.navigateTo({
				  	url:'../login/index'
				  })
			  }
		
			},
			getList(){
				this.isLogin = uni.getStorageSync('isLogin')
				let data={_action:'getuserbonus'}
				defaultRequest(data).then(res=>{
					console.info(res,)
				
					if(res.error==0&&this.isLogin == 1){
						this.hb_num=res.data.length
					}
				})
				defaultRequest({
					_action:'getusersummarydata'
				}).then(res =>{
					
					if(res.error ==0){
						this.count = res.data.user_info.rank_points
					}
				})
			},
			getImg(){
				let data ={
					_action:'getpagedata',
					pagecode:'006-PERSONALCENTERPAGE'
				}
				let imglist
				defaultRequest(data).then( res =>{
					if(res.error ==0){
						console.log(res,'\\')
						res.data.zones.map(item =>{
							if(item.zone_code== 'CBANNER'){
								imglist = item
								this.Imglist = imglist.blocks
							}
							if(item.zone_code =='USERBG'){
								this.userbg = item.blocks[0].block_pic 
							}
						})
						
					}
				})
			},
			// 获取的推荐商品数据
			getCatList(type){
				defaultRequest4(this.catQuery).then(res=>{
					console.info(res)
					if(res.error==0){
						if(res.data){
							this.catList=res.data
						}
					}
				})
			},
			// 获取首页数据配置
			getIndex(){
				let data={_action:'getpagedata',pagecode:'006-PERSONALCENTERPAGE'}
				defaultRequest(data).then(res=>{
					 console.info(res.data.zones,'页面配置')
					if(res.error==0){
						res.data.zones.map( item =>{
							if(item.zone_code == 'service'){
								this.indexDate = item
							}
						})
						console.log(this.indexDate,'页面')
					}
				})
			},
			getUserInfo(){
				let data={_action:'getinfo'}
				defaultRequest(data).then(res=>{
					// console.info(res,'pppppp')
					if(res.error==0){
						 res.data.isLogin=true
						 // this.user_info=res.data
						this.noLogin = 0
						this.hb_num = 0
						 uni.setStorageSync('user_info',res.data)
						this.user_info=uni.getStorageSync('user_info')
						console.log(this.user_info)
					}else if(res.error ==-1){
						
						this.noLogin = 1
						
					}
				})
			},
			imgto(item){
				
				const i = item.block_link.indexOf('?')
				const url = item.block_link.substring(i)
				console.log(item.block_link)
				if(item.block_link.includes('dope.dope'))
				{
					uni.navigateTo({
						url:'../productDetails/index'+url
					})
				}
			}
		},
		 onLoad(e) {
			 this.isLogin = uni.getStorageSync('isLogin')
			if(this.isLogin==0){
			 this.user_info =' '
			}else{
			 this.getUserInfo()
			}
			this.getIndex()
			// this.getUserInfo()
			this.getCatList()
			this.getList()
			this.getImg()
			
				
			
		},
		onShow() {
			this.isLogin = uni.getStorageSync('isLogin')
			uni.startPullDownRefresh()
		},
		onPullDownRefresh() {
		this.isLogin = uni.getStorageSync('isLogin')
		console.log(this.isLogin)
		if(this.isLogin==0){
		 this.user_info =' '
		}else{
         this.getUserInfo()
		}
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		},
	}
</script>

<style lang="scss" scoped>
	.account_info{
		
		padding: 0 50rpx;
		padding-top: 66rpx;
		padding-bottom: 40rpx;
		border-bottom: 13.33rpx #F7F7F7 solid;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// background: url("@/static/icon/user_bg.png");
		background-size: 100%;
		
		.header_img{
			width: 144rpx;
			height: 144rpx;
			border-radius: 50%;
			margin-bottom: 36.67rpx;
			background-color: #F7F7F7;
		}
		.info_name{
			font-size: 36rpx;
			font-weight: bold;
			color: #F7F7F7;
			margin-bottom: 74.67rpx;
		}
		.info_like{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			color: #F7F7F7;
			.info_like_item{
				font-size: 40rpx;
				font-weight: 400;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				
				.info_like_item_img{
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 14.67rpx;
					display: block;
				}
				.info_like_item_span{
					font-size: 21.33rpx;
					
				}
			}
		}
	}
	.order{
		padding: 0 23.33rpx;
		padding-top: 37.33rpx;
		padding-bottom: 43.33rpx;
		border-bottom: 13.33rpx #F7F7F7 solid;
		
		.order_title{
			font-size: 26.67rpx;
			 font-weight: bold;
			display: flex;
			justify-content: space-between;
			.icon_right{
				height: 25rpx;
				width: 25rpx;
				
				image{
					height: 100%;
					width: 100%;
				}
			}
		}
		.order_info{
			width: 100%;
			// padding: 0 35.33rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			flex-wrap: wrap;
			
			.order_info_item{
				width: 25%;
				font-size: 21.33rpx;
				font-weight: 400;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-top: 38.67rpx;
				
			}
			.info_img{
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 20rpx;
			}
		}
		.mine_banner{
			width: 100%;
			height: 226.67rpx;
			margin: 56rpx 0;
		}
		.spike1{
			white-space: nowrap;
			width: 100%;
			margin-top: 46.67rpx;
			::-webkit-scrollbar {
				width: 0;
				height: 0;
				background-color: transparent;
			} 
			
			.spike1_item{
				color: #191919;
				font-size: 24.67rpx;
				margin-right: 16.67rpx;
				width: 286.67rpx;
				display: inline-block;
				font-weight: 400;
				
				.spike1_item_img{
					width: 286.67rpx;
					height: 286.67rpx;
					background-color: #999999;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.spike1_item_bottom{
					padding-left: 9.33rpx;
					margin-top: 22.67rpx;
					
					.spike1_item_text{
						width: 100%;
						color: #9D9D9D;
						font-size: 21.33rpx;
						text-decoration: line-through;
					}
					.spike1_item_text1{
						// color: #9D9D9D;
						text-align: center;
						font-size: 27.33rpx !important;
						font-weight: bold !important;
					}
				}
				.spike1_item_bottom1{
					padding-left: 80.77rpx;
					margin-top: 19.33rpx;
					font-weight: bold;
					
					.spike1_item_text{
						color: #000000;
						font-size: 16rpx;
						font-weight: 400;
						margin-bottom: 20.67rpx;
						white-space: break-spaces;
						overflow:hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow:ellipsis;
						
					}
				}
				
			}
			.spike1_item:last-child{
				margin-right: 0;
			}
		}
	}
</style>