<template>
	<view id="page">
		<!-- 顶部 -->
		<view class="top">
			<NavBar ref="nav" navTitle=" " :showIcon="false" :start-change-height="page.startHeight"
				:end-change-height="page.endHeight"></NavBar>
			<!-- 用户信息 -->
			<view class="userinfo" @click="showDiaLog">
				<!-- 头像 -->
				<image class="head-img" :src="userInfo.photo"></image>
				<view class="name-mob" style="flex: 1;">
					<!-- 昵称 -->
					<text>{{userInfo.nick}}</text>
					<!-- 手机 -->
					<text style="font-size:14px;">{{userInfo.mobile}}</text>
				</view>
				<image src="../../static/more_white.png"
					style="width: 30px;height: 30px;margin-right: 10px;flex-shrink: 0;" :rotate="0"></image>
			</view>
		</view>
		<view class="view">
			<!-- 滚动视图 -->
			<scroll-view scroll-y="true" class="scroll-view" bindscrolltoupper="upper" bindscrolltolower="lower"
				bindscroll="scroll">
				<!-- 预约记录 -->
				<view class="icon-cow">
					<text class="title">预约记录</text>
					<view class="group">
						<!-- 待提菜 -->
						<view class="icon-name" @click="itemClick('待提菜')">
							<view class="icon">
								<image class="img" src="../../static/img/record-query/waiting_extraction.png"
									mode="aspectFill"></image>
								<!-- <view v-if="data.count>0" class="count">{{data.count}}</view> -->
							</view>
							<text class="name">待提菜</text>
						</view>
						<!-- 已提菜 -->
						<view class="icon-name" @click="itemClick('已提菜')">
							<view class="icon">
								<image class="img" src="../../static/img/record-query/extracted.png" mode="aspectFill">
								</image>
							</view>
							<text class="name">已提菜</text>
						</view>
						<view class="icon-name"></view>
						<view class="icon-name"></view>
					</view>

				</view>
				<!-- 订单记录 -->
				<view class="icon-cow">
					<text class="title">订单记录</text>
					<view class="group">
						<view class="icon-name" @click="itemClick('我的订单')">
							<view class="icon">
								<image class="img" src="../../static/img/record-query/obligation.png" mode="aspectFill">
								</image>
								<!-- <view class="count">{{data.count}}</view> -->
							</view>
							<text class="name">我的订单</text>
						</view>
						<!-- <view class="icon-name" @click="itemClick('已付款')">
							<view class="icon">
								<image class="img" src="../../static/img/record-query/paid.png" mode="aspectFill">
								</image>
							</view>
							<text class="name">已付款</text>
						</view> -->
						<view class="icon-name"></view>
						<view class="icon-name"></view>
						<view class="icon-name"></view>
					</view>
				</view>
				<!-- 转赠记录 -->
				<view class="icon-cow">
					<text class="title">转赠记录</text>
					<view class="group">
						<!-- 赠与我的 -->
						<view class="icon-name" @click="itemClick('赠与我的')">
							<view class="icon">
								<image class="img" src="../../static/img/record-query/gifted_to_me.png"
									mode="aspectFill"></image>
							</view>
							<text class="name">赠与我的</text>
						</view>
						<!-- 我的转赠 -->
						<view class="icon-name" @click="itemClick('我的转赠')">
							<view class="icon">
								<image class="img" src="../../static/img/record-query/my_gift.png" mode="aspectFill">
								</image>
							</view>
							<text class="name">我的转赠</text>
						</view>
						<view class="icon-name"></view>
						<view class="icon-name"></view>
					</view>
				</view>
				<!-- 推荐有礼 -->
				<view style="display: flex;flex-direction: column; border-radius: 10px;background: #fff;
					 padding: 10px; margin-top: 10px;width: 100%;box-sizing: border-box;">

					<view style="display: flex;flex-direction: row;justify-content: space-between;width: 100%;">
						<view style="display: flex;flex-direction: row;align-items: center;flex: 1;">
							<text
								style="font-size: 15px;color: #101010;font-weight: 600;font-family: sans-serif;">推荐有礼</text>
							<image src="../../static/share_gift.png"
								style="margin-left: 5px; width: 20px;height: 20px;"></image>
						</view>

						<!-- <view style="display: flex;flex-direction: row;align-items: center;" @click="">
							<text style="margin-right: 5px;color: #FF9900;font-size: 12px;">马上邀请</text>
							<image src="../../static/right_icon.png" style="width: 15px;height: 15px;"></image>
						</view> -->

						<button open-type="share" class='sharebtn'>
							<view
								style="display: flex;flex-direction: row;align-items: center;justify-content: flex-end;">
								<text style="margin-right: 5px;color: #FF9900;font-size: 12px;">马上邀请</text>
								<image src="../../static/right_icon.png" style="width: 15px;height: 15px;"></image>
							</view>
						</button>

					</view>

					<text style="font-size: 12px;color: #4B4B4B; margin-top: 8px;">邀请新朋友后，您将获得“蔬菜品鉴礼包”。</text>

					<!-- <view style="display: flex;flex-direction: row;align-items: center; ">

						<image :src="recommend.iconUrl" style="width: 35%;height: 150px; border-radius: 10px;"
							mode="aspectFill">

						</image>

						<view style="display: flex;flex-direction: column; margin-left: 20px; ">
							<view v-for="(child,pos) in recommend.recordList" :key="pos"
								style="display: flex;flex-direction: column;">

								<text style="color: #424242; font-size: 12px;line-height: 20px;">* {{child.content}}</text>

							</view>
						</view>


					</view> -->


				</view>
				<!-- </loading-state> -->
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: {
					startHeight: 0,
					endHeight: 0
				},
				data: {
					count: "1",
				},
				userInfo: {
					nick: "",
					mobile: "绑定手机号",
					photo: "../../static/userHead.png"
				},
				dialogInfo: {
					url: "../../static/userHead.png",
					name: "",
					mobile: ""
				},
				headImage: "",
				recommend: {},
				banKInfo: null
			}
		},
		onShow() {
			if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) {
				this.$mp.page.getTabBar().setData({
					selected: 2
				})

			}
			this.getUserInfo()
			// this.myRecommend()
		},
		onLoad(options) {
			// this.request()
			let info = uni.getSystemInfoSync();

			this.page.startHeight = info.windowWidth * 0.6
			this.page.endHeight = info.windowWidth * 0.8
		},
		onPageScroll(res) {
			// 渐变
			this.$refs.nav.defaultColorBgAlpha(res)
		},
		methods: {
			getUserInfo() {
				let _this = this
				_this.$api.getUserInfo(getApp().globalData.sid).then((resp) => {

					_this.userInfo = {
						nick: resp.nick,
						mobile: resp.mobile,
						photo: resp.photo
					}

					_this.headImage = resp.data.photo


				}).catch(e => {

				})

			},
			myRecommend() {
				let _this = this
				_this.$api.myRecommend(getApp().globalData.sid).then((resp) => {

					_this.recommend = resp

				}).catch(e => {

				})
			},
			showDiaLog() {
				uni.navigateTo({
					url: '/pages/me/base_info'
				})
			},
			onShareAppMessage: function(res) {
				// console.log("res", res)
				// console.log("data", res.target.dataset)
				// var data = res.target.dataset.info
				
				// this.shareCard()
				
				// // ①
				// let shareData = JSON.stringify({
				// 	// params: {
				// 	// 	code: data.code,
				// 	// 	codeKey: data.codeKey,
				// 	// 	customerSid: ''
				// 	// },
				// 	// functionName: 'bindCard',
				// 	// url: '/pages/detail/detail_affeection?sid=' + data.sid

				// 	url: '/pages/home/myCellar?shareSid=' + getApp().globalData.sid,
				// 	functionName: 'share'
				// })
				// // 转码传输
				// let value = encodeURIComponent(shareData)

				// return {
				// 	title: '汇融惠享-云菜窖',
				// 	// ②
				// 	path: '/pages/login/login?data=' + value,
				// 	imageUrl: 'https://supervise.yxtsoft.com/lpk/image/share_invite.png', //自定义图片路径，显示图片长宽比是 5:4。
				// 	success: function(res) {
				// 		console.log('aaaa', "分享成功")
				// 	},
				// 	fail: function(res) {
				// 		// 转发失败
				// 		console.log('aaaa', "用户点击了取消")
				// 	}
				// }
				
				
				let _this = this
				const promise = new Promise(resolve => {
					// 模拟网络请求
					setTimeout(() => {
				
						var params ={
							customerSid:getApp().globalData.sid
						}
									
						_this.$api.recommendNewUsers(params).then((resp) => {
							
				
							let shareData = JSON.stringify({
								// params: {
								// 	code: resp.transferCode,
								// 	codeKey: resp.sid
								// },
								// functionName: 'bindCard',
								// url: '/pages/bind/bind_cloudCard?code=' + resp
								// 	.transferCode + "&codeKey=" + resp.sid
				
								url: '/pages/home/myCellar?shareSid=' + getApp().globalData.sid+"&orderSid=" + resp.sid,
								functionName: 'share'
							})
							// 转码传输
							let value = encodeURIComponent(shareData)
				
							resolve({
								title: '汇融惠享-云菜窖',
								// ②
								path: '/pages/login/login?data=' + value,
								imageUrl: 'https://supervise.yxtsoft.com/lpk/image/share_invite.png', //自定义图片路径，显示图片长宽比是 5:4。
				
							})
				
						}).catch(e => {
							_this.shortToast('发生错误,请稍后再试.')
							return
						})
				
					}, 0)
				})
				
				return promise
				
				
			},
			shareCard() {
				let _this = this
				
				var params ={
					customerSid:getApp().globalData.sid
				}
			
				_this.$api.recommendNewUsers(params).then((resp) => {
					
			
				}).catch(e => {})
			},
			
			itemClick(type) {

				switch (type) {
					case "待提菜":
						uni.navigateTo({
							url: '/pages/records/reservationRecords',
						})
						break;
					case "已提菜":
						uni.navigateTo({
							url: '/pages/records/reservationRecords2',
						})
						break;
					case "我的订单":
						uni.navigateTo({
							url: '/pages/records/orderRecords',
						})
						
						// uni.navigateTo({
						// 	url:"/pages/records/orderDetail"
						// })
						
						
						break;
					case "待付款":

						break;
					case "已付款":

						break;
					case "赠与我的":
						uni.navigateTo({
							url: '/pages/records/transferRecords2',
						})
						break;
					case "我的转赠":
						uni.navigateTo({
							url: '/pages/records/transferRecords',
						})
						break;
				}
			}
		}
	}
