<template>
	<view class="login">
		<!-- header -->
		<cu-custom bgColor="bg-gradual-blue" isBack><view slot="content">个人中心</view></cu-custom>
		<!-- section -->
		<!-- 用户信息 -->
		<view @click="userfunc" class="user-info ">
		    <view class="ni flex align-center justify-center text-white">
				<view class="text-center">
				  <view style="width: 120rpx;height: 120rpx;overflow: hidden;margin: 0 auto;" class="round"><image style="width: 100%;height: 100%" :src="userinfo.face" mode="aspectFill"></view>
				  <view>{{userinfo.name}}</view>
				</view>
			</view>
			<image class="image" mode="widthFix" style="width: 100vw;" :src="bg" >
		</view>
		<view  class="cu-list menu card-menu    margin-bottom-xl shadow-lg radius">
			<view @click="navfunc('/pages/order/index')" class="cu-item arrow">
				<view class="content"><text>拼团订单</text></view>
			</view>
			<view class="cu-item flex justify-around">
				<view @click="navfunc('/pages/order/index?active=0')" class="item text-center padding-tb">
					<van-icon  size="100rpx" color="#f03" name="passed" />
					<view style="color:#f03" class="margin-top-sm">进行中</view>
				</view>
				<view @click="navfunc('/pages/order/index?active=1')" class="item text-center">
					<van-icon size="100rpx"  color="#f03" name="passed" />
					<view style="color:#f03"  class="margin-top-sm">拼团成功</view>
				</view>
				<view @click="navfunc('/pages/order/index?active=2')" class="item text-center">
					<van-icon  size="100rpx" color="#f03" name="close" />
					<view style="color:#f03"  class="margin-top-sm">拼团失败</view>
				</view>
			</view>
			<view @click="navfunc('/pages/card/index')" class="cu-item arrow">
				<view class=" content">
					<van-icon color="#f37b1d" size="30rpx" name="coupon" />
					<text class="margin-left-sm">我的卡券</text>
				</view>
			</view>
		    <view @click="show=true" class="cu-item arrow">
		    	<view class=" content">
		    		<van-icon color="#f37b1d" size="30rpx" name="setting" />
		    		<text class="margin-left-sm">设置</text>
		    	</view>
		    </view>
		</view>
	    <!-- 功能栏 -->
		<van-action-sheet
		  :show="show"
		  :actions="actions"
		  @close="show=false"
		  @select="onSelect"
		  @getphonenumber="onGetUserInfo"
		/>
	</view>
</template>

<script> 
import bg from "@/static/svg.png";

export default{
		data(){
			return {
				bg,
				show:false,//功能栏
				actions:[],
				userinfo:{
					face:"",
					name:""
				}
			}
		},
		onLoad() {
			this.changeUser();
		},
		methods:{
			// 报错
			showErr(content) {
				content = JSON.stringify(content) === '{}' ? '未知错误' : content;
				uni.showModal({
					content,
					showCancel: false,
					success: res => console.log(res)
				});
			},
			// 更新用户显示资料
			changeUser(){
			   this.userinfo={
				  face: this.$store.state.userInfo.face || "https://img.yzcdn.cn/vant/cat.jpeg",
				  name:this.$store.state.userInfo.name  || "昵称"
			   }
			   this.actions=[{name:"微信快捷登录",color:uni.getStorageSync('token') ? "#666666" : "#39b54a",disabled:uni.getStorageSync('token'),openType: 'getPhoneNumber'},
					{name:"更新资料",disabled:!uni.getStorageSync('token')}];
			},
			// 头像点击事件
			userfunc(){
			  if(!uni.getStorageSync("token")) this.show=true;
			},
			// 微信快捷登录
			async onGetUserInfo(e) {
			   try{
			   var { encryptedData, iv } = e.detail;
			   var {openid,appid,activity_id}=this.$store.state.userInfo;
			   var res=await this.$global.request({url:"/customer/wxbind/",method:"post",data:{openid,appid,activity_id,encryptedData, iv }});
			   if(res.data.token) uni.setStorageSync('token','JWT '+ res.data.token);
			    this.$store.commit('userInfo',res.data);
				this.changeUser();
				uni.showToast({
					icon:"none",
					title:"登录成功",
				})
			     }catch(err){
			     	this.showErr(err)
			     }finally{
			     	this.show=false;
			     }
			   
			},
			// 获取用户信息权限
			getUserInfoRoot(){
				return new Promise((resolve,reject)=>{
					uni.getUserProfile({
					      desc: '用于完善会员资料',
					      success: (res) => resolve(res),
						   fail:(err)=>reject(err)
				})
				})
			},
			// 更新资料
			async updateUserInfo(){
				// customer/setUserInfo/ 
			  try{
				var res=await this.getUserInfoRoot();
				var {iv, encryptedData}=res;
				res=await this.$global.request({url:"/customer/setUserInfo/",
				data:{iv, encryptedData,
				appid:this.$store.state.userInfo.appid,
				openid:this.$store.state.userInfo.openid,
				activity_id:this.$store.state.userInfo.activity_id
				},
				method:"post",
				header: {
					'Content-Type': 'application/x-www-form-urlencoded',
					Authorization: uni.getStorageSync('token')
				},
				})
				this.$store.commit('userInfo', res.data);
				this.changeUser();
				uni.showToast({
					icon:"none",title:"更新成功"
				})
			  }catch(err){
				this.showErr(err)  
			  }
			},
			// 选中
			onSelect(event){
				switch(event.detail.name){
					case "更新资料":
					this.updateUserInfo();
					break
				}
			},
			// 跳转
			navfunc(url){
				 if(!uni.getStorageSync("token")) {
					 this.show=true;
					 return false;
				 };
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.login { 
	.user{
		height: 180rpx;
	}
	.user-info {
		background-color: #CE1008;
		height:300rpx;
		position: relative;
		overflow: hidden;
		.ni{
			position: absolute;
			z-index: 2;
			width: 100%;
			height: 100%;
		}
		.image{
			position: absolute;
			bottom: -120rpx;
			left: 0;
			z-index: 1;
			background-color: #f1f1f1;
		}
	}
}
</style>
