<template>
	<view class="p30">
		<view style="background-color: #fff; border-radius: 15rpx">
			<up-cell-group :border="false">
				<button style="all: unset" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
					<up-cell title="头像" :isLink="true" size="min">
						<template #value>
							<up-avatar :src="info.avatar"></up-avatar>
						</template>
					</up-cell>
				</button>
				<up-cell title="昵称" :isLink="true" size="min" @click="upNickName">
					<template #value>
						<text class="u-slot-value">{{ info.nickName }}</text>
					</template>
				</up-cell>
				<up-cell title="手机号" size="min" :border="false">
					<template #value>
						<text class="u-slot-value">{{ info.phone || '-' }}</text>
					</template>
				</up-cell>
			</up-cell-group>
		</view>
		<view style="height: 100rpx"></view>
		<up-button type="error" text="退出登录" @click="outLogin"></up-button>
	</view>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app';
import { userInfo, updateNickName, updateAvatar } from '@/api/api.js';
import { ref } from 'vue';
import { uploadFiles } from '@/utils/fun.js';

let info = ref({});

onShow(async () => {
	getInfo();
});

const getInfo = async () => {
	let _res = await userInfo();
	info.value = _res;
};

const chooseAvatar = async (e) => {
	let img = await uploadFiles(e.detail.avatarUrl);
	updateAvatar({ avatar: img }).then((res) => {
		getInfo();
	});
	console.log(img);
};

const upNickName = () => {
	uni.showModal({
		title: '修改昵称',
		content: info.value.nickName,
		editable: true,
		success: function (res) {
			if (res.confirm) {
				updateNickName({ nickName: res.content }).then((res) => {
					getInfo();
				});
				console.log(res);
				console.log('用户点击确定');
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
};

const outLogin = () => {
	uni.showModal({
		title: '提示',
		content: '是否确认退出登录？',
		success: (res) => {
			if (res.confirm) {
				uni.clearStorageSync();
				uni.reLaunch({
					url: '/pages/home/home'
				});
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
};
</script>

<style>
button::after {
	all: unset;
}
</style>