</script>

<style>
	#page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: -webkit-linear-gradient(left, #FEA65F, #FB9440);
		box-sizing: border-box;
	}

	/* 顶部 */
	.top {
		width: 100vw;
		/* height: 126.66vw; */
		height: 65vw;
		/* 加载背景图 */
		background-image: url(https://supervise.yxtsoft.com/lpk/image/my_bj.png);
		/* 让背景图基于容器大小伸缩 */
		background-size: 100% 100%;
	}

	/* 顶部-用户信息 */
	.top .userinfo {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 25vw;
		margin-left: 8vw;
	}

	/* 顶部-用户信息-头像 */
	.top .userinfo .head-img {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}

	/* 顶部-用户信息-名称手机 */
	.top .userinfo .name-mob {
		display: flex;
		flex-direction: column;
		margin-left: 10px;
	}

	/* 顶部-用户信息-名称手机-文本样式 */
	.top .userinfo .name-mob text {
		font-size: 16px;
		color: #fff;
	}

	/* 视图 */
	.view {
		background: #F7F7F7;
		flex-flow: 1;
		height: calc(100vh - 50vw - 48px);
		width: 100%;
		margin-top: -18vw;
		border-radius: 25px;
	}

	/* 滚动视图 */
	.scroll-view {
		height: 100%;
		width: 100%;
		padding: 15px;
		border-radius: 25px;
		box-sizing: border-box;
	}

	/* 图标显示行 */
	.icon-cow {
		display: flex;
		flex-direction: column;
		border-radius: 10px;
		background: #fff;
		padding: 12px;
		margin-bottom: 10px
	}

	/* 图标显示行-标题 */
	.icon-cow .title {
		font-size: 15px;
		color: #101010;
		font-weight: 600;
		font-family: sans-serif;
	}

	/* 图标显示行-图标群 */
	.icon-cow .group {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top: 10px;
	}

	/* 图标显示行-图标群-图标和名称*/
	.icon-cow .group .icon-name {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	/* 图标显示行-图标群-图标和名称-图标*/
	.icon-cow .group .icon-name .icon {
		position: relative;
		width: 35px;
		height: 35px;
	}

	/* 图标显示行-图标群-图标和名称-图标-图片*/
	.icon-cow .group .icon-name .icon .img {
		width: 28px;
		height: 28px;
		margin-left: 5px;
		margin-top: 5px;
	}

	/* 图标显示行-图标群-图标和名称-图标-数量*/
	.icon-cow .group .icon-name .icon .count {
		border-radius: 50%;
		text-align: center;
		background: #f00;
		color: #fff;
		font-size: 8px;
		position: absolute;
		top: 2px;
		right: 0px;
		padding: 2px 5px;
		width: auto;
	}

	/* 图标显示行-图标群-图标和名称-图标名称*/
	.icon-cow .group .icon-name .name {
		font-size: 13px;
		color: #101010;
		margin-top: 5px;
	}


	.sharebtn {
		margin-right: -10px;
		background: #fff;
		/* font-size: 12px;
		color: #fff;
		width: 30vw;
		border-radius: 20px; */
	}


	.sharebtn::after {
		border: none;
	}
</style>