<template>
	<view class="profile-page">
		

		<!-- 用户信息区域 -->
		<view class="user-info">
			<view class="name-edit">
				<view class="edit-wapper">
					<view class="nav_img">
						<image src="/static/imgs/index/nav.png" mode="aspectFit"></image>
					</view>
					<view class="name" @click="showEditModal = true">
						樱桃小丸子
						<u-icon name="edit-pen" color="#2e2e2e" size="34" ></u-icon>
					</view>
				</view>

				<!-- <image class="edit-icon" src="/static/images/edit.png" mode="aspectFit"></image> -->
			</view>
			<view class="description">
				<view class="title">个人简介</view>
				<view class="content">这家伙很懒，什么都没有写~</view>
			</view>
		</view>

		<!-- 功能按钮区域 -->
		<view class="function-buttons">
			<view class="button-row" v-for="(row,rowIndex) in groupedButtons" :key="rowIndex">
				<view class="button-item" v-for="(item, index) in row" :key="index">
					<image class="icon" :src='item.url' mode="aspectFit"></image>
					<view class="label">{{item.name}}</view>
				</view>
			</view>
		</view>
		<!-- u-modal 弹窗 -->
		<u-modal :show="showEditModal" 
		         title="修改用户信息" 
				 :show-confirm-button="true" 
				 :show-cancel-button="true"
				  @confirm="handleSubmit"
				  @cancel="handleCancel">
			<view class="modal-content">
				
				
				
				
				
				<!-- 头像上传 -->
				<view class="avatar-section">
					<text>头像：</text>
					<u-upload :file-list="avatarList" :max-count="1" @afterRead="handleAvatarUpload"
						@delete="handleAvatarDelete"></u-upload>
				</view>

				<!-- 姓名输入 -->
				<view class="input-section">
					<text>姓名：</text>
					<u-input v-model="formData.name" placeholder="请输入姓名"></u-input>
				</view>

				<!-- 简介输入 -->
				<view class="input-section">
					<text>简介：</text>
					<u-input v-model="formData.bio" type="textarea" placeholder="请输入简介" :maxlength="200"></u-input>
				</view>
			</view>
		</u-modal>
		<Footer></Footer>
	</view>
</template>

<script>
	import Footer from '@/components/footer_common.vue';

	export default {
		components: {
			Footer
		},
		data() {
			return {
				// 个人资料修改
				showEditModal: false,
				avatarList: [], // 头像文件列表
				formData: {
					name: "", // 用户姓名
					bio: "", // 用户简介
				},
				choseList: [{
						key: 1,
						url: "/static/imgs/service/service_list.png",
						name: '全部工单'
					},
					{
						key: 2,
						url: "/static/imgs/service/service_help.png",
						name: '我的求助'
					},
					{
						key: 3,
						url: "/static/imgs/service/service_service.png",
						name: '周边服务'
					},
					{
						key: 4,
						url: "/static/imgs/service/service_friend.png",
						name: '邻里圈'
					},
					{
						key: 5,
						url: "/static/imgs/service/service_notice.png",
						name: '社区公告'
					},
					{
						key: 6,
						url: "/static/imgs/service/service_phone.png",
						name: '联系社区'
					},
				],

			}
		},
		computed: {
			groupedButtons() {
				const rows = [];
				for (let i = 0; i < this.choseList.length; i += 3) {
					rows.push(this.choseList.slice(i, i + 3));
				}
				return rows;
			},
		},
		onLoad() {

		},
		methods: {
			// 处理头像上传
			handleAvatarUpload(event) {
				const {
					file
				} = event;
				this.avatarList = [{
					url: file.url
				}]; // 更新头像文件列表
			},

			// 处理头像删除
			handleAvatarDelete() {
				this.avatarList = []; // 清空头像文件列表
			},

			// 提交表单
			handleSubmit() {
				const {
					name,
					bio
				} = this.formData;
				const avatarUrl = this.avatarList.length > 0 ? this.avatarList[0].url : "";

				// 模拟提交数据
				console.log("提交的数据：", {
					name,
					bio,
					avatarUrl,
				});

				// 关闭弹窗
				this.showEditModal = false;

				// TODO: 调用 API 提交数据到服务器
			},

			// 取消操作
			handleCancel() {
				this.showEditModal = false; // 关闭弹窗
			},
		},
	}
</script>

<style lang="scss" scoped>
	.profile-page {
		background-color: #f8faff;
		padding: 20rpx;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.edit-button {
				background-color: #fff;
				border-radius: 10rpx;
				padding: 10rpx 20rpx;
				font-size: 28rpx;
				color: #333;
				border: 1rpx solid #ccc;
			}

			.avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				margin: 0 20rpx;
			}

			.settings-icon {
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.user-info {
			// background-color: #fff;
			padding: 20rpx;
			margin-top: 140rpx;
			margin-bottom: 20rpx;

			.name-edit {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;

				.edit-wapper {
					width: 50%;
					margin: 0 auto;
					text-align: center;

					.nav_img {
						width: 120rpx;
						height: 120rpx;
						margin: 0 auto;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.name {
						font-size: 26rpx;
						color: #2e2e2e;
						height: 70rpx;
						line-height: 70rpx;
						display: inline-flex;
						align-items: center;

					}
				}



				.edit-icon {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.description {
				text-align: left;
				padding: 30rpx;
				background: #fff;

				.title {
					font-size: 26rpx;
					color: #333;
					margin-bottom: 10rpx;
					font-weight: 500;

				}

				.content {
					font-size: 22rpx;
					color: #999;
				}
			}
		}

		.function-buttons {
			
			background-color: #fff;
			padding: 20rpx;
			display: flex;
			flex-direction: column;


			.button-row {
				width: 100%;
				display: flex;
				justify-content: space-around;
				margin-bottom: 20rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.button-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 30%;
					padding: 20rpx;
					text-align: center;


					.icon {
						width: 80rpx;
						height: 80rpx;
						margin-bottom: 10rpx;
					}

					.label {
						font-size: 26rpx;
						color: #2e2e2e;
						font-weight: 500;
					}
				}
			}
		}
		
		.modal-content{
			width: 100%;
			
			text{
				height: 60rpx;
				line-height: 60rpx;
			}
		}
	}
	
	
	
	
	
	
	
	
	
</style>