<!-- 个人信息 -->
<template>
	<view class="container" style="background-color: #ffffff;min-height: calc(100vh);">
		<!-- <view class="u-flex u-row-between u-p-x-30 info-head u-p-y-20">
			<view class="info-title">基本信息</view>
			<button class="u-reset-button save-btn" :class="{ 'dis-btn': editInfoDisabled }"
				:disabled="editInfoDisabled" @tap="editUserInfo">
				保存
			</button>
		</view> -->
		<view class="avatarContainer"  @tap="onChooseImg">
			<image class="avatar" :src="userData.avatar" mode=""></image>
			<view class="edit">
				<u-icon name="edit-pen" size="20" color="#ffffff"></u-icon>
			</view>
		</view>
		<!-- <view class="user-list u-flex u-row-between">
			<text class="list-name">头像</text>
			<view class="u-flex" @tap="onChooseImg">
				<image class="avatar" :src="userData.avatar" mode=""></image>
				<text class="u-iconfont uicon-arrow-right u-m-l-20" style="color:#999;"></text>
			</view>
		</view> -->
		<view class="user-list u-flex">
			<text class="list-name">昵称</text>
			<view class="u-flex">
				<input class="list-val" v-model="userData.nickname" @input="onChangeNickName" @blur="onChangeNickName"
					@confirm="onChangeNickName" placeholder="请输入昵称~" maxlength="50"
					placeholder-style="color:#222222;fontSize:28rpx" />
				<!-- <text class="u-iconfont uicon-arrow-right u-m-l-20" style="color:#999;"></text> -->
			</view>
		</view>
		<view class="user-list u-flex">
			<text class="list-name">ID</text>
			<view class="u-flex">
				<text class="list-val">{{ userData.id}}</text>
				<!-- <text class="u-iconfont uicon-arrow-right u-m-l-20" style="color:#999;"></text> -->
			</view>
		</view>
		<view class="user-list u-flex" @tap="bindMobile">
			<text class="list-name">手机</text>
			<view class="u-flex">
				<text class="list-val">{{ userInfo.mobile || "暂未绑定手机号" }}</text>
				<text v-if="userInfo.id && !userInfo.verification.mobile" class="u-iconfont uicon-arrow-right u-m-l-20"
					style="color:#999;"></text>
				<text v-else class="u-iconfont uicon-checkmark-circle-fill u-m-l-20" style="color:#09BB07;"></text>
			</view>
		</view>
		<view class="user-list  u-flex u-m-b-10" @tap="showCalendar = true">
			<text class="list-name">生日</text>
			<view class="u-flex">
				<text class="list-val">{{ userData.birthday || "请选择生日~" }}</text>
				<!-- <text class="u-iconfont uicon-arrow-right u-m-l-20" style="color:#999;"></text> -->
			</view>
		</view>

		<!-- <view class="user-list u-flex u-row-between" @tap="$Router.push('/pages/user/address/list')">
			<text class="list-name">地址管理</text>
			<view class="u-flex">
				<text class="list-val"></text>
				<text class="u-iconfont uicon-arrow-right u-m-l-20" style="color:#999;"></text>
			</view>
		</view>
		<view class="user-list u-flex u-row-between" @tap="changePwd">
			<text class="list-name">修改密码</text>
			<view class="u-flex">
				<text class="list-val"></text>
				<text class="u-iconfont uicon-arrow-right u-m-l-20" style="color:#999;"></text>
			</view>
		</view> -->
		<view class="btnGroup">
			<button class="u-reset-button save-btn" :class="{ 'dis-btn': editInfoDisabled }"
				:disabled="editInfoDisabled" @tap="editUserInfo">
				保存
			</button>
			<view class="btn-box u-flex u-row-center u-col-center">
				<button hover-class="hover-logout-btn" class="u-reset-button logout-btn" @tap="showModal = true">
					退出登录
				</button>
			</view>
			
		</view>
		

		<!-- 登录提示 -->
		<shopro-auth-modal v-if="authType"></shopro-auth-modal>
		<!-- 日历 -->
		<u-picker @confirm="changeCalendar" mode="time" confirm-color="#17C161" v-model="showCalendar" :params="{
			year: true,
			month: true,
			day: true,
			hour: false,
			minute: false,
			second: false
		}"></u-picker>
		<!-- modal -->
		<u-modal ref="uModal" v-model="showModal" :show-cancel-button="true" confirm-color="#F54141"
			cancel-color="#666666" @confirm="confirmLogOut" content="确定退出登录？"></u-modal>
	</view>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from "vuex";
