<template>
	<view class="page">
		<view class="padding bg-white">
			<!-- 头像 -->
			<view class="flex justify-between align-center padding-tb solid-bottom" @click="chooseAvatar">
				<view class="text-black">头像</view>
				<view class="flex align-center">
					<image class="avatar" :src="avatarPreview || getImageUrl(userInfo.avatar) || defaultAvatar" mode="aspectFill"></image>
					<view class="lg text-gray cuIcon-right margin-left-xs"></view>
				</view>
			</view>
			
			<!-- 昵称 -->
			<view class="flex justify-between align-center padding-tb solid-bottom">
				<view class="text-black label-text">昵称</view>
				<view class="flex align-center flex-sub justify-end">
					<input class="input-right" v-model="userInfo.nickName" placeholder="请输入昵称" />
					<view class="lg text-gray cuIcon-right margin-left-xs"></view>
				</view>
			</view>
			
			<!-- 电话号码 -->
			<view class="flex justify-between align-center padding-tb solid-bottom">
				<view class="text-black label-text">电话号码</view>
				<view class="flex align-center flex-sub justify-end">
					<input class="input-right" v-model="userInfo.phonenumber" placeholder="请输入电话号码" type="number" />
					<view class="lg text-gray cuIcon-right margin-left-xs"></view>
				</view>
			</view>
			
			<!-- 邮箱 -->
			<view class="flex justify-between align-center padding-tb solid-bottom">
				<view class="text-black label-text">邮箱</view>
				<view class="flex align-center flex-sub justify-end">
					<input class="input-right" v-model="userInfo.email" placeholder="请输入邮箱" />
					<view class="lg text-gray cuIcon-right margin-left-xs"></view>
				</view>
			</view>
			
			<!-- 性别 -->
			<view class="flex justify-between align-center padding-tb solid-bottom">
				<view class="text-black">性别</view>
				<view class="flex align-center">
					<view class="gender-switch">
						<view 
							class="gender-item" 
							:class="{ 'gender-active': userInfo.sex === '0', 'gender-male': userInfo.sex === '0' }"
							@click="userInfo.sex = '0'"
						>
							<text class="cuIcon-male"></text>
						</view>
						<view 
							class="gender-item" 
							:class="{ 'gender-active': userInfo.sex === '1', 'gender-female': userInfo.sex === '1' }"
							@click="userInfo.sex = '1'"
						>
							<text class="cuIcon-female"></text>
						</view>
					</view>
				</view>
			</view>
			
			<button class="bg-blue round margin-top-xl" @click="handleSave" :loading="saving">保存</button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { toImageUrl } from '@/request/request.js';
import { uploadSingleWithLoading } from '@/utils/upload.js';
import { getProfileDetail, updateProfile } from '@/request/three_one_api/info.js';

const saving = ref(false);
const defaultAvatar = 'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg';
const avatarPreview = ref(''); // 用于显示选择的图片临时预览

const userInfo = reactive({
	avatar: '',      // 七牛完整 URL，用于提交
	nickName: '',
	phonenumber: '',
	email: '',
	sex: '0'  // '0'-男 '1'-女
});

// 获取图片完整URL（用于显示）
const getImageUrl = (path) => {
	if (!path) return '';
	return toImageUrl(path);
};

// 页面加载时获取个人信息
onMounted(() => {
	loadProfileDetail();
});

// 获取个人信息
const loadProfileDetail = async () => {
	try {
		uni.showLoading({ title: '加载中...' });
		const res = await getProfileDetail();
		uni.hideLoading();
		if (res.code === 0 && res.data) {
			userInfo.avatar = res.data.avatar || '';
			userInfo.nickName = res.data.nickName || '';
			userInfo.phonenumber = res.data.phonenumber || '';
			userInfo.email = res.data.email || '';
			userInfo.sex = res.data.sex || '0';
		}
	} catch (err) {
		uni.hideLoading();
		console.error('获取个人信息失败:', err);
	}
};

// 选择头像
const chooseAvatar = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['compressed'],
		sourceType: ['album', 'camera'],
		success: (res) => {
			const tempFilePath = res.tempFilePaths[0];
			// 显示临时预览
			avatarPreview.value = tempFilePath;
			// 上传获取链接
			uploadAvatar(tempFilePath);
		}
	});
};

// 上传头像（七牛直传）
const uploadAvatar = async (filePath) => {
	try {
		const { url } = await uploadSingleWithLoading(filePath);
		userInfo.avatar = url;
		avatarPreview.value = url;
		uni.showToast({ title: '上传成功', icon: 'success' });
	} catch (e) {
		avatarPreview.value = '';
		uni.showToast({
			title: e?.msg || e?.message || '上传失败',
			icon: 'none'
		});
	}
};

// 保存
const handleSave = async () => {
	// 表单验证
	if (!userInfo.nickName) {
		uni.showToast({ title: '请输入昵称', icon: 'none' });
		return;
	}
	
	saving.value = true;
	try {
		const params = {
			nickName: userInfo.nickName,
			phonenumber: userInfo.phonenumber,
			email: userInfo.email,
			sex: userInfo.sex,
			avatar: userInfo.avatar
		};
		
		const res = await updateProfile(params);
		if (res.code === 0) {
			uni.showToast({ title: '保存成功', icon: 'success' });
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		} else {
			uni.showToast({ title: res.msg || '保存失败', icon: 'none' });
		}
	} catch (err) {
		console.error('保存失败:', err);
		uni.showToast({ title: '保存失败', icon: 'none' });
	} finally {
		saving.value = false;
	}
};
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background: #f5f5f5;
}

.avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}

.label-text {
	flex-shrink: 0;
	margin-right: 20rpx;
}

.input-right {
	text-align: right;
	font-size: 28rpx;
	color: #333;
}

.padding-tb {
	padding: 30rpx 0;
}

.gender-switch {
	display: flex;
	align-items: center;
	background: #f0f0f0;
	border-radius: 40rpx;
	padding: 4rpx;
}

.gender-item {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	color: #999;
	transition: all 0.3s;
}

.gender-active {
	color: #fff;
}

.gender-male {
	background: #2667E9;
}

.gender-female {
	background: #ff6b81;
}

.line-blue {
	border: 1rpx solid #2667E9;
	color: #2667E9;
	background: #fff;
}
</style>
