<template>
	<view class="wrap">
		<!-- 弹窗 -->
		<uni-popup ref="popup" type="center">
			<!-- 给一个左边弹窗的样式 -->
			<!-- 关闭弹窗按钮 -->
			<view class="closeBtn" @click="this.$refs.popup.close()">x</view>
			<view class="popUpWrap" v-if="whichTap==0">
				<text>这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入驻。</text>

				<!-- 左 -->
				<!-- <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> -->
				<!-- 右 -->
				<!-- <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> -->
			</view>
			<view class="popUpWrap" v-if="whichTap==1">
				<text>本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号。</text>
			</view>
			<view class="popUpWrap" v-if="whichTap==2">
				<button @click="chatOur(1)">客服1</button>
				<button @click="chatOur(2)">客服2</button>
			</view>
		</uni-popup>
		<view v-if="isAuth" class="content">
			<view class="userInfo">
				<view class="info">
					<image :src="headerphoto" mode="aspectFill"></image>
					<view class="infoText">
						<text class="userName">{{nickName}}</text>
					</view>
				</view>
			<!-- 	<view class="service">
					<image src="../../static/serviceLogo.png" mode="aspectFill"></image>
				</view> -->
			</view>
			<view class="myOpticsData" @click="toOpticsData">
				<view class="left">
					<image src="../../static/img/user/dataWrite.png" mode="aspectFit"></image>
					<text>验光数据</text>
				</view>
				<image src="../../static/right.png" mode="aspectFit"></image>
			</view>
			<view class="myOrder">
				<view class="orderHeader">
					<text>全部订单</text>
					<view class="btn" @click="toMyOrder('10')">
						全部
						<image src="../../static/right.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="orderBody">
					<view class="item waitPay" @click="toMyOrder('0')">
						<image src="../../static/img/user/waitDeliver.png" mode="aspectFit"></image>
						<text>待付款</text>
					</view>
					<view class="item waitDeliver" @click="toMyOrder('1')" >
						<image src="../../static/img/user/waitPay.png" mode="aspectFit"></image>
						<text>待收货</text>
					</view>
					<view class="item waitReceive" @click="toMyOrder('2')">
						<image src="../../static/img/user/waitReceive.png" mode="aspectFit"></image>
						<text>已完成</text>
					</view>
					<!-- <view class="item service" @click="toMyOrder('3')">
						<image src="../../static/img/user/refound.png" mode="aspectFit"></image>
						<text>已评价</text>
					</view> -->
				</view>
			</view>
			<view class="someItem">
				<!-- <view class="item">
					<view class="left">
						<image src="../../static/img/user/shouyi.png" mode="aspectFit"></image>
						<text>推广记录与收益</text>
					</view>
					<image src="../../static/right.png" mode="aspectFit"></image>
				</view> -->
				<view class="item" @click="changeTap(0)">
					<view class="left">
						<image src="../../static/img/user/introduce.png" mode="aspectFit"></image>
						<text>系统介绍</text>
					</view>
					<image src="../../static/right.png" mode="aspectFit"></image>
				</view>
				<view class="item" @click="changeTap(1)">
					<view class="left">
						<image src="../../static/img/user/joinUs.png" mode="aspectFit"></image>
						<text>加入我们</text>
					</view>
					<image src="../../static/right.png" mode="aspectFit"></image>
				</view>
				<view class="item" @click="changeTap(2)">
					<view class="left">
						<image src="../../static/img/user/service.png" mode="aspectFit"></image>
						<text>联系客服</text>
					</view>
					<image src="../../static/right.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="recommend">
				<view class="title">
					<view class="line"></view>
					<view class="text">精选推荐</view>
					<view class="line"></view>
				</view>
				<!-- 商品列表 -->
				<view class="goods-list">
					<scroll-view enable-flex @scrolltolower="handleScrolltolower" scroll-y class="product-list">
						<block v-for="(goods) in userRecommandList " :key="goods.list.sk_id">
							<view class="product" v-for="(item) in goods.list" :key="item.sk_id">
								<Card :goods="item" ></Card>
							</view>
						</block>
					</scroll-view>
					<view class="loading-text">{{loadingText}}</view>
				</view>
			</view>
		</view>
		<view v-else class="auth">
			<view class="icon"></view>
			<view class="divider"></view>
			<view class="title">申请获取以下权限</view>
			<view class="text">获得您的公开信息(昵称、头像等)</view>
			<button 
			 type="primary"
			 open-type="getUserInfo"
			 @getuserinfo="onGotUserInfo"
			>授权登陆</button>
		</view>
	</view>