import Auth from "@/shopro/permission/index.js";
import wechat from "@/shopro/wechat/wechat";

export default {
	components: {},
	data() {
		return {
			platform: this.$platform.get(),
			userData: {},
			showCalendar: false,
			showModal: false,
			editInfoDisabled: true,
			thirdOauthInfo: null //第三方信息
		};
	},
	computed: {
		...mapGetters(["userInfo", "authType"])
	},
	onLoad() {
		this.userData = JSON.parse(JSON.stringify(this.userInfo));
		this.getThirdOauthInfo();
	},
	methods: {
		...mapActions(["getUserInfo", "showAuthModal", "logout"]),
		// 选择日期
		changeCalendar(e) {
			this.userData.birthday = `${e.year}-${e.month}-${e.day}`;
			this.editInfoDisabled = this.userData.birthday == this.userInfo.birthday;
		},
		// 修改密码
		changePwd() {
			this.showAuthModal("changePwd");
		},
		// 修改昵称
		onChangeNickName() {
			this.editInfoDisabled = this.userData.nickname == this.userInfo.nickname;
		},
		// 修改手机号
		bindMobile() {
			!this.userInfo.verification.mobile && this.showAuthModal("bindMobile");
		},
		// 更换头像
		async onChooseImg() {
			let authState = 0;
			authState += await new Auth("writePhotosAlbum").check();
			if (authState < 1) return;
			authState += await new Auth("camera").check();
			if (authState < 2) return;
			const chooseImageRes = await this.chooseImage(1);
			const uploadImageRes = await this.uploadImage(chooseImageRes[0]);
			this.userData.avatar = uploadImageRes.fullurl;
			this.userData.fileUrl = uploadImageRes.url;
			this.editInfoDisabled = this.userData.avatar == this.userInfo.avatar;
		},

		// 第三方绑定信息
		getThirdOauthInfo() {
			let that = this;
			that.$http("user.thirdOauthInfo").then(res => {
				if (res.code === 1) {
					that.thirdOauthInfo = res.data;
				}
			});
		},

		// 解绑
		unbindThirdOauth(platform, provider) {
			let that = this;
			that.$http("user.unbindThirdOauth", {
				platform,
				provider
			}).then(res => {
				if (res.code === 1) {
					uni.showToast({
						title: res.msg
					});
					that.thirdOauthInfo = null;
					that.getUserInfo();
				}
			});
		},
		// 绑定
		async bindThirdOauth(platform, provider, payload = null) {
			let that = this;
			switch (platform) {
				case "wxOfficialAccount":
					wechat.bind();
					break;
				case "wxMiniProgram":
					await wechat.bind(payload);
					that.getUserInfo();
					break;
				case "App":
					if (provider === "Wechat") {
						await wechat.bind();
					}
					that.getUserInfo();
					that.getThirdOauthInfo();
					break;
			}
		},

		// 退出登录
		confirmLogOut() {
			this.logout();
			this.$Router.back();
		},
		// 修改信息
		editUserInfo() {
			let that = this;
			if (!that.userData.nickname) {
				this.$u.toast("昵称不能为空");
				return false;
			}
			that.$http(
				"user.profile",
				{
					nickname: that.userData.nickname,
					birthday: that.userData.birthday,
					avatar: that.userData.fileUrl
				},
				"保存中..."
			).then(res => {
				if (res.code === 1) {
					that.getUserInfo();
					that.editInfoDisabled = true;
					setTimeout(() => {
						uni.showToast({
						  title: `保存成功`,
						  icon: "none",
						  duration: 2000,
						  success: (res) => {
							setTimeout(() => {
							  uni.hideToast();
							}, 2000)
						  }
						});
					}, 200);
					// that.$u.toast("保存成功");
				}
			});
		},
		// 图片处理-选择图片
		async chooseImage(count = 1) {
			return new Promise((resolve, reject) => {
				uni.chooseImage({
					count: count, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album"], //从相册选择
					success: res => {
						resolve(res.tempFilePaths);
					}
				});
			}).catch(e => {
				console.log(e);
			});
		},
		// 图片处理-上传图片
		async uploadImage(url) {
			const that = this;
			return new Promise((resolve, reject) => {
				that.$u.toast("上传中...");
				uni.uploadFile({
					url: that.$BASE_URL + "/api/common/upload",
					filePath: url,
					name: "file",
					header: { token: uni.getStorageSync("token") },
					success: res => {
						res = JSON.parse(res.data);
						if (res.code === 1) {
							that.$u.toast("上传成功");
							resolve(res.data);
						} else {
							that.$u.toast("上传失败");
						}
					},
					complete: e => {
						uni.hideLoading();
					}
				});
			}).catch(e => {
				console.log(e);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.avatarContainer{
	position: relative;
	text-align: center;
	padding: 50rpx 0 50rpx 0rpx;
	image{
		width: 150rpx;
		height: 150rpx;
		background: #E9E9E9;
		border-radius: 50%;
	}
	.edit{
		position: absolute;
		z-index: 999;
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background: #17C161;
		border-radius: 50%;
		top: 150rpx;
		left: calc(50% + 30rpx);
	}
}
// 基本信息
.btnGroup {
	margin-top: 200rpx;
	.info-title {
		line-height: 60rpx;
		font-size: 28rpx;
		font-weight: 600;
		color: #333333;
	}

	.save-btn {
		height: 98rpx;
		line-height: 98rpx;
		margin:0 24rpx;
		background: #17C161;
		border-radius: 5rpx;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #FFFFFF;
	}

	.dis-btn {
		opacity: 0.5;
	}
}

// 三方
.other-account {
	.head-title {
		line-height: 82rpx;
		font-size: 28rpx;
		font-weight: 600;
		color: #333333;
	}

	.list-img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.account-list {
		background-color: #fff;
		height: 100rpx;
		padding: 0 20rpx;

		.info {
			.avatar {
				width: 38rpx;
				height: 38rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.name {
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
			}
		}

		.bind-box {
			.bind-btn {
				padding: 0 20rpx;
				line-height: 60rpx;
				background: #f5f6f8;
				border-radius: 20rpx;
				color: #999;
			}

			.relieve-btn {
				border-radius: 20rpx;
				padding: 0 20rpx;
				line-height: 60rpx;
				background: rgba(#ff0000, 0.05);
				color: #ff0000;
			}
		}
	}
}

// 个人信息项
.user-list {
	background: #fff;
	height: 119rpx;
	border-bottom: 1rpx solid #EAEAEA;
	padding: 0 24rpx;

	.list-name {
		font-size: 28rpx;
		color: #222222;
		width:200rpx;
	}

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

	.list-val {
		color: #222222;
		font-size: 28rpx;
		// text-align: right;
	}
}

.btn-box {
	margin-top:20rpx;
	.logout-btn {
		width: 100%;
		margin: 0 24rpx;
		height: 98rpx;
		line-height: 98rpx;
		border: 1rpx solid #f54141;
		border-radius: 5rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #f54141;
	}

	.hover-logout-btn {
		width: 100%;
		margin: 0 24rpx;
		height: 98rpx;
		line-height: 98rpx;
		background: #f54141;
		border: 1rpx solid #f54141;
		border-radius: 5rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #ffffff;
	}
}
</style>
