<template>
	<view class="wrap">
		<image class="bg" :src="require('@/static/me-bg.png')" mode="widthFix"></image>
		<view>
			<u-navbar :is-back="false" :is-fixed='false' title-color="#f6d9b6" :border-bottom="false" title="我的"
				:background="{'background':'transparent'}">
			</u-navbar>
		</view>

		<view class="me">
			<view class="me-avatar" @click="getInitUser(true)">
				<view>
					<image :src="info.headimgurl?info.headimgurl:headReplace" mode=""></image>
					<view class="">
						{{info.nickname?info.nickname:''}}
					</view>
				</view>
			</view>
			<view class="me-list">
				<view class="me-list-item" v-for="item in list" @click="toUrl(item)">
					<block v-if="item.id==='feedback'">
						<button hover-class="none" open-type="feedback">
							<view class="me-list-item-left">
								<view class="">
									<image :src="item.icon"></image>
								</view>
								<view>{{item.title}}</view>
							</view>
							<view class="">
								<u-icon name="arrow-right" size="40" color="#e0e0e0"></u-icon>
							</view>
						</button>
					</block>
					<block v-else-if="item.id==='search'">
							<view class="me-list-item-left">
								<view class="">
									<u-icon :name="item.icon" size="40" color="#ba8b45"></u-icon>
								</view>
								<view>{{item.title}}</view>
							</view>
							<view class="">
								<u-icon name="arrow-right" size="40" color="#e0e0e0"></u-icon>
							</view>
					</block>
					<block v-else>
						<view class="me-list-item-left">
							<view class="">
								<image :src="item.icon"></image>
								<!-- <u-icon :name="item.icon" size="40"></u-icon> -->
							</view>
							<view>{{item.title}}</view>
						</view>
						<view class="">
							<u-icon name="arrow-right" size="40" color="#e0e0e0"></u-icon>
						</view>
					</block>

				</view>
			</view>
		</view>
		<u-popup v-model="showPhone" mode="bottom" :mask-close-able="false">
			<view class="login-btn" style="padding:60rpx">
				<button class="login-btn-btn" open-type="getPhoneNumber" @getphonenumber="getUserWxPhone">授权手机号</button>
				<view style="text-align: center;padding: 10px;font-size: 36rpx;color: rgba(0,0,0,0.5);" @click="showPhone=false">取消</view>
			</view>
		</u-popup>
		<!-- 弹出头像 昵称12 -->
		<u-popup v-model="showform" mode="bottom" :mask-close-able="maskClose">
			<view class="login-form">
				<view>
					<span>头像：</span>
					<view style="border:none">
						<button open-type="chooseAvatar" @chooseavatar='onChooseAvatar' style="padding: 0;margin: 0;">
							<image :src="imgurl" mode=""></image>
						</button>
					</view>
				</view>
				<view>
					<span>姓名：</span>
					<view>
						<input type="nickname" @blur="blurname" :placeholderStyle="'color:#999;font-size:30rpx'"
							v-model="form.nickname" placeholder="请输入姓名" :border="false" shape="circle"
							clearable></input>
					</view>
				</view>
				<view>
					<span>电话：</span>
					<view>
						<input disabled :placeholderStyle="'color:#999;font-size:30rpx'" v-model="form.mobile"
							placeholder="请输入手机号" :border="false" shape="circle" clearable></input>
					</view>
				</view>
			</view>
			<view class="login-btn">
				<view class="login-btn-btn" @click="submit">提 交</view>
			</view>
		</u-popup>
		<tabbar :currentPage="2"></tabbar>
	</view>
</template>

