<template>
	<view class="user-center" v-if="flag">
		<view class="top-bg" />
		<!-- 页面内容 -->
		<view class="page">
		  <!-- 用户信息 -->
			<view v-if="userInfo?.id" class="user-info" @tap.stop="navToPage('profile')">
				<view class="info-content">
				  <view class="avatar">
					<image class="tn-image" :src="userInfo?.avatar" mode="aspectFill" />
				  </view>
				  <view class="content">
					<view class="nickname">{{ userInfo.nickname?userInfo.nickname:userInfo.username }}</view>
					<view class="uid">
					  <view class="text">uid: {{ userInfo?.id }}</view>
					  <view class="copy">
						<tn-icon name="copy" />
					  </view>
					</view>
				  </view>
				</view>
				<view class="setting-icon">
				  <tn-icon name="install" />
				</view>
			</view>
			<view v-else class="tn-flex">
				<!-- #ifdef MP -->
					<view class="login-btn tn-shadow tn-mr-xs" @tap.stop="loginHandle('MP')">
						  <view class="icon">
							<tn-icon name="wechat" />
						  </view>
						  <view class="text">授权登录</view>
					</view>
				<!-- #endif -->
					<view class="login-btn tn-shadow" @tap.stop="loginHandle('H5')">
						<view class="icon">
							<tn-icon name="login" />
						</view>
						<view class="text">账号登录</view>
					</view>
			</view>
		  <!-- 会员等级、权益 -->
			<view class="member-rights tn-shadow-blur">
				<view class="member-content">
				  <view class="grade tn-text-transparent">
					  <span v-if="userInfo && userInfo.isAdmin === 1">管理员</span>
					  <span v-else-if="userInfo">普通用户</span>
					  <span v-else>游客</span>
				  </view>
				  <view class="desc">
					  <span v-if="userInfo && userInfo.openid">已绑定微信</span>
					  <span v-else>未绑定微信</span>
				  </view>
				</view>
				<view class="rights-btn tn-shadow-blur tn-flex-center">
					<span v-if="userInfo && userInfo.right === 1">有权访问</span>
					<span v-else>限制访问</span>
				</view>
			
				<!-- 图片波浪 -->
				<view class="image-wave-container">
				  <view class="image-wave" />
				  <view class="image-wave" />
				  <view class="image-wave" />
				</view>
			</view>
			<view class="list tn-shadow">
			  <view v-if="userInfo?.id" class="list-item" @click="navToPage('profile')">
				<view class="left">
				  <view class="icon">
					<tn-icon name="my-fill" />
				  </view>
				  <view class="text"> 个人资料 </view>
				</view>
				<view class="right">
				  <view class="icon">
					<tn-icon name="right" />
				  </view>
				</view>
			  </view>
			  <view v-if="userInfo && userInfo.isAdmin === 1" class="list-item" @click="navToPage('member')">
				<view class="left">
				  <view class="icon">
					<tn-icon name="plane-fill" />
				  </view>
				  <view class="text"> 访客管理 </view>
				</view>
				<view class="right">
				  <view class="icon">
					<tn-icon name="right" />
				  </view>
				</view>
			  </view>
			</view>  	
		</view>
		<TnPopup v-model="showPopup">
			<view class="tn-p-lg" style="width: 520rpx;"> 
				<view class="title tn-text-bold tn-text-xl tn-text-center tn-border-bottom tn-type-success_border tn-pb">
					资料填写
				</view>
				<view class="form tn-mt-sm tn-mb-sm">
					<TnInput v-model="inputValue" underline placeholder="请输入姓名" clearable />
				</view>
				<view class="btn tn-flex tn-flex-center-center tn-mb-sm">
					<TnButton type="primary" shadow shadow-color="#27b93a" debounce bg-color="#27b93a" font-size="32rpx" text-color="#ffffff" width="320" size="lg" @click="saveName">确 定</TnButton>
				</view>
				<view class="intro tn-type-error_text tn-text-sm tn-text-center">
					{{popInfo}} 
				</view>
			</view>
		</TnPopup>
		<tab-bar :current="3"/>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import baseUrl from '@/config/config';
	import TnPopup from '@/uni_modules/tuniaoui-vue3/components/popup/src/popup.vue'
	import TnInput from '@/uni_modules/tuniaoui-vue3/components/input/src/input.vue'
	import storage from '@/utils/storage'
	import TabBar from '@/pages/components/tab-bar.vue';

	const flag = ref(false)
	
	const userInfo = ref();
	
	const showPopup = ref(false);
	
	const popInfo = ref('')
	
	const inputValue = ref('')
	
	const navToPage = (name:string) => {
		let url = ''
		if(name === 'profile'){
			url = '/pages/ucenter/profile';
		}
		if(name === 'member'){
			url = '/pages/ucenter/member';
		}
		uni.navigateTo({
			url:url
		})
	}
	
	const saveName = () => {
		if(!inputValue.value){
			uni.showToast({
				icon:'none',
				title:'表单不能为空！'
			})
			return;
		}
		uni.request({
			url:baseUrl + '/front/saveUser',
			method:'POST',
			data:{'name':inputValue.value},
			success: (res:any) => {
				if(res.data.code === 0){
					storage.set('isLogin',true)
					storage.set('storageUser',res.data.data.user)
					storage.set('token',res.data.data.access_token)
					getUserInfo()
					uni.redirectTo({
						url:'/pages/index/index'
					})
				}
			}
		})
	}
	
	const loginHandle = (platform:string) => {
		if(platform === 'H5'){
			uni.navigateTo({
				url:'/pages/login/login'
			})
			return
		}
		if(platform === 'MP'){
			uni.login({
				provider:'weixin',
				success: (loginRes) => {
					uni.getUserInfo({
						provider:'weixin',
						success: (infoRes) => {
							uni.request({
								url:baseUrl + '/front/wxlogin',
								data:{
									code:loginRes.code,
									iv:infoRes.iv,
									encryptedData:infoRes.encryptedData
									},
								method:'POST',	
								success: (res:any) => {
									if(res.data.code === 0){
										storage.set('isLogin',true)
										storage.set('storageUser',res.data.data.user)
										storage.set('token',res.data.data.access_token)
										getUserInfo()
										uni.redirectTo({
											url:'/pages/index/index'
										})
									}else if(res.data.code == -1){
										showPopup.value = true
										popInfo.value = res.data.message
									}else{
										uni.showToast({
											icon:'none',
											title:res.data.message
										})
									}
								}
							})
						}
					})
				}
			})
		}
	}
	
	const getUserInfo = () => {
		let storageUser = storage.get('storageUser');
		let isLogin = storage.get('isLogin');
		if(!isLogin || !storageUser){
			uni.showToast({
				icon:'none',
				title:'你还未登录！',
			})
		}else{
			userInfo.value = storageUser
		}
		flag.value = true
	}
	getUserInfo()
