<template>
	<view class="app">
		<view class="user" v-if="appPersonallist">
			<image v-if="appPersonallist.headPictureUrl" class="img" :src="baseurl+appPersonallist.headPictureUrl"
				mode=""></image>
			<image class="img" v-else src="../../static/user.png" mode=""></image>
			<image class="bjimg" :src="bjimg" mode=""></image>
			<view class="phone" v-if="appPersonallist.patientName">
				{{appPersonallist.patientName}}
			</view>
			<view class="nickname" style="top:200rpx">
				<span style='padding-right: 10rpx;' v-if="appPersonallist.age!=null&&appPersonallist.age>=0">
					{{appPersonallist.age}}
				</span>
				<span style='padding-right: 30rpx;' v-if="appPersonallist.age!=null&&appPersonallist.age>=0">
					岁
				</span>
				{{appPersonallist.sex=='MALE'?'男':''}}
				{{appPersonallist.sex=='FEMALE'?'女':''}}
				</span>
			</view>
			<view class="nickname">
				{{appPersonallist.phone}}
			</view>
			<view class="modify" @tap='updatainfo()'>
				修改信息
				<image src="../../static/xg.png" mode=""></image>
			</view>
		</view>
		<view class="user" v-else>
			<image class="img" src="../../static/user.png" mode=""></image>
			<image class="bjimg" :src="bjimg" mode=""></image>
			<view class="login" @tap='gologin'>
				登录
			</view>
		</view>
		<view class="userinfo">
			<view class="item" @tap='goHealthrecords'>
				<image src="../../static/jkda.png" mode=""></image>
				<view class="text">
					健康档案
				</view>
			</view>
			<view class="item" @tap='gointegral' v-if="appPersonallist">
				<image src="../../static/jifen.png" mode=""></image>
				<view class="text">
					积分
					<span style='padding:0 5rpx' v-if="appPersonallist.integral&&appPersonallist.integral>=0">
						{{appPersonallist.integral}}</span>
					<span style='padding:0 5rpx' v-else>
						0</span>
				</view>
			</view>
			<view class="item" @tap="gocoupon" v-if="appPersonallist">
				<image src="../../static/yhj.png" mode=""></image>
				<view class="text">
					优惠券
					<span style='padding:0 5rpx'
						v-if="appPersonallist.patientCouponCount&&appPersonallist.patientCouponCount>=0">
						{{appPersonallist.patientCouponCount}}</span>
					<span style='padding:0 5rpx' v-else>
						0</span>张
				</view>
			</view>
		</view>
		<view class="content">
			<view class="CommodityOrder" @tap="goorder">
				<view class="title">
					商品订单
				</view>
				<view class="text">
					查看全部
					<image src="../../static/huijiantou.png" mode=""></image>
				</view>
			</view>
			<view class="center">
				<view class="OrderStatus" @tap="gopaid('WAIT_PAY')" v-if="appPersonallist">
					<image src="/static/Tobepaid.png" mode=""></image>
					<view class="title">待付款</view>
					<view class="orderCount" v-if="appPersonallist.waitPayCount>0&&appPersonallist.waitPayCount<100">
						{{appPersonallist.waitPayCount}}
					</view>
					<view class="orderCount" style="width: 57rpx;border-radius: 17rpx;right:25rpx"
						v-if="appPersonallist.waitPayCount>=100">
						99+
					</view>
				</view>
				<view class="OrderStatus" @tap="goreceive('WAIT_RECEIVED_GOODS')" v-if="appPersonallist">
					<image src="/static/received.png" mode=""></image>
					<view class="title">待收货</view>
					<view class="orderCount"
						v-if="appPersonallist.waitReceivedGoodsCount>0&&appPersonallist.waitReceivedGoodsCount<100">
						{{appPersonallist.waitReceivedGoodsCount}}
					</view>
					<view class="orderCount" style="width: 57rpx;border-radius: 17rpx;right:25rpx"
						v-if="appPersonallist.waitReceivedGoodsCount>=100">
						99+
					</view>
				</view>
				<view class="OrderStatus" @tap="gocompleted('RECEIVED_GOODS')" v-if="appPersonallist">
					<image src="/static/evaluated.png" mode=""></image>
					<view class="title">待评价</view>
					<view class="orderCount"
						v-if="appPersonallist.receivedGoodsCount>0&&appPersonallist.receivedGoodsCount<100">
						{{appPersonallist.receivedGoodsCount}}
					</view>
					<view class="orderCount" style="width: 57rpx;border-radius: 17rpx;right:25rpx"
						v-if="list.receivedGoodsCount>=100">
						99+
					</view>
				</view>
				<view class="OrderStatus" @tap="goEVALUATED('EVALUATED')" v-if="appPersonallist">
					<image src="/static/finished.png" mode=""></image>
					<view class="title">已完成</view>
					<!-- <view class="orderCount" v-if="list.evaluatedCount>0&&list.evaluatedCount<100">
						{{list.evaluatedCount}}
					</view>
					<view class="orderCount" v-if="list.evaluatedCount>=100">
						99+
					</view> -->
				</view>
			</view>
		</view>
		<view class="service" @tap="gonursestation">
			<view class="serviceorder">护理站服务订单</view>
			<image src="../../static/huijiantou.png" mode=""></image>
		</view>
		<view class="service" style="top:1040rpx" @tap='remove'>
			<view class="serviceorder">退出账号</view>
			<image src="../../static/huijiantou.png" mode=""></image>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import {
		appPersonal,
	} from '@/api/Personal/Personal.js';
	import {
		existPatientInfo
	} from '@/api/startup/index.js'
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				baseurl: '',
				appPersonallist: null, //获取个人信息
				timer: null,
				list: {},
				bjimg: '',
			}
		},
		onShow() {
			this.bjimg = baseurl + '/profile/appletPicture/inviteFriendsOne.png'
			let that = this
			this.baseurl = baseurl
			this.myInfo()
			const value = uni.getStorageSync('patientId');
			if (value) {} else {
				that.appPersonallist = null
				that.$refs.uToast.show({
					title: '请先登录',
					type: 'error',
					duration: '1000',
				})
			}
		},
		onLoad(options) {},
		methods: {
			remove() {
				let that = this
				const value = uni.getStorageSync('patientId');
				if (value) {
					uni.showModal({
						title: '提示',
						content: '确认要退出此账号吗',
						success: function(res) {
							if (res.confirm) {
								uni.removeStorageSync('patientId');
								uni.removeStorageSync('phone');
								that.$refs.uToast.show({
									title: '退出账号成功',
									type: 'success',
									duration: '1000'
								})
								if (that.timer) {
									clearTimeout(that.timer)
								}
								that.timer = setTimeout(e => {
									uni.switchTab({
										url: '/pages/homepage/homepage'
									})
								}, 1000)
							}
						}
					});
				} else {
					that.$refs.uToast.show({
						title: '您未登录',
						type: 'error',
						duration: '1000'
					})
				}
			},
			removes() {
				this.appPersonallist = null
				uni.removeStorageSync('patientId');
				uni.removeStorageSync('phone');
				uni.removeStorageSync('Refresh');
				uni.navigateBack({
					delta: 1
				})
			},
			//获取个人信息
			myInfo() {
				var that = this
				const value2 = uni.getStorageSync('patientId');
				if (value2) {
					appPersonal(value2).then(Response => {
						if (Response.code == 200) {
							that.appPersonallist = Response.data
							if (!that.appPersonallist.integral) {
								that.appPersonallist.integral = 0
							}
							that.appPersonallist.homeLatitude = Number(that.appPersonallist
								.homeLatitude)
							that.appPersonallist.homeLongitude = Number(that.appPersonallist
								.homeLongitude)
						} else if (Response.code == 9999) {} else {
							that.removes();
						}
					})
				}
			},
			updatainfo() {
				const value2 = uni.getStorageSync('patientId');
				if (value2) {
					uni.navigateTo({
						url: `/pages/modify/modify`
					})
				} else {
					this.gologin();
				}
			},
			//护理站服务订单
			gonursestation() {
				const value2 = uni.getStorageSync('patientId');
				if (value2) {
					uni.navigateTo({
						url: '/pages/Nursingstationserviceorder/Nursingstationserviceorder'
					})
				} else {
					this.gologin();
				}
			},
			//待收货
			goreceive(item) {
				const value2 = uni.getStorageSync('patientId');
				if (value2) {
					uni.navigateTo({
						url: `/pages/CommodityOrder/CommodityOrder?orderStatus=${item}`
					})
				} else {
					this.gologin();
				}
			},
			//全部订单
			goorder() {
				const value2 = uni.getStorageSync('patientId');
				if (value2) {
					uni.navigateTo({
						url: '/pages/CommodityOrder/CommodityOrder'
					})
				} else {
					this.gologin();
				}
			},
			//去登陆
			gologin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			//优惠券
			gocoupon() {
				const value2 = uni.getStorageSync('patientId');
				if (value2) {
					uni.navigateTo({
						url: '/pages/coupon/coupon'
					})
				} else {
					this.gologin();
				}
			},
			//积分页面
			gointegral() {
				const value2 = uni.getStorageSync('patientId');
				if (value2) {
					uni.navigateTo({
						url: `/pages/integral/integral?integral=${this.appPersonallist.integral}`
					})
				} else {
					this.gologin();
				}
			},
			//已完成
			goEVALUATED(item) {
				const value2 = uni.getStorageSync('patientId');
				if (value2) {
					uni.navigateTo({
						url: `/pages/CommodityOrder/CommodityOrder?orderStatus=${item}`
					})
				} else {
					this.gologin();
				}
			},
			//待评价
			gocompleted(item) {
				const value2 = uni.getStorageSync('patientId');
				if (value2) {
					uni.navigateTo({
						url: `/pages/CommodityOrder/CommodityOrder?orderStatus=${item}`
					})
				} else {
					this.gologin();
				}
			},
			//待付款
			gopaid(item) {
				const value2 = uni.getStorageSync('patientId');
				if (value2) {
					uni.navigateTo({
						url: `/pages/CommodityOrder/CommodityOrder?orderStatus=${item}`
					})
				} else {
					this.gologin();
				}
			},
			//健康档案
			goHealthrecords() {
				uni.navigateTo({
					url: '/pages/Healthrecords/Healthrecords'
				})
			},
		},
	}
