<template>
	<el-layout>
		<el-navbar :placeholder="true" :fixed="true" :autoBack="true" :border="true" title="个人资料"></el-navbar>
		
		<view class="avatar-box">
			<view class="avatar">
				<uni-file-picker v-model="imageValue" file-mediatype="image" limit="1" :del-icon="false" disable-preview :imageStyles="{width: 80, height: 80, border: {radius: '50%'}}" @select="onSelectImage">
					<el-avatar v-if="isLogin && user != undefined" :src="user.avatar" size="60"></el-avatar>
				</uni-file-picker>
			</view>
			<view class="text">
				<text>点击头像修改</text>
			</view>
		</view>
		
		<view class="list-wrap">
			<view class="list-cell">
				<view class="list-box">
					<view class="left">帐号名称</view>
					<view class="center">{{ user.username || "" }}</view>
				</view>
			</view>
			<view class="list-cell" @click="updateNickName">
				<view class="list-box">
					<view class="left">用户名称</view>
					<view class="center">{{ user.nickname || "-" }}</view>
					<view class="right"><uni-icons type="right" size="17" color="#aaa"></uni-icons></view>
				</view>
			</view>
			<view class="list-cell">
				<view class="list-box">
					<view class="left">用户性别</view>
					<view class="center">
						<picker @change="bindGenderChange" :value="sexIndex" :range="gender">
							<view class="uni-input">{{ gender[sexIndex] }}</view>
						</picker>
					</view>
					<view class="right"><uni-icons type="right" size="17" color="#aaa"></uni-icons></view>
				</view>
			</view>
			<view class="list-cell">
				<view class="list-box">
					<view class="left">手机号码</view>
					<view class="center">{{ user.mobile || "-" }}</view>
					<view class="right" @click="navigateTo('pages/user/change')">
						<text class="rtext">变更手机</text>
					</view>
				</view>
			</view>
			<view class="list-cell">
				<view class="list-box">
					<view class="left">注册时间</view>
					<view class="center">{{ user.join_time || "-" }}</view>
				</view>
			</view>
		</view>
		
		<uni-popup ref="nickNameDialog" type="dialog">
			<uni-popup-dialog  mode="input" title="用户名称" value="" placeholder="请输入用户名称" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		
	</el-layout>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app";
	import { ref,watch } from "vue";
	import { storeToRefs } from 'pinia';
	import { useUserStore } from "@/store/user";
	import { isEmpty } from "@/el-ui/libs/check";
	import { navigateTo } from "@/el-ui/libs/navigate";
	
	const userStore 		 = useUserStore();
	const { isLogin,user }   = storeToRefs(userStore);
	const gender 			 = ref(['保密', '男', '女']);
	const sexIndex 			 = ref(0);
	const nickNameDialog     = ref();
	const imageValue         = ref();
	
	const onSelectImage = (e)=>{
		uni.$http.upload("user/avatar",e.tempFilePaths[0],{ name: "file" }).then(res=>{
			userStore.getUser();
		}).catch(error=>{
			uni.$layer.showToast(error);
		});
	}
	
	const updateNickName = ()=>{
		nickNameDialog.value.open();
	}
	
	const dialogInputConfirm = (value)=>{
		if(value.length <= 0){
			uni.$layer.showToast("请输入用户名称");
			return true;
		}
		
		uni.$http.post("user/field",{ nickname: value }).then(res=>{
			if(res.code) {
				uni.$layer.showToast("修改用户名称成功");
				userStore.getUser();
			}else{
				uni.$layer.showToast(res.msg);
			}
		});
	}
	
	watch(()=>user.value,(newValue,oldValue)=>{
		for(let i in gender.value){
			if(gender.value[i] == user.value.gender){
				sexIndex.value = i;
				break;
			}
		}
	})
	
	const bindGenderChange = (ev)=>{
		sexIndex.value = ev.detail.value;
		uni.$http.post("user/field",{ sex: ev.detail.value }).then(res=>{
			if(res.code) {
				uni.$layer.showToast("修改资料成功");
				userStore.getUser();
			}
		});
	}
	
</script>

<style lang="scss" scoped>
	.avatar-box {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		border-bottom: 1px solid #f8f8f8;
		padding: 30rpx 0;
		.avatar {}
		.text {
			padding-top: 10rpx;
			text {
				color: #666;
				font-size: 24rpx;
			}
		}
	}
	
	.list-wrap {
		padding: 0;
		position: relative;
		z-index: 1;
		margin: 0px 0px;
		background-color: #fff;
		.list-cell {
			position: relative;
			width: 100%;
			box-sizing: border-box;
			background-color: #FFFFFF;
			color: #080808;
			font-size: 14px;
			padding: 13px 15px;
			border-radius: 6px;
			overflow: hidden;
			border-bottom: 1px solid #f8f8f8;
			&:last-child{
				border-bottom: 0;
			}
			.list-box {
				display: flex;
				align-items: center;
				.left {
					display: flex;
					align-items: center;
					justify-content: left;
					width: 80px;
					height: 20px;
					border-radius: 50%;
					position: relative;
					z-index: 1;
					font-size: 28rpx;
					color: #555;
				}
				.center {
					margin-left: 10px;
					flex: 1;
					font-size: 28rpx;
					color: #666;
				}
				.right {
					.rtext {
						font-size: 24rpx;
						color: #4173ff !important;
						border-color: #a0cfff !important;
						background-color: #ecf5ff !important;
						border-radius: 3.125rem;
						display: inline-flex;
						width: auto;
						font-size: 0.6875rem;
						padding-top: 1px;
						height: 1.5625rem;
						line-height: 1.5625rem;
						padding: 0 0.625rem;
					}
				}
			}
		}
	}
	
	.line {
		width: 100%;
		height: 20rpx;
	}
</style>