</template>

<script>
	import Card from "@/components/CommodityCard/CommodityCard.vue";
	import store from '@/store';
	import UniPopup from '@/components/UniPopup/uni-popup.vue'

	export default {
		components: {
			'Card':Card,
			UniPopup
			},
		data() {
			return {
				isAuth: true, // 是否显示授权页面,
				pagesnum:1, // 分页请求初始值
				whichTap:0, // 弹窗渲染选择条件
			}
		},
		onLoad() {
			// 判断是否授权
			uni.getSetting({
				success(res) {
					console.log('authSetting',res.authSetting)
					if(res.authSetting['scope.userInfo'] === true) {
						this.isAuth = true
					} else {
						this.isAuth = false
					}
				}
			})
			
		},
		computed: {
			nickName() {
				console.log('nickName', this.$store.state.user.userInfo)
				return this.$store.state.user.userInfo.nickName;
			},
			headerphoto() {
				return this.$store.state.user.userInfo.headerphoto;
			},
			userRecommandList() {
				console.log('recommandList', this.$store.state.userRecommand.recommandList);
				return this.$store.state.userRecommand.recommandList;
			}
		},
		onLoad:function(){
			console.log('usr-my',this.$store.state.user.userInfo)
			
			store.dispatch('userRecommand/getRecommandList', {
				// uid:468,
				uid: this.$store.state.user.userInfo.uid,
				// openid:"oc8cg0d-0mFIInO4LyrCFtInPWr4",
				openid:this.$store.state.user.userInfo.openid,
				page: this.pagesnum
			});
		},

		methods: {
			// 弹窗
			changeTap(item){
				this.whichTap = item
				this.$refs.popup.open()
			},
			chatOur(item){
				if(item==1){
					uni.makePhoneCall({
						phoneNumber:13376189297, // 客服1 电话
					})
				} else{
					uni.makePhoneCall({
						phoneNumber:18014995101 // 客服2 电话
					})
				}
			},
			// 授权
			onGotUserInfo(e) {
				console.log('anthInfo', e);
				if(e.detail.errMsg == 'getUserInfo:ok') {
					const { fromInfo } = this.$store.state.user;
					console.log('=====la', fromInfo)
					// 用户授权成功
					store.dispatch('user/getUserInfo', fromInfo);
					this.isAuth = true
				}
			},
			toMyOrder(status){
				uni.navigateTo({
					url: `../myOrder/myOrder?status=`+status,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toOpticsData(){
				uni.navigateTo({
					url: `../addOpticsData/addOpticsData`,
				});
			},
			handleScrolltolower(){
				// console.log('usr-my',this.$store.state.user.userInfo)
				this.pagesnum++;
				store.dispatch('userRecommand/getRecommandList', {
					uid: this.$store.state.user.userInfo.uid,
					openid:this.$store.state.user.userInfo.openid,
					page: this.pagesnum
				});
			}
		}
	}
</script>

<style lang="scss">
	.warp{
		font-size: 24rpx;
		background-color: #f2f2f2;
		height: 100vh;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #F2F2F2;
	}
	.userInfo{
		background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%);
		width: 100%;
		height: 240rpx;
		color: #FFFFFF;
		padding: 60rpx 82rpx 80rpx 44rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		.info{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			image{
				border-radius: 50rpx;
				height: 100rpx ;
				width: 100rpx;
				margin-right: 40rpx;
			}
			.infoText{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-scetart;
				.userName{
					font-size: 18px;
					color: #FFFFFF;
					margin-bottom: 8rpx;
				}
				.nickName{
					font-size: 12px;
					color: #FFFFFF;
				}
			}
		}
		// .service{
		// 	margin-top: 20rpx;
		// 	image{
		// 		height: 36rpx;
		// 		width: 36rpx;
		// 	}
		// }
	}
	.myOpticsData{
		width: 670rpx;
		height: 120rpx;
		background-color: #FFFFFF;
		border-radius: 6px;
		box-shadow: 1px 1px 7px 0 rgba(133,107,107,0.10);
		position: relative;
		bottom: 44rpx;
		padding: 40rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left{
			font-size: 14px;
			color: #333333;
			display: flex;
			align-items: center;
			image{
				margin-right: 32rpx;
				width: 30rpx;
				height: 34rpx;
			}
		}
		image{
			height: 16px;
			width: 8px;
		}
	}
	.myOrder{
		width: 100%;
		height: 296rpx;
		// margin-top: 116rpx;
		margin-bottom: 20rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
		border-radius: 6px;
		border-radius: 6px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		.orderHeader{
			width: 100%;
			height: 100rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #E9E9E9;;
			font-weight: bold;
			font-size: 18px;
			color: #333333;
			.btn{
				font-size: 12px;
				color: #999999;
				display: flex;
				align-items: center;
				image{
					margin-left: 20rpx;
					height: 32rpx;
					width: 16rpx;
				}
			}
		}
		.orderBody{
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			.item{
				display: flex;
				flex-direction: column;
				align-items: center;
				image{
					width: 62rpx;
					height: 46rpx;
				}
				text{
					margin-top: 24rpx;
					font-size: 12px;
					color: #333333;
				}
			}
		}
	}
	.someItem{
		width: 100%;
		height: 336rpx;
		background: #FFFFFF;
		box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
		border-radius: 6px;
		border-radius: 6px;
		margin-bottom: 18rpx;
		box-sizing: border-box;
		padding: 21rpx 48rpx 21rpx 42rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		.item{
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #F2F2F2;;
			align-items: center;
			height: 72rpx;
			width: 100%;
			.left{
				font-size: 14px;
				color: #333333;
				display: flex;
				align-items: center;
				image{
					margin-right: 32rpx;
					width: 30rpx;
					height: 34rpx;
				}
			}
			image{
				height: 16px;
				width: 8px;
			}
		}
		
	}
	.recommend{
		background: #FFFFFF;
		box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
		border-radius: 6px;
		border-radius: 6px;
		width: 100%;
		.title{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 40rpx;
			.line{
				width: 264rpx;
				height: 1rpx;
				border-bottom: 1px solid #EAEAEA;
			}
			.text{
				font-family: PingFangSC-Medium;
				font-size: 14px;
				color: #333333;
				letter-spacing: -0.26px;
				text-align: justify;
				line-height: 24px;
			}
		}
		.goods-list{
			.loading-text{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 30px;
				color: #979797;
				font-size: 12px;
			}
			.product-list{
				width: 92%;
				padding: 0 4% 3vw 4%; 
				display: flex;
				height: 200px;
				justify-content: space-between;
				flex-wrap: wrap;
				.product{
					width: 48%;
					margin: 0 0 20rpx 0;
					background: #FFFFFF;
					border: 1px solid #F2F2F2;
				}
			}
		}
	}
	.auth {
		height: 100vh;
		display: flex;
  		flex-direction: column;
  		align-items: center;
		.icon {
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			margin-top: 100rpx;
			background-color: grey;
		}
		.divider {
			height: 1rpx;
			width: 600rpx;
			margin-top: 80rpx;
			background-color: #E6E3E3;
		}
		.title {
			width: 600rpx;
			margin-top: 50rpx;
			text-align: left;
		}
		.text {
			width: 600rpx;
			margin-top: 30rpx;
			text-align: left;
			color: #E6E3E3;
		}
		button {
			width: 450rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin-top: 80rpx;
			border-radius: 30rpx;
		}
	}
	
	.popUpWrap{
		height: 200rpx;
		width: 542rpx;
		background-color: #FFFFFF;
		border-radius: 4px;
		border: 1px solid #979797;
		display: flex;
		align-items: center;
		justify-items: center;
		box-sizing: border-box;
		padding: 0 20rpx;
		text{
			font-size: 12px;
			color: #333333;
		}
		button{
			width: 150rpx;
			height: 80rpx;
			border-radius: 4px;
			text-align: center;
			line-height: 80rpx;
			font-size: 14px;

		}
	}
	.closeBtn{
		height: 28rpx;
		width: 28rpx;
		// border: 1px solid red;
		position: absolute;
		top: 20rpx;
		right: 10rpx;
	}


</style>
