<template>
	<view>
		<u-navbar class="u-navbar-box" title="个人信息" placeholder bgColor="transparent" autoBack />
		<u-cell-group :border="false" :customStyle="{background: '#fff', margin: '30rpx',  borderRadius: '20rpx'}">
			<!-- <u-cell title="头像" isLink @click="changeAvatar">
				<template #value>
					<up-avatar :src="computeAvatarUrl" defaultUrl="/static/mine/avatar-def.png" bgColor="#305BFF" />
				</template>
			</u-cell> -->
			<u-cell title="用户名" :isLink="false" :border="false">
				<template #value>
					<!-- <view>{{vuex_user.nickName}}</view> -->
					<up-input placeholder="请输入用户名" border="none" inputAlign="right" :maxlength="20"
						v-model.trim="nickName"></up-input>
				</template>
			</u-cell>
			<u-cell title="手机号码" :isLink="false" :border="false">
				<template #value>
					<!-- <view>{{vuex_user.phonenumber}}</view> -->
					<up-input placeholder="请输入电话号码" border="none" type="number" inputAlign="right" :maxlength="11"
						v-model.trim="phonenumber"></up-input>
				</template>
			</u-cell>
			<u-cell title="修改密码" isLink :border="false" value="点击前往" url="/pages/subpack/pages/chang-pwd/chang-pwd">
			</u-cell>
		</u-cell-group>

		<view style="padding-left: 20px;padding-right: 20px;">
			<up-button type="primary" @click="updateUserInfo">修改信息</up-button>
		</view>

		<view class="position-fixed" style="bottom: 150rpx;left: 100rpx;width: 550rpx;">
			<up-button type="error" @click="logout">退出登录</up-button>
		</view>

	</view>
</template>

<script setup>
	import {
		uploadAvatarUrl,
		getUserInfoUrl,
		updateUserInfoUrl
	} from '@/common/config/api.js';
	import {
		onMounted,
		ref,
		getCurrentInstance,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const {
		proxy
	} = getCurrentInstance();

	const nickName = ref('');
	const phonenumber = ref('');


	onLoad(() => {
		nickName.value = proxy.vuex_user.nickName;
		phonenumber.value = proxy.vuex_user.phonenumber;
		// console.log('proxy.vuex_user', proxy.vuex_user);
	})

	const computeAvatarUrl = computed(() => {
		// console.log('proxy.vuex_user.avatar', proxy.vuex_user.avatar);
		// console.log('proxy.vuex_user.avatar', uni.$u.http.config.baseURL);
		return uni.$u.http.config.baseURL + proxy.vuex_user.avatar
	})

	const updateUserInfo = () => {
		if (!nickName.value) {
			return uni.$u.toast('用户名不能为空');
		}
		if (!phonenumber.value) {
			return uni.$u.toast('手机号码不能为空');
		}
		if (!uni.$u.test.mobile(phonenumber.value)) {
			return uni.$u.toast('请输入正确的手机号码');
		}

		uni.showModal({
			title: '提示',
			content: '您确定要修改个人信息吗?',
			success(res) {
				if (res.confirm) {
					updateUserInfoUrl({
							userId: proxy.vuex_user.id,
							nickName: nickName.value,
							phonenumber: phonenumber.value
						})
						.then(res => {
							console.log('修改个人信息', res);
							proxy.$u.toast('修改成功');
							// getUserInfo()
							setTimeout(() => {
								getUserInfo()
							}, 1000)
						})
				}
			}
		})
	}




	const changeAvatar = () => {
		// console.log('更换头像');
		uni.chooseMedia({
			count: 1,
			mediaType: ['image'],
			sizeType: ['compressed'],
			success: (e) => {
				console.log(e.tempFiles[0].tempFilePath);
				uploadAvatarUrl({
						filePath: e.tempFiles[0].tempFilePath,
						name: 'avatarfile'
					})
					.then(res => {
						uni.$u.toast('修改成功');
						getUserInfo();
					})
					.catch(err => {
						console.log('上传Err', err);
					})
			}
		})
	}

	const getUserInfo = () => {
		getUserInfoUrl()
			.then(res => {
				console.log('用户信息', res);
				let user = {
					id: res.user.userId,
					// avatar: res.user.avatar,
					nickName: res.user.nickName,
					phonenumber: res.user.phonenumber,
					roles: res.roles
				}
				proxy.$u.vuex('vuex_user', user);
			})
			.catch(err => {
				console.log('err', err);
			})
	}

	// 登出
	const logout = () => {
		uni.showModal({
			title: '提示',
			content: '您确定要退出登录吗?',
			success(res) {
				if (res.confirm) {
					proxy.$u.vuex('vuex_token', '');
					proxy.$u.vuex('vuex_login', false);
					uni.reLaunch({
						url: '/pages/subpack/pages/login/login'
					})
				}
			}
		})
	}
</script>
<style>
	page {
		background-color: #F6F8FD;
	}
</style>
<style lang="scss" scoped>
	page {
		background-color: #F6F8FD;
	}

	:deep(.u-navbar__content__title) {
		font-weight: bold;
		font-size: 36rpx;
		color: #222222;
	}

	.u-navbar-box {
		background: radial-gradient(circle at left, #FFE5E4 0%, #EEF2F5 40%, #DBEEFB 100%);
	}
</style>