</script>

<style lang="scss" scoped>
	/* 顶部背景 start */
	.top-bg {
	  position: fixed;
	  top: 0rpx;
	  left: 0rpx;
	  width: 100%;
	  background: url('https://resource.tuniaokj.com/images/my/my-bg4.png')
	    no-repeat;
	  background-size: 100% auto;
	  &::before {
	    content: '';
	    display: block;
	    padding-top: 100%;
	  }
	}
	/* 顶部背景 end */
	.page {
	  position: relative;
	  width: 100%;
	  padding: 0rpx 30rpx;
	  padding-top: 200rpx;
	
	  /* 用户信息 start */
	  .user-info {
	    position: relative;
	    width: 100%;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	
	    .info-content {
	      display: flex;
	      align-items: center;
	
	      .avatar {
	        position: relative;
	        width: 110rpx;
	        height: 110rpx;
	        border-radius: 50%;
	
	        &::before {
	          content: '';
	          position: absolute;
	          left: 50%;
	          top: 50%;
	          width: 116%;
	          height: 116%;
	          background-color: rgba(255, 255, 255, 0.5);
	          border-radius: 50%;
	          transform: translate(-50%, -50%);
	          box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
	        }
	      }
	
	      .content {
	        margin-left: 28rpx;
	
	        .nickname {
	          font-size: 38rpx;
	          font-weight: bold;
	          margin-bottom: 12rpx;
	        }
	
	        .uid {
	          display: flex;
	          align-items: center;
	
	          .text {
	            font-size: 34rpx;
	            color: var(--tn-color-gray);
	          }
	
	          .copy {
	            color: var(--tn-color-grey);
	            margin-left: 10rpx;
	          }
	        }
	      }
	    }
	
	    .setting-icon {
	      color: var(--tn-color-gray);
	      font-size: 50rpx;
	    }
	  }
	  /* 用户信息 end */
	
	  /* 授权登录 start */
	  .login-btn {
	    background-color: #1d2541;
	    color: #fff;
	    padding: 20rpx 0rpx;
	    width: 40%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    border-radius: 1000rpx;
	    line-height: 1;
	
	    .icon {
	      margin-right: 20rpx;
	      font-size: 42rpx;
	    }
	  }
	  /* 授权登录 end */
	
	  /* 会员权益 start */
	  .member-rights {
	    position: relative;
	    width: 100%;
	    padding: 30rpx 40rpx;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    background: linear-gradient(-120deg, #3e445a, #31374a, #2b3042, #262b3c);
	    margin-top: 60rpx;
	    border-radius: 20rpx;
	
	    &::before {
	      z-index: -1;
	    }
	
	    .member-content {
	      position: relative;
	      z-index: 3;
	      .grade {
	        font-family: 'tuniao-xiaowei';
	        font-size: 42rpx;
	        font-weight: bold;
	        background-image: linear-gradient(360deg, #ffe3a3, #feeacc);
	      }
	      .desc {
	        font-size: 26rpx;
	        margin-top: 16rpx;
	        color: rgba(255, 255, 255, 0.7);
	      }
	    }
	
	    .rights-btn {
	      position: relative;
	      width: 160rpx;
	      border-radius: 1000rpx;
	      background-color: #f1c68e;
	      color: #634738;
	      padding: 14rpx 0;
	      z-index: 3;
	      font-weight: bold;
	
	      &::before {
	        z-index: 1;
	      }
	      text {
	        z-index: inherit;
	      }
	    }
	
	    /* 图片波浪 start */
	    .image-wave-container {
	      position: absolute;
	      left: 0;
	      top: 0;
	      width: 100%;
	      height: 100%;
	      overflow: hidden;
	      z-index: 1;
	      border-radius: inherit;
	
	      .image-wave {
	        position: absolute;
	        left: 0;
	        top: 0;
	        width: 200%;
	        height: 100%;
	        background: url('https://resource.tuniaokj.com/images/wave/wave-2.png');
	        background-repeat: repeat no-repeat;
	        background-position: 0 bottom;
	        animation-name: waveAnimation;
	        animation-timing-function: linear;
	        animation-iteration-count: infinite;
	
	        &:nth-child(1) {
	          opacity: 0.1;
	          background-size: 50% 45px;
	          animation-duration: 4s;
	        }
	        &:nth-child(2) {
	          opacity: 0.2;
	          background-size: 50% 50px;
	          animation-duration: 3.5s;
	        }
	        &:nth-child(3) {
	          opacity: 0.3;
	          background-size: 50% 35px;
	          animation-duration: 2s;
	        }
	      }
	    }
	    /* 图片波浪 end */
	  }
	  /* 会员权益 end */
	
		/* 列表 start */
		.list {
		  position: relative;
		  width: 100%;
		  margin-top: 40rpx;
		  background-color: #fff;
		  border-radius: 12rpx;
		  padding: 20rpx 30rpx;
		
		  .list-item {
		    width: 100%;
		    padding: 20rpx 0rpx;
		    display: flex;
		    align-items: center;
		
		    .left {
		      flex: 1;
		      display: flex;
		      align-items: center;
		      .icon {
		        font-size: 40rpx;
		        color: #7c8191;
		      }
		      .text {
		        margin-left: 12rpx;
		      }
		    }
		
		    .right {
		      flex-grow: 0;
		      flex-shrink: 0;
		      .icon {
		        font-size: 32rpx;
		        color: var(--tn-color-gray);
		      }
		      .text {
		        font-size: 26rpx;
		      }
		    }
		  }
		}
		/* 列表 end */
	}
	/* 页面内容 end */
	@keyframes waveAnimation {
	  0% {
	    transform: translateX(0);
	  }
	  50% {
	    transform: translateX(-25%);
	  }
	  100% {
	    transform: translateX(-50%);
	  }
	}
</style>