</script>
<style lang="scss">
	.app {
		font-size: 35rpx;
		padding: 0 0 200rpx 0;
		position: relative;
		text-align: center;

		.service {
			position: absolute;
			top: 915rpx;
			left: 2%;
			width: 96%;
			height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 10rpx;

			image {
				width: 13rpx;
				height: 23rpx;
				position: absolute;
				right: 40rpx;
				top: 50%;
				transform: translateY(-50%);
			}

			.serviceorder {
				font-size: 32rpx;
				height: 100rpx;
				line-height: 100rpx;
				position: absolute;
				left: 31rpx;
			}
		}

		.content {
			position: absolute;
			top: 590rpx;
			left: 2%;
			width: 96%;
			height: 300rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 10rpx;

			.center {
				display: flex;
				justify-content: space-around;
				padding-top: 50rpx;

				.OrderStatus {
					position: relative;
					height: 180rpx;
					width: 25%;

					.title {
						position: absolute;
						top: 80rpx;
						width: 100%;
						left: 50%;
						transform: translateX(-50%);
					}

					image {
						width: 71rpx;
						height: 63rpx;
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
					}

					.orderCount {
						width: 38rpx;
						height: 38rpx;
						background: #FFFFFF;
						border: 3rpx solid #DC222F;
						position: absolute;
						top: -20rpx;
						right: 35rpx;
						font-size: 22rpx;
						border-radius: 50%;
						line-height: 35rpx;
						color: #DC222F;
					}
				}
			}

			.CommodityOrder {
				font-size: 32rpx;
				height: 80rpx;
				line-height: 80rpx;
				position: relative;

				.title {
					position: absolute;
					left: 31rpx;
				}

				.text {
					position: absolute;
					right: 40rpx;
					font-size: 26rpx;
					color: #969494;

					image {
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						padding-left: 10rpx;
						width: 13rpx;
						height: 23rpx;
					}
				}
			}
		}

		.userinfo {
			position: absolute;
			top: 340rpx;
			left: 2%;
			display: flex;
			width: 96%;
			height: 220rpx;
			background-color: #fff;
			border-radius: 10rpx;
			box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(101, 176, 249, 0.41);

			.item {
				width: 33%;
				height: 100%;
				padding-top: 40rpx;

				.text {
					font-size: 30rpx;
					line-height: 60rpx;
				}

				image {
					// margin-left: 50%;
					// transform: translateX(-50%);
					width: 85rpx;
					height: 74rpx;
				}
			}
		}

		.user {
			width: 100%;
			height: 400rpx;
			position: relative;
			color: #FFFFFF;
			font-size: 39rpx;

			.modify {
				position: absolute;
				right: 3%;
				top: 200rpx;
				font-size: 28rpx;

				image {
					width: 23rpx;
					height: 23rpx;
					padding-left: 10rpx;
				}
			}

			.login {
				position: absolute;
				top: 170rpx;
				left: 35%;
				font-size: 36rpx;
				width: 180rpx;
				line-height: 70rpx;
				border: 1rpx solid #fff;
				height: 70rpx;
				border-radius: 20rpx;
			}

			.nickname {
				position: absolute;
				top: 250rpx;
				left: 35%;
				font-size: 30rpx;
			}

			.phone {
				position: absolute;
				top: 130rpx;
				left: 35%;
			}

			.bjimg {
				width: 100%;
				height: 100%;

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

			.img {
				z-index: 999;
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				background: #F6F6F6;
				position: absolute;
				top: 130rpx;
				left: 8%;
			}
		}
	}
</style>
