<template>
	<view class="personalCenter">
		<view class="banner">
			<view class="people">
				<image src="https://weiapi.youbeiw.top/images/customizate/head.png" mode="widthFix" class="head">
				</image>
			</view>
			<view class="text">
				<view class="p1" @click="changeBirthday">
					生日：2024-07-13
					<image src="@/static/editIcon.png" mode="widthFix" class="editIcon"></image>
				</view>
				<view class="p1">欢迎您 小李</view>
			</view>
		</view>
		<view class="main main1">
			<view class="title">我的服务</view>
			<view class="list">
				<view class="item">
					<image src="@/static/person_icon1.png" mode="widthFix" class="icon"></image>
					<view class="wz">我的信息</view>
				</view>
				<view class="item">
					<image src="@/static/person_icon2.png" mode="widthFix" class="icon"></image>
					<view class="wz">在线客服</view>
				</view>
			</view>
		</view>
		<view class="main main2">
			<view class="title">我的报告</view>
			<view class="list">
				<view class="item">
					<view class="left">
						<view class="tit">恋爱语言测试</view>
						<view class="time">
							<image src="@/static/time.png" mode="widthFix" class="icon"></image>
							<view class="tips">2024-06-23 22：18：17</view>
						</view>
					</view>
					<view class="btn">查看报告</view>
				</view>
				<view class="item">
					<view class="left">
						<view class="tit">心理防御测评</view>
						<view class="time">
							<image src="@/static/time.png" mode="widthFix" class="icon"></image>
							<view class="tips">2024-06-23 22：18：17</view>
						</view>
					</view>
					<view class="btn">查看报告</view>
				</view>
			</view>
		</view>
		<!-- 编辑基本信息 -->
		<uni-popup ref="alertDialog" type="dialog">
			<view class="form">
				<view class="title">编辑个人信息</view>
				<form class="info" @submit="formSubmit" @reset="formReset">
					<view class="uni-form-item uni-column">
						<view class="label">姓名</view>
						<input class="uni-input" :value="form.name" placeholder="请输入姓名" />
					</view>
					<view class="uni-form-item uni-column">
						<view class="label">性别</view>
						<radio-group @change="radioChange">
							<label>
								<radio value="0" /><text>男</text>
							</label>
							<label>
								<radio value="1" /><text>女</text>
							</label>
						</radio-group>
					</view>
					<view class="uni-form-item uni-column">
						<view class="label">生日</view>
						<picker style="width: 280rpx;" mode="date" :value="form.birthday" @change="bindDateChange">
							<view class="uni-input">{{form.birthday}}</view>
						</picker>
					</view>
					<view class="uni-btn-v">
						<button form-type="submit">提交</button>
						<button type="default" form-type="reset" class="reset">关闭</button>
					</view>
				</form>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isMask: false,
				form: {
					sex: null,
					name: null,
					birthday: null
				}
			}
		},
		methods: {
			changeBirthday() {
				this.$refs.alertDialog.open();
			},
			bindDateChange(e) {
				this.form.birthday = e.detail.value
			},
			radioChange(evt) {
				this.form.sex = evt.detail.value
			},
			formSubmit() {
				//定义表单规则
				uni.showToast({
					title: "提交成功",
					icon: "none"
				});
				this.$refs.alertDialog.close();
				console.log('form',this.form)
			},
			formReset() {
				this.$refs.alertDialog.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.personalCenter {
		min-height: 100vh;
		background-color: #e1e1e0;

		.banner {
			width: 100%;
			background-color: #C13636;
			position: relative;
			overflow: hidden;
			height: 200rpx;
			background-image: url("https://weiapi.youbeiw.top/images/customizate/head_bg.png");
			background-size: 252rpx auto;
			background-repeat: no-repeat;
			background-position: top right;
			display: flex;
			align-items: center;
			padding: 0px 30rpx;
			box-sizing: border-box;
			overflow: hidden;

			.people {
				width: 94rpx;
				height: 94rpx;
				background: #FFFBF4;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
			}

			.head {
				width: 50rpx;
				height: auto;
			}

			.text {
				margin-left: 40rpx;
				font-weight: bold;
				color: #ffffff;

				.p1 {
					margin: 5rpx 0px;
				}

				.editIcon {
					width: 25rpx;
					display: inline-block;
					vertical-align: middle;
					margin-left: 10rpx;
				}
			}
		}

		.main {
			background-color: #ffffff;

			.title {
				padding: 10px 30rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #e1e1e0;
				font-size: 30rpx;
				font-weight: bold;
			}
		}

		.main1 {
			.list {
				display: flex;
				align-items: center;
				padding: 20rpx 30rpx;

				.item {
					margin-right: 80rpx;
					text-align: center;
				}

				.icon {
					width: 50rpx;
					height: auto;
					margin: 0 auto;
				}
			}
		}

		.main2 {
			margin-top: 30rpx;

			.title {
				background-image: linear-gradient(to right, #C13636, #E65A5A);
				background-clip: text;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.list {
				padding: 20rpx 30rpx;
				width: 100%;
				box-sizing: border-box;

				.item {
					width: 100%;
					background-color: #f1f1ee;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;
					padding: 20rpx;
					border-radius: 10rpx;
					box-sizing: border-box;

					.tit {
						font-size: 26rpx;
						margin-bottom: 10rpx;
						font-weight: bold;
					}

					.time {
						display: flex;
						align-items: center;

						.icon {
							width: 25rpx;
							margin-right: 10rpx;
						}

						.tips {
							font-size: 20rpx;
						}
					}
				}
			}

			.btn {
				background-color: #C13636;
				color: #ffffff;
				font-size: 24rpx;
				padding: 5rpx 25rpx;
				border-radius: 30rpx;

			}
		}

		.form {
			width: 550rpx;

			.title {
				width: 100%;
				border-bottom: 1px solid #f1f1ee;
				padding: 15rpx 0px;
				font-size: 28rpx;
				text-align: center;
				font-weight: bold;
				color: #fff;
				background-color: #C13636;
			}

			.info {
				// padding: 20rpx 0px;
				font-size: 25rpx;

				.uni-form-item {
					width: 100%;
					padding: 0rpx 20rpx;
					box-sizing: border-box;
					display: flex;
					align-items: flex-end;
					margin: 30rpx 0px;
				}

				.label {
					width: 80rpx;
					text-align: right;
					font-size: 28rpx;
					margin-right: 20rpx;
				}

				/deep/.uni-input {
					border-bottom: 1px solid #f1f1ee !important;
				}

				/deep/.input-placeholder,
				/deep/.uni-input-input {
					font-size: 26rpx !important;
				}

				/deep/.uni-label-pointer {
					margin-right: 30rpx !important;
				}

				/deep/.uni-radio-input-checked {
					background-color: #C13636 !important;
					border-color: #C13636 !important;
				}

				/deep/.uni-radio-input {
					width: 30rpx !important;
					height: 30rpx !important;
				}
			}

			background-color: #ffffff;
			border-radius: 10rpx;
			overflow: hidden;
		}

		.uni-btn-v {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 30rpx;
			padding-top: 10rpx;

			/deep/uni-button {
				width: 150rpx !important;
				height: 60rpx !important;
				line-height: 60rpx !important;
				text-align: center !important;
				background-color: #C13636 !important;
				color: #fff !important;
				font-size: 28rpx;
			}

			/deep/uni-button.reset {
				background-color: #e1e1e0 !important;
				color: #666 !important;
			}
		}
	}
</style>