<template>
	<view class="container">
		<!-- 	<view class="user-info-wrap" @click="clickinformation">
			<view style="width: 108rpx; height: 108rpx;border-radius: 50%;">
				<image style="width: 108rpx; height: 108rpx; border-radius: 50%;" v-if="userInfo.headImg"
					:src="userInfo.headImg" mode="aspectFill">
				</image>
				<image style="width: 108rpx; height: 108rpx; border-radius: 50%;" v-else src="@/static/avatar.png"
					mode="aspectFill">
				</image>
			</view>
			<view class="info flex-colum-start">
				<text class="phone">{{userInfo.nickName || '无'}}</text>
			</view>
		</view> -->
		<navseat :opacity='opacity' class="navseat" title='个人中心' :iconshow="false" :titleshow='true'></navseat>
		<view class="boxtop">
			<!-- #ifndef MP-WEIXIN -->
			<view :style="{'height':Topdistance+'px'}"></view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view :style="{'height':HeighT.customBar+HeighT.heightBar+'px'}"></view>
			<!-- #endif -->
			<view class="boxtop_top flex-between">
				<view class="boxtop_topleft">
					<view class="flex-start" v-if="userInfo.nickName" @click="clickinformation">
						<image style="width: 108rpx; height: 108rpx; border-radius: 50%;" v-if="userInfo.headImg"
							:src="userInfo.headImg" mode="aspectFill">
						</image>
						<text>{{userInfo.nickName || '无'}}</text>
					</view>
					<view class="flex-start" v-else @click="loginClick">
						<text>去登录</text>
					</view>
				</view>
				<image style="width: 44rpx; height: 42.26rpx;" @click="clickphone()"
					src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/user/kf.png" mode="aspectFill">
			</view>

			<image @click="memberlist" class="boxtop_botton"
				src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/user/member.png" mode="aspectFit"></image>
		</view>
		<view class="userinfoone" v-if="teblist.length!=0">
			<view class="userinfoonebox">
				<view class="userinfooneboxitem flex-between" @click="clickinfo(item,index)"
					v-for="(item,index) in teblist" :key="index">
					<view class="userinfooneboxitemleft flex-start">
						<image :src="item.shareImg" mode="aspectFill"></image>
						<text>{{item.name}}</text>
					</view>
					<u-icon name="arrow-right" color="#575B66" size="28"></u-icon>
				</view>
			</view>
		</view>
		<listitem :list='list' v-if="list.length!=0"></listitem>
	</view>
</template>

