<template>
	<view class="set-user-page">
		<!-- 顶部装饰背景 -->
		<view class="header-bg">
			<view class="header-bg-inner"></view>
		</view>

		<!-- 头像区域 -->
		<view class="avatar-section" @click="uploadFImg">
			<view class="avatar-wrapper">
				<img class="avatar-img" :src="Service.GetMateUrlByImg(info.avatar)" />
				<!-- 相机图标 -->
				<view class="avatar-camera">
					<u-icon name="camera-fill" color="#fff" size="16"></u-icon>
				</view>
			</view>
			<text class="avatar-tip">点击更换头像</text>
		</view>

		<!-- 表单卡片 -->
		<view class="form-card">
			<u-form labelWidth="90" labelPosition="left" :model="info" ref="form1" :borderBottom="true">
				<u-form-item label="昵称" prop="info.nick" borderBottom>
					<u-input inputAlign="right" v-model="info.nick" border="none" placeholder="请输入昵称" clearable
						:customStyle="{ color: '#333' }"></u-input>
				</u-form-item>

				<u-form-item label="手机号" prop="info.phone" borderBottom>
					<u-input inputAlign="right" disabled disabledColor="transparent" v-model="info.phone" border="none"
						placeholder="未绑定" :customStyle="{ color: '#999' }"></u-input>
				</u-form-item>
			</u-form>
		</view>

		<!-- 底部保存按钮 -->
		<view class="footer-safe">
			<view class="save-btn-wrapper">
				<u-button type="primary" shape="circle" size="large" color="linear-gradient(90deg, #FF7F00, #FF6A00)"
					:customStyle="btnStyle" @click="save" text="保存信息"></u-button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { Service } from "@/Service/Service";
	import { ref } from "vue";
	import { UserService } from "@/Service/api/UserService";

	let info = ref({
		avatar: "",
		nick: "",
		phone: "",
	});

	const btnStyle = {
		fontWeight: 600,
		fontSize: "32rpx",
		boxShadow: "0 8rpx 24rpx rgba(255, 106, 0, 0.35)",
		height: "96rpx",
		lineHeight: "96rpx",
	};

	onLoad(() => { });

	onShow(() => {
		getData();
	});

	const getData = () => {
		UserService.GetUserInfo().then((res) => {
			if (res.code == 0) {
				info.value = res.data.info;
			} else {
				Service.Msg(res.msg);
			}
		});
	};

	const uploadFImg = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ["original", "compressed"],
			sourceType: ["album", "camera"],
			success: function (res) {
				let path = res.tempFiles[0].path;
				Service.uploadH5(path, "Avatar", (data) => {
					console.log(data);
					info.value.avatar = JSON.parse(data).data.path;
				});
			},
			fail: function (err) {
				console.error("选择失败:", err.errMsg);
			},
		});
	};

	const save = () => {
		if (info.value.avatar == "") {
			Service.Msg("请上传头像!");
			return;
		}
		if (info.value.nick == "") {
			Service.Msg("请输入昵称!");
			return;
		}

		UserService.UpdateUser(info.value.avatar, info.value.nick).then((res) => {
			if (res.code == 0) {
				Service.Msg("保存成功!");
				setTimeout(() => {
					Service.GoPageBack();
				}, 1000);
			} else {
				Service.Msg(res.msg);
			}
		});
	};
</script>

<style lang="scss">
	page {
		background-color: #f6f7f9;
	}

	.set-user-page {
		position: relative;
		min-height: 100vh;
		padding-bottom: 160rpx;
		box-sizing: border-box;
	}

	/* 顶部装饰背景 */
	.header-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 240rpx;
		overflow: hidden;
		z-index: 0;

		.header-bg-inner {
			width: 100%;
			height: 100%;
			background: linear-gradient(180deg, #fff5ec 0%, rgba(255, 245, 236, 0) 100%);
			border-radius: 0 0 50% 50%;
			transform: scaleX(1.4);
		}
	}

	/* 头像区域 */
	.avatar-section {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 40rpx;
		margin-bottom: 40rpx;
	}

	.avatar-wrapper {
		position: relative;
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		background-color: #fff;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.06);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: transform 0.2s ease;

		&:active {
			transform: scale(0.96);
		}
	}

	.avatar-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		object-fit: cover;
		border: 4rpx solid #fff;
		box-sizing: border-box;
	}

	.avatar-empty {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		background: #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.avatar-placeholder-icon {
		width: 60rpx;
		height: 60rpx;
		opacity: 0.5;
	}

	.avatar-camera {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 48rpx;
		height: 48rpx;
		background: linear-gradient(135deg, #FF7F00, #FF6A00);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 4rpx solid #fff;
		box-shadow: 0 4rpx 12rpx rgba(255, 106, 0, 0.3);
	}

	.avatar-tip {
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #999;
		letter-spacing: 1rpx;
	}

	/* 表单卡片 */
	.form-card {
		position: relative;
		z-index: 1;
		margin: 0 30rpx;
		padding: 0 30rpx;
		background-color: #fff;
		border-radius: 24rpx;
		box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);

		::v-deep .u-form-item__body__left__content__label {
			font-size: 30rpx;
			color: #333;
			font-weight: 500;
		}

		::v-deep .u-input__content__field-wrapper__field {
			font-size: 30rpx !important;
		}

		::v-deep .u-form-item__body__right__content__slot {
			justify-content: flex-end;
		}
	}

	/* 底部安全区 + 保存按钮 */
	.footer-safe {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 24rpx 40rpx calc(env(safe-area-inset-bottom) + 24rpx) 40rpx;
		background: rgba(255, 255, 255, 0.85);
		backdrop-filter: blur(12rpx);
		z-index: 10;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.03);
	}

	.save-btn-wrapper {
		width: 100%;
	}
</style>