<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="user.avatarUrl || user.avatar"></up-avatar>
						</template>
					</up-cell>
				</button>
				<up-cell title="昵称" :isLink="true" size="min" @click="upNickName">
					<template #value>
						<text class="u-slot-value">{{ user.nickname || user.nickName }}</text>
					</template>
				</up-cell>
				<up-cell title="手机号" size="min" :border="false">
					<template #value>
						<text class="u-slot-value">{{ user.mobile || user.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 { investUserModify, updateNickName, updateAvatar } from '@/api/api.js';
import { ref } from 'vue';
import { uploadFiles } from '@/utils/fun.js';
import { userHook } from '@/hooks/userInfo.js';
const { user, isInvest, fetchUserData } = userHook();

const chooseAvatar = async (e) => {
	let img = await uploadFiles(e.detail.avatarUrl);
	console.log(img);
	isInvest.value ? await investUserModify({ ...user, avatarUrl: img }) : await updateAvatar({ avatar: img });
	fetchUserData();
};

const upNickName = () => {
	uni.showModal({
		title: '修改昵称',
		content: user.nickname || user.nickName || "",
		editable: true,
		success: async function (res) {
			if (res.confirm) {
				isInvest.value ? await investUserModify({ ...user, nickname: res.content }) : await updateNickName({ nickName: res.content });
				fetchUserData()
				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>
