<template>
	<page-meta :page-style="themeColor"></page-meta>
	<div>
		<div class="view">
			<div class="card">
				<div class="row1" style="margin: 10rpx 0rpx !important;">
					<div class="left">用户头像</div>
					<div class="right" @click="show = true">
						<div class="avatar">
							<image :src="$util.img(img.length>0?img:userInfo.headimg)" mode="aspectFill"></image>
						</div>
					</div>
				</div>
				<u-line></u-line>
				<div class="row">
					<div class="left">用户账号</div>
					<div class="right">
						{{userInfo.mobile}}
					</div>
				</div>
				<u-line></u-line>

				<div class="row">
					<div class="left">客户昵称</div>
					<div class="right">
						<input type="text" v-model="userInfo.nickname" @blur="blur" />
					</div>
				</div>
				<u-line></u-line>

				<div class="row">
					<div class="left">联系人</div>
					<div class="right"><input type="text" v-model="storeInfo.contacts" /></div>
				</div>
				<u-line></u-line>

				<div class="row">
					<div class="left">电话号码</div>
					<div class="right">
						<!-- {{nickname}} -->
						<input type="number" v-model="storeInfo.phone" />
					</div>
				</div>

				<u-line></u-line>
				<div class="row">
					<div class="left">电子邮箱</div>
					<div class="right">
						<input type="text" v-model="storeInfo.email" placeholder="请输入" />
					</div>
				</div>

				<!-- <u-line></u-line> -->
				<!-- <div class="row">
					<div class="left">联系地址</div>
					<div class="right1">
						<u--textarea border="none"
							v-model="address"
							placeholder="请输入内容"
							autoHeight
						></u--textarea>
					</div>
				</div> -->
			</div>

			<u-overlay :show="show" @click="show = false">
				<div class="downloadBtn" @click="upload()">上传头像</div>
				<div class="cancel">取消</div>
			</u-overlay>
		</div>
		<view class="btn" style="padding-left:-30rpx; ">
			<!-- #ifdef APP-PLUS -->
			<view class="bindWX" @click="binWX" shape="circle">绑定微信账号</view>
			<!-- #endif 	 -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="bindWX" @click="binMPWX" shape="circle">绑定微信账号</view>
			<!-- #endif 	 -->
			<view type="primary" class="add" @click="saveAddress" shape="circle">确定</view>
		</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				storeInfo: {},
				userInfo: {},
				show: false,
				myStore: uni.getStorageSync('myStore'),
				img: ''
			};
		},
		onShow() {
			this.getUserInfo();
			this.getStoreInfo();
		},
		methods: {
			toAccountDetail() {
				uni.navigateTo({
					url: '/pages_tool/member/account_info'
				});
			},
			getStoreInfo() {
				this.$api.sendRequest({
					url: '/api/member/getStoreInfo',
					data: {
						id: this.myStore.id
					},
					success: res => {
						this.storeInfo = res.data;
						console.log(res.data);
					}
				});
			},
			getUserInfo() {
				this.$api.sendRequest({
					url: '/api/member/info',
					data: {
						token: uni.getStorageSync('token')
					},
					success: res => {
						this.userInfo = res.data;
					}
				});
			},

			//修改头像
			upload(type, size = 1) {
				this.$util.upload(
					size, {
						path: 'headimg'
					},
					res => {

						this.img = res[0];

					}
				);
			},
			blur() {

			},
			binWX() {
				uni.login({
					provider: 'weixin',
					onlyAuthorize: false, // 微信登录仅请求授权认证
					success: res => {
						let that = this;
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								let { userInfo } = { ...infoRes }
								console.log(userInfo);
								that.$api.sendRequest({
									url: '/api/member/appBindWx',
									data: {
										openid: userInfo.openId,
										unionid: userInfo.unionId,
										nickname: userInfo.nickName,
										headimg: userInfo.avatarUrl
									},
									success: WXres => {
										that.$util.showToast({
											title: WXres.message
										});
										console.log(WXres, `appBindWx`);
									},
									complete: WXr => {
										console.log(WXr);

									}
								})
							}
						});
					},
					fail: function(err) {
						console.log(err);
						// 登录授权失败
						// err.code是错误码
					},
					complete: r => {
						console.log(r);
					}
				});
			},
			binMPWX() {
				uni.login({
					provider: 'weixin',
					onlyAuthorize: false, // 微信登录仅请求授权认证
					success: res => {
						console.log(res.code);
						let code = res.code;
						let that = this;
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								console.log(infoRes);
								let { userInfo } = { ...infoRes }
								that.$api.sendRequest({
									url: '/api/member/wechatBindWx',
									data: {
										code,
										nickname: userInfo.nickName,
										headimg: userInfo.avatarUrl
									},
									success: WXres => {
										console.log(WXres, `wechatBindWx`);
										that.$util.showToast({
											title: WXres.message
										});
									},
									complete: WXr => {
										console.log(WXr);

									}
								})
							}
						})
					}
				})
			},
			saveAddress() {
				this.$api.sendRequest({
					url: '/api/member/editStoreOther',
					data: {
						id: this.storeInfo.id,
						contacts: this.storeInfo.contacts,
						phone: this.storeInfo.phone,
						email: this.storeInfo.email
					},
					success: res => {
						this.$util.showToast({
							title: res.message
						});
					}
				});
				this.$api.sendRequest({
					url: '/api/member/modifynickname',
					data: {
						token: uni.getStorageSync('token'),
						nickname: this.userInfo.nickname
					},
					success: res => {

					}
				});
				this.$api.sendRequest({
					url: '/api/member/modifyheadimg',
					data: {
						token: uni.getStorageSync('token'),
						headimg: this.img
					},
					success: res => {

					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.view {
		padding: 30rpx;

		.card {
			box-sizing: border-box;
			background: #ffffff;
			border-radius: 24rpx;
			padding: 10rpx 30rpx;

			.row1 {
				padding: 10rpx 0 10rpx 0;
				display: flex;

				.left {
					align-self: center;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					color: #333333;
				}

				.right {
					align-self: center;
					flex: 1;
					text-align: right;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					color: #333333;

					.avatar {
						image {
							width: 64rpx;
							height: 64rpx;
							border-radius: 50%;
						}
					}

					::v-deep {
						.u-input--radius {
							background: #fff;
							border: 0;
						}

						.uni-input-placeholder {
							text-align: right !important;
						}
					}
				}
			}

			.row {
				padding: 30rpx 0 30rpx 0;
				display: flex;

				.left {
					width: 120rpx;
					margin-right: 30rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					color: #333333;
				}

				.right {
					flex: 1;
					text-align: right;
					// float: right;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					color: #333333;
					margin-left: 30rpx;
				}

				.right1 {
					flex: 1;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					color: #333333;
					margin-left: 30rpx;
				}
			}
		}

		.downloadBtn {
			width: calc(100% - 60rpx);
			height: 100rpx;
			position: absolute;
			left: 30rpx;
			bottom: 200rpx;
			background: #ffffff;
			border-radius: 24rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: $base-color;
		}

		.cancel {
			width: calc(100% - 60rpx);
			height: 100rpx;
			position: absolute;
			left: 30rpx;
			bottom: 70rpx;
			background: #ffffff;
			border-radius: 24rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: $base-color;
		}
	}

	.btn {
		width: 100%;
		position: absolute;
		bottom: 30px;
		margin: 0 auto;
		left: 0;
		right: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);

		/*兼容 IOS>11.2*/
		.bindWX {
			margin: 0 auto;
			margin-bottom: 30rpx;
			width: 80%;

			border-radius: 50rpx;
			color: #fff;
			background-color: #5ac725;
			border-color: #5ac725;
			border-width: 1px;
			border-style: solid;
			text-align: center;
			padding: 10rpx 20rpx
		}

		.add {
			border-radius: 50rpx;
			width: 80%;
			margin: 0 auto;
			color: #fff;
			background-color: #3c9cff;
			border-color: #3c9cff;
			border-width: 1px;
			border-style: solid;
			text-align: center;
			padding: 10rpx 20rpx
		}
	}
</style>