<template>
	<view class="content">
		<view class="mine-top">
			<image class="mine-top-img" src="/static/images/mine-bg.png" mode=""></image>
		</view>
		<view class="mine-card">
			<view class="mine-card-left" v-if="user.userId">
				<button class="avatar-wrapper" type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
					<img class="mine-card-img" :src="user.avatar ? user.avatar : '/static/images/avatar1.png'" alt="">
				</button>
			</view>
			<view class="mine-card-left" v-else>
				<img class="mine-card-img" :src="user.avatar ? user.avatar : '/static/images/avatar1.png'" alt="">
			</view>
			<template v-if="user.userId">
				<view class="mine-card-right">
					<view class="mine-card-title" @click="nickNameInputShow = true">
						{{ user.nickName }}
					</view>
					<view class="mine-card-label">
						<u-icon name="phone-fill" color="#101010" size="13"></u-icon>
						<view class="repeat-customer">
							{{ user.phonenumber }}
						</view>
					</view>
				</view>
			</template>
			<view class="login" v-else @click="login">
				请点击登录
			</view>
		</view>
		<view class="menu-area">
			<view v-for="(item,index) in menuArr" :key="index" @click="menuClick(index)" class="cell">
				<image class="menu-img" :src="item.pic" mode="aspectFit"></image>
				<text class="grid-text">{{item.title}}</text>
			</view>
		</view>
		<view class="cell-area">
			<u-cell-group>
				<u-cell v-for="item,index in cellArr" :key="index" :title="item.title"
					:titleStyle="{fontSize:'30rpx',color:'#232220'}" :isLink="true" arrow-direction="right" size="large"
					:url="item.url" @click="toCell(item.url)">
					<u-icon slot="icon" size="22" :name="item.icon" color="#FFA521"></u-icon>
				</u-cell>
				<u-cell @click="toAuthority" title="隐私权限" arrow-direction="right" size="large" :isLink="true"
					:titleStyle="{fontSize:'30rpx',color:'#232220'}">

					<u-icon slot="icon" size="22" name="setting" color="#FFA521"></u-icon>
				</u-cell>
			</u-cell-group>
		</view>
		<u-popup :show="nickNameInputShow" mode="center" :closeable="true" @close="closenickNameInputPop">
			<view class="nickname-pop">
				<text class="nickname-label">您的新昵称(10字之内)</text>

				<view class="nickname-input">
					<input type="nickname" class="input-style" maxlength="10" v-model="newNickName" placeholder="请输入昵称"
						border="surround" @blur="bindblur" @input="bindinput" />

				</view>
				<button class="button-style" type="primary" size="mini" @click="updateProfile">保存</button>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					nickName: '',
					avatar: '',
					phonenumber: ''
				},
				newNickName: '',
				nickNameInputShow: false,
				menuArr: [{
						name: 'photo',
						title: '我的儿童',
						pic: "/static/images/mine-child.png",
						url: "/minePackage/pages/MineChild"
					},
					{
						name: 'lock',
						title: '历史测试',
						pic: "/static/images/mine-test.png",
						url: "/minePackage/pages/MineTest"
					},
				],
				cellArr: [{
						title: "我的收藏",
						url: "/homePackage/pages/FavEssay",
						icon: "star-fill"
					},
					{
						title: "儿童绑定",
						url: "/minePackage/pages/BindChild",
						icon: "plus-people-fill"
					},
				]
			}
		},
		onShow() {
			console.log(135235);
			console.log(this.$store.getters.token);
			this.getUserInfo()
		},
		methods: {
			//登录
			login() {
				uni.navigateTo({
					url: "/loginPackage/pages/Login"
				})
			},
			async getUserInfo() {
				const res = await this.$myRequest({
					url: '/getAppInfo',
					method: 'GET'
				})
				this.user = res.data.user;
				this.user.avatar = this.user.avatar ? this.baseUrl + res.data.user.avatar : require(
					'@/static/images/default-avatar.png');

			},
			onChooseavatar(e) {
				console.log(this.$store.getters.token);
				console.log('114', e);
				// this.user.avatar = e.detail.avatarUrl;
				uni.uploadFile({
					url: this.baseUrl + '/system/user/profile/avatar', //仅为示例，非真实的接口地址
					filePath: e.detail.avatarUrl,
					name: 'avatarfile',
					header: {
						Authorization: this.$store.getters.token
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes);
						if (uploadFileRes.statusCode == 200) {
							this.getUserInfo()
						}
					}
				});
			},
			menuClick(index) {
				if (this.$store.getters.token) {
					uni.navigateTo({
						url: this.menuArr[index].url
					})
				} else {
					uni.navigateTo({
						url: '/loginPackage/pages/Login'
					})
				}

			},
			closenickNameInputPop() {
				this.nickNameInputShow = false
			},
			bindblur(e) {
				this.newNickName = e.detail.value; // 获取微信昵称
			},
			bindinput(e) {
				this.newNickName = e.detail.value; // 获取微信昵称
			},
			toCell(url) {
				if (this.$store.getters.token) {
					// uni.navigateTo({
					// 	url: url
					// })
				} else {
					uni.navigateTo({
						url: '/loginPackage/pages/Login'
					})
				}
			},
			//授权设置
			toAuthority() {
				if (this.$store.getters.token) {
					uni.openSetting({
						success(res) {
							console.log('146', res.authSetting)
						}
					});
				} else {
					uni.navigateTo({
						url: '/loginPackage/pages/Login'
					})
				}

			},
			// 修改昵称
			async updateProfile() {
				if (uni.$u.test.isEmpty(this.newNickName)) {
					return uni.showToast({
						icon: 'error',
						title: '请填写昵称'
					})
				}
				const res = await this.$myRequest({
					method: 'PUT',
					url: '/system/user/profile/updateNickName',
					data: {
						nickName: this.newNickName
					}
				})
				if (res.data.code == 200) {
					uni.showToast({
						title: '昵称修改成功'
					})
					this.closenickNameInputPop()
					this.getUserInfo()
				}
			}

		}
	}