<script>
	import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
	import listitem from "@/components/listitem.vue";
	import navseat from '@/components/navseat.vue'
	export default {
		components: {
			listitem,
			navseat
		},
		data() {
			return {
				titlename: '个人中心',
				opacity: false,
				userInfo: {},
				teblist: [],
				list: [],
				Topdistance: '',
			};
		},
		onLoad() {},
		computed: {
			HeighT() { //手机类型的尺寸
				return this.$store.getters.is_BarHeight
			},
		},
		mounted() {
			setTimeout(() => {
				this.$nextTick(() => {
					this.GetTop()
				});
			}, 1000)
			// 当组件挂载完成后获取距离

		},
		onPageScroll(e) {
			if (e.scrollTop <= 44) { //搜索导航栏
				this.opacity = false
			} else {
				this.opacity = true
			}

		},
		onShow() {
			if (uni.cache.get('token')) {
				this.init_fn()
				this.loginwxuserInfo()
				this.tbPlatformDict()
			}
		},
		methods: {
			clickphone() {
				uni.makePhoneCall({
					phoneNumber: uni.cache.get('userInfo').custPhone
				});
			},
			clickinformation() {
				uni.pro.navigateTo('user/information')
			},
			//获取元素距离顶部的距离
			GetTop() {
				this.$u.getRect('.content').then(res => {
					console.log(1111, res)
					this.Topdistance = res.height //滚动距离
				})
			},
			memberlist() {
				if (uni.cache.get('token')) {
					uni.pro.navigateTo('member/list')
				} else {
					this.loginClick()
				}
			},
			//退出登录
			boxClick() {
				uni.showModal({
					title: '注意',
					content: '确定要退出登录吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								await this.api.loginOut();
							} catch (e) {
								//TODO handle the exception
							}
							uni.cache.clear();
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}
					}
				});
			},
			loginClick() {
				uni.cache.clear();
				uni.reLaunch({
					url: '/pages/login/login'
				});
			},
			// 精选推荐
			// 下面初始数据
			init_fn() {
				this.list = []
				this.form = {
					address: uni.cache.get('getLocationstorage').address, //地址
					lng: uni.cache.get('getLocationstorage').lng,
					lat: uni.cache.get('getLocationstorage').lat,
					type: '', //品类
					orderBy: 5, //0.今日上新 1.离我最近 2.销量优先 3.价格优先 4.热榜推荐
					other: '', //附近1KM 1选中 0不选中
					page: 1, //页数
					size: 10, //页容量
					dateType: '',
					status: 'loadmore'
				}
				this.onLoadlist()
			},
			async onLoadlist() {
				try {
					let res = await this.api.indexlist(this.form)
					if (res.data.pages < this.form.page) {
						this.form.status = 'nomore'
						return false;
					} else {
						this.form.status = 'loading';
						this.form.page = ++this.form.page;
						setTimeout(() => {
							this.list = [...this.list, ...res.data.list];
							this.form.status = 'loading';
							if (res.data.pageNum == res.data.pages) {
								this.form.status = 'nomore';
							} else {
								this.form.status = 'loading';
							}
						}, 500)
					}
				} catch (e) {}
			},
			clickinfo(item, index) {
				console.log(item, '调试121')
				switch (item.jumpType) {
					case 'scan': //特殊处理点击
						switch (item.value) {
							case 'loginOut':
								this.boxClick()
								break;
						}
						break;
					case 'scan_applet':
						uni.navigateToMiniProgram(JSON.parse(item.value))
						break
					case 'relative': //内部页面
						uni.pro.navigateTo(item.absUrl)
						break;
					case 'absolute': //外链url
						uni.navigateTo({
							url: `/pages/webview/webview?url=${item.menuUrl}`
						});
						break;
				}
			},
			async loginwxuserInfo() {
				let res = await this.api.loginwxuserInfo({
					userId: uni.cache.get('userInfo').id
				})
				if (res.code == 0) {
					uni.cache.set('userInfo', res.data);
					this.userInfo = uni.cache.get('userInfo')
				}
			},
			async tbPlatformDict() {
				let res = await this.api.tbPlatformDict({
					type: 'ownMenu'
				})
				// console.log(res)
				if (res.code == 0) {
					this.teblist = res.data
				}
			},
			// / 更换头像
			onChooseAvatar(e) {
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				console.log(e.detail.avatarUrl)
				let file = e.detail.avatarUrl;
				uploadImage(file, 'avatar',
					result => {
						//将上传后的图片以对象（官方要求的格式）的形式存入uni-file-picker的value值imageValue（imageValue值的结构为数组包对象）用于图片回显
						// let objAge = {
						// 	'url': result,
						// 	'extname': 'png',
						// 	'name': 'imgss.png'
						// };
						// this.userlist.avatar.push(objAge)
						this.userInfo.avatar = result
						console.log(this.userInfo.avatar)
						uni.hideLoading()
					}, result => {
						uni.hideLoading()
					})
			},
			orderHandle(type) {
				this.useStorage.set('orderType', type);
				uni.switchTab({
					url: '/pages/order/order'
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.user-info-wrap {
		position: relative;
		padding: 48rpx 32rpx 88rpx 32rpx;
		display: flex;
		align-items: center;
		width: 750rpx;
		background: #FFD158;
		border-radius: 0rpx 0rpx 40rpx 0rpx;

		.info {
			flex: 1;
			padding-left: $paddingSize;
			display: flex;
			flex-direction: column;

			.name {
				input {
					text-align: left;
					font-size: 32upx;
				}
			}

			.phone {
				padding-top: 8upx;
			}
		}
	}

	.user-info-wrap::after {
		position: absolute;
		content: '';
		bottom: 40rpx;
		right: 0;
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background-image: radial-gradient(40rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #fff 40rpx);
	}

	.boxtop {
		width: 100%;
		height: 542rpx;
		background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/user/user.png) no-repeat;
		background-size: 100% 100%;
		position: relative;

		.boxtop_top {
			padding: 0 32rpx;
			margin-top: 52rpx;

			.boxtop_topleft {
				.flex-start {
					text {
						margin-left: 18rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 36rpx;
						color: #333333;
					}
				}
			}
		}

		.boxtop_botton {
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translatex(-50%);
			width: 654rpx;
			height: 160rpx;
		}
	}

	.userinfoone {
		position: relative;
		padding: 48rpx 28rpx;
		width: 100%;
		// top: -40rpx;
		background: #F6F6F6;
		// border-radius: 40rpx 0 0rpx 0rpx;

		.userinfoonebox {
			padding: 32rpx 20rpx 32rpx 52rpx;
			border-radius: 22rpx;
			background: #FFFFFF;
			width: 100%;

			.userinfooneboxitem {
				width: 100%;
				margin-top: 32rpx;

				.userinfooneboxitemleft {
					image {
						width: 41.33rpx;
						height: 36.9rpx;
					}

					text {
						margin-left: 32rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}
				}
			}

			.userinfooneboxitem:nth-child(1) {
				margin-top: 0;
			}
		}
	}
</style>