<script>
	import {
		ROOTPATH as baseUrl
	} from "@/common/config.js"
	import {
		isNull,
		toast,
		shareInfo
	} from "@/common/util.js"
	import tabbar from '@/components/tabbar/tabbar.vue';
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				navBarTop: 0,
				showPhone: false,
				info: {},
				headReplace: require('@/static/logo-xietaitai.png'),
				showform: false,
				maskClose: false,
				imgurl: '',
				myToken:'',
				form: {
					nickname: '',
					mobile: ''
				},
				list: [{
						title: '我的订单',
						icon:  require('@/static/me-icon1.png'),
						url: '/packages/myorder/myorder',
					}, {
						title: '我的积分',
						icon: require('@/static/me-icon2.png'),
						url: '/packages/my/score',
					},
					{
						id:'search',
						title: '卡劵查询',
						icon:'search',
						url: '/packages/card/index',
					},
					{
						title: '我的地址',
						icon: require('@/static/me-icon3.png'),
						url: '/packages/my/address',
					}, {
						id: 'feedback',
						title: '意见反馈',
						icon: require('@/static/me-icon4.png'),
						// url: '/packages/my/feedback',
					}
				]
			}
		},
		onShareAppMessage() {
			return shareInfo
		},
		onShareTimeline() {
			return shareInfo
		},
		onLoad() {
			const MenuButton = uni.getMenuButtonBoundingClientRect()
			this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
			this.myToken = uni.getStorageSync('xtt_lifeData3')?uni.getStorageSync('xtt_lifeData3').vuex_token:''
		},
		onShow() {
			// this.getInitUser()
		},
		methods: {
			onChooseAvatar(e) {
				console.log("e", e)
				uni.uploadFile({
					url: baseUrl + "/api/mobile/user/upload",
					filePath: e.detail.avatarUrl,
					name: 'file',
					header: {
						'Authorization': `Bearer ${this.myToken}`
					},
					success: (res) => {
						uni.showToast({
							title: '上传成功',
							duration: 1000
						})

						this.imgurl = JSON.parse(res.data).url
						this.form.headimgurl = this.imgurl
					},
					fail(res) {
						uni.showToast({
							title: '上传失败',
							duration: 1000
						})
					}
				})
			},
			// 获取昵称
			blurname(e) {
				console.log(e)
				if (e) {
					this.form.nickname = e.detail.value
				}

			},
			getUserWxPhone(res) {
				if (!res.detail.code) {
					this.showPhone = false
					return
				}
				this.$u.api.getUserMobile({
					code: res.detail.code,
					iv: res.detail.iv,
					encryptedData: res.detail.encryptedData
				}).then(res => {
					this.form.mobile = res.mobile
					this.showPhone = false
					this.showform = true
				})
			},
			// open(){
			// 	if(!this.showPhone){
			// 		this.showform = true
			// 		this.maskClose = true
			// 	}
			// },
			async getInitUser(open) {
				const res = await this.$u.api.user()
				this.$u.vuex('vuex_user', res.user)
				this.form = res.user
				this.imgurl = res.user.headimgurl ? res.user.headimgurl : ''
				this.info = this.$u.deepClone(res.user);
				if (isNull(res.user.mobile)) {
					this.showPhone = true
				}else{
					if(open){
						this.showform = true
						this.maskClose = true
					}
				}
			},
			submit() {
				if (isNull(this.form.nickname)) {
					toast("请填写所有信息")
					return
				}
				this.$u.api.saveUser(this.form).then(res => {
					toast('更新成功')
					this.showform = false
					this.getInitUser()
				})
			},
			toUrl(item) {
				if (item.url) {
					uni.navigateTo({
						url: item.url
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.wrap {
		width: 100vw;
		height: 100vh;

		overflow: scroll;

		.bg {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
		}

		.me {
			position: relative;
			// height: 100vh;
			// overflow: scroll;
			top: 0;
			padding-bottom: 140rpx;
			padding-top: 30rpx;

			&-avatar {
				background: url(../../static/me-ibg.png) no-repeat left center;
				background-size: 100% 100%;
				width: 711rpx;
				height: 377rpx;
				text-align: center;
				color: #000;
				font-size: 36rpx;
				margin: 0 auto;
				margin-left: 34rpx;
				display: flex;
				align-items: center;
				padding-left: 70rpx;

				>view {
					display: flex;
					align-items: center;
				}

				image {
					border: 10rpx solid #ffecdd;
					width: 166rpx;
					height: 166rpx;
					border-radius: 166rpx;
					margin-bottom: 20rpx;
					margin-right:30rpx;
				}
			}

			&-list {
				border-radius: 15rpx;
				background-color: #fff;
				box-shadow: -2px -3rpx 12px rgba(0, 0, 0, 0.1);
				margin: 70rpx 45rpx;
				padding: 30rpx;
				min-height: 750rpx;
				margin-top:20rpx;
				&-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 35rpx 10rpx;
					font-size: 28rpx;
					color: #666666;
					border-bottom: 1px solid #e0e0e0;

					button {
						padding: 0;
						margin: 0;
						border: 1px solid transparent;
						width: 100%;
						background: transparent;
						display: flex;
						justify-content: space-between;
						font-size: 28rpx;
						color: #666666;
						line-height: 1.5;
					}

					button::after {
						border: none;
					}

					& image {

						vertical-align: middle;
						margin: 0 auto
					}

					&-left {
						display: flex;
						align-items: center;

						>view {
							&:first-child {
								// width: 76rpx;
								text-align: center;
								// margin-right: 20rpx
								image{
									width:47rpx;
									height:51rpx;
									margin-right:20rpx
								}
							}


						}

						u-icon {
							margin-right: 20rpx;

						}
					}
				}
			}
		}

		.login {
			&-form {
				padding: 20rpx 60rpx;
				margin-top: 20rpx;
				padding-bottom: 120rpx;

				>view {
					margin-bottom: 30rpx;
					background-color: #fff;
					padding: 20rpx 40rpx;
					border-radius: 20rpx;
					display: flex;
					align-items: center;

					span {
						width: 120rpx;
						text-align: right;
					}

					button {
						width: 100rpx;
						height: 100rpx;

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

					>view {
						border: 1px solid #999;
						border-radius: 10rpx;
						display: flex;
						width: calc(100% - 120rpx);
						padding: 10rpx 20rpx;

						input {
							width: 100%;
						}
					}

				}
			}

			&-btn {
				padding: 30rpx 60rpx;
				padding-top: 0;

				&-btn {
					box-shadow: 0.5px 3px 9px 0px rgba(235, 107, 85, 0.3);
					background: #ba8b45;
					border-radius: 44rpx;
					text-align: center;
					height: 88rpx;
					color: #fff;
					line-height: 88rpx;
					font-size: 34rpx;
				}

			}
		}
	}
</style>