</script>

<style lang="less" scoped>
	/deep/ .u-popup__content {
		width: 80%;
		border-radius: 20rpx;
	}

	.content {
		position: relative;

		.mine-top {
			width: 100%;
			height: 250rpx;

			.mine-top-img {
				width: 100%;
				height: 100%;
			}
		}

		.mine-card {
			position: absolute;
			top: 60rpx;
			width: 90%;
			height: 300rpx;
			left: 5%;
			box-shadow: 0rpx 4rpx 8rpx 0rpx #E6E6E6;
			border-radius: 20rpx;
			background-color: #fff;
			display: flex;
			align-items: center;

			.mine-card-right {
				height: 220rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.mine-card-title {
					font-weight: bold;
					font-size: 36rpx;
					color: #111111;
				}

				.mine-card-label {
					display: flex;
					align-items: center;


					.repeat-customer {
						color: #101010;
						font-size: 26rpx;
						margin-left: 10rpx;
					}
				}
			}

			.mine-card-left {
				height: 180rpx;
				width: 180rpx;
				margin-left: 40rpx;
				margin-right: 50rpx;
				border-radius: 50%;
				overflow: hidden;

				.mine-card-img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.menu-area {
			height: 240rpx;
			width: 100%;
			margin: 0 auto;
			margin-top: 100rpx;
			padding-left: 60rpx;
			padding-right: 60rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.cell {
				display: flex;
				align-items: center;
			}

			.menu-img {
				width: 80rpx;
				height: 80rpx;
			}

			.grid-text {
				font-size: 30rpx;
				color: #101010;
				margin-left: 10rpx;
			}
		}

		.cell-area {
			width: 90%;
			margin: 0 auto;
		}

		/* 头像能力 按钮样式 */
		.avatar-wrapper {
			height: 100%;
			height: 100%;
			margin: 0;
			background-color: 0;
			background: 0;
			padding: 0;
			border-radius: 0;
			border-radius: 0;
			border: 0;
			overflow: hidden;
		}

		.avatar-wrapper::after {
			border: none;
		}

		.nickname-pop {
			padding: 70rpx 50rpx 0rpx;

		}

		.nickname-input {
			width: 100%;
			font-size: 26rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.nickname-label {
			display: block;
			margin-bottom: 20rpx;
			text-align: center;
		}

		.input-style {
			border-bottom: 1px solid #007aff;
			display: block;
			width: 100%;
			height: 80rpx;
		}

		.button-style {
			margin-top: 40rpx;
			margin-left: calc(50% - 50rpx);

		}



	}
</style>
