<!--
 * @Author: euzhi
 * @Description: 个人中心
-->
<template>
	<view class="" v-if="show">
		<view class="personal">
			<div class="ps__bg">
				<div class="ps__title"></div>
				<div class="ps__info">
					<div class="info__cover">
						<image v-if="avatar" :src="avatar" />
						<image v-else src="@/static/my/my2.jpg" />
					</div>
					<div>
						<div class="info__name">{{userInfo.nickName || '默认昵称'}}</div>
						<div class="view__info" @click="editInfo">
							查看个人主页或编辑资料
							<span>
								<image src="@/static/my/my7.png">
							</span>
						</div>
					</div>
				</div>
				<!-- <div class="ps__shop">
				<div class="shop__tab">
					<div class="tab__top">
						<span>商品订单</span>
						<div class="tab__all" @click="goOrder(0)">
							<span>全部订单</span>
							<span>
								<image src="@/static/my/my5.png">
							</span>
						</div>
					</div>
					<div class="tab__bottom">
						<div class="tab__item" v-for="(vo,inx) in items" :key="inx" @click="goOrder(inx+1)">
							<image :src="vo.icon" />
							<div>{{vo.title}}</div>
						</div>
					</div>
				</div>
			</div> -->
			</div>
			<div class="ps__list">
				<div class="list__item" v-for="(vo,inx) in menu" :key="inx" @click="goUrl(vo)">
					<div class="list__left">
						<image :src="vo.icon" alt="" srcset="">
							{{vo.title}}
					</div>
					<div class="list__right">
						<image src="@/static/my/my5.png" alt="" srcset="">
					</div>
				</div>
			</div>
			<div class="ps__btn" v-if="logoutFlag" @click="loginOut">退出登录</div>
		</view>
		<u-gap bgColor="transparent" height="70"></u-gap>
	</view>
</template>

<script>
	let plugin = requirePlugin('loginPlugin');
	export default {
		data() {
			return {
				show: false,
				logoutFlag: true,
				menu: [
					// {
					//                 icon: require("@/static/my/my01.png"),
					//                 title: "我的订单",
					//                 url: "",
					// 	type:"jd"
					//             },
					// {
					//                 icon: require("@/static/my/my12.png"),
					//                 title: "我的地址",
					//                 url: "/pagesD/pages/personal/myAddress"
					//             },
					{
						icon: require("@/static/my/my8.png"),
						title: "使用帮助",
						url: "/pagesD/pages/personal/help"
					},
					{
						icon: require("@/static/my/my1.png"),
						title: "常见问题",
						url: "/pagesD/pages/personal/asking"
					},
					{
						icon: require("@/static/my/my11.png"),
						title: "问题反馈",
						url: "/pagesD/pages/personal/ask"
					},
					{
						icon: require("@/static/my/my15.png"),
						title: "微信通知设置",
						url: ""
					},
				],
				items: [{
						title: '待发货',
						icon: require('@/static/my/my2.jpg'),
						page: 0
					},
					{
						title: '待收货',
						icon: require('@/static/my/my3.png'),
						page: 2
					}, {
						title: '已完成',
						icon: require('@/static/my/my14.png'),
						page: 3
					}, {
						title: '退款/售后',
						icon: require('@/static/my/my9.png'),
						page: 4
					}
				],
				//用户信息
				userInfo: null,
				//头像
				avatar: '',
			}
		},
		methods: {
			loginOut() {
				let opts = {
					url: '/logout',
					method: 'post'
				};
				this.http.httpTokenRequest(opts, {}).then(res => {
					if (res.data.code == 200) {
						uni.removeStorageSync('userToken')
						uni.removeStorageSync('xcxIndexPath')
						// uni.removeStorageSync('openid')
						plugin.logout().then((res) => {
							// console.jdLoginLog(res, 'logoutres');
							uni.reLaunch({
								url: '/pages/main'
							});
						});
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})

			},
			goOrder(current) {
				let token = uni.getStorageSync('userToken');
				uni.removeStorageSync('routerLogin')
				if (!token) {
					// uni.navigateTo({
					//     url: '/pages/binding/index?url=/pages/main&index=4'
					// })
					let returnPage = '/pages/main';
					let pageType = "reLaunch"
					uni.navigateTo({
						url: "/pages/login/index/index?returnPage=" + returnPage + '&pageType=' + pageType
					})
					return;
				}
				uni.navigateTo({
					url: '/pagesD/pages/personal/myOrder?current=' + current
				});
			},
			goUrl(vo) {
				let token = uni.getStorageSync('userToken');
				uni.removeStorageSync('routerLogin')
				uni.setStorageSync('routerLogin', vo.url)
				if (!token) {
					// uni.navigateTo({
					//     url: '/pages/binding/index?url=/pages/main&index=4'
					// })
					let returnPage = '/pages/main';
					let pageType = "reLaunch"
					uni.navigateTo({
						url: "/pages/login/index/index?returnPage=" + returnPage
					})
					return;
				}
				if (vo.type == "jd") {
					uni.navigateToMiniProgram({
						appId: 'wx91d27dbf599dff74', // 跳转目标小程序的id
						path: '', // 目标小程序的页面路径
						extraData: { // 需要携带的参数

						},
						success(res) {
							// 打开成功
						}
					})
					return;
				}
				if (vo.title != '微信通知设置') {
					uni.navigateTo({
						url: vo.url
					});
				} else {
					this.openMsg()
				}

			},
			editInfo() {
				let token = uni.getStorageSync('userToken');
				uni.removeStorageSync('routerLogin')
				uni.setStorageSync('routerLogin', '/pagesD/pages/personal/userInfo')
				if (!token) {
					// uni.navigateTo({
					//     url: '/pages/binding/index?url=/pages/main&index=4'
					// })
					uni.navigateTo({
						url: '/pages/login/index/index'
					})
					return;
				}
				uni.navigateTo({
					url: '/pagesD/pages/personal/userInfo'
				});
			},
			async getUserInfo() {
				let token = uni.getStorageSync('userToken');
				if (!token) {
					this.logoutFlag = false
					return
				}
				this.logoutFlag = true
				let opts = {
					url: '/app/user/info',
					method: 'get'
				};
				await this.http.httpTokenRequest(opts, {}).then(res => {
					if (res.data.code == 200) {
						this.userInfo = res.data.data
						if (this.userInfo.avatar) {
							this.avatar = this.userInfo.avatar
						}
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			openMsg() {
				var that = this;
				let nc_templateid = that.nc_templateid;
				// 获取用户的当前设置，判断是否点击了“总是保持以上，不在询问”
				wx.getSetting({
					withSubscriptions: true, //是否获取用户订阅消息的订阅状态，默认false不返回
					success(res) {
						if (that.is_authorization) {
							wx.openSetting({
								withSubscriptions: true,
							});
						} else {
							if (res.subscriptionsSetting[nc_templateid] == "reject") {
								//用户点击了“总是保持以上，不再询问”
								wx.showModal({
									title: "温馨提示",
									content: "检测到您没有开启订阅消息的权限，是否去设置？",
									success: function(modal) {
										if (modal.confirm) {
											// 点击肯定
											wx.openSetting({
												withSubscriptions: true,
											});
											that.is_authorization = true;
											uni.setStorageSync("is_authorization", true);
										} else {
											uni.showToast({
												title: "您已拒绝订阅消息授权，无法接收通知",
												icon: "error",
											});
											that.is_authorization = false;
										}
									},
								});
							} else {
								// 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
								// var templateid = that.setting.templateid.map(item => item.tempid)；
								let tmpid = [nc_templateid];
								uni.requestSubscribeMessage({
									tmplIds: tmpid,
									success(res) {
										if (res[tmpid[0]] == "accept") {
											uni.showToast({
												title: "订阅成功",
												icon: "none",
											});
											that.is_authorization = true;
											uni.setStorageSync("is_authorization", true);
										} else {
											uni.showToast({
												title: "您拒绝订阅消息授权，无法接收通知",
												icon: "none",
											});
											that.is_authorization = false;
										}
									},
									fail: (res) => {
										wx.showModal({
											title: "温馨提示",
											content: "检测到您没有开启订阅消息的权限，是否去设置？",
											success: function(modal) {
												if (modal.confirm) {
													// 点击肯定
													wx.openSetting({
														withSubscriptions: true,
													});
													that.is_authorization = true;
													uni.setStorageSync("is_authorization",
														true);
												} else {
													uni.showToast({
														title: "您已拒绝订阅消息授权，无法接收通知",
														icon: "error",
													});
													that.is_authorization = false;
												}
											},
										});
									},
								});
							}
						}
					},
				});
			},

		},
		mounted() {
			setTimeout(() => {
				this.show = true
			}, 100);
			this.getUserInfo()
		},
		onReady: function() {
			uni.setNavigationBarTitle({
				title: '个人中心'
			});
		},
	};
</script>

<style lang="scss" scoped>
	.personal {
		.ps__bg {
			background: url('http://euzhi.com/my15.png') no-repeat;
			background-size: cover;
			z-index: 999;
			padding-bottom: 50rpx;

			.ps__title {
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				padding-top: 40rpx;
			}

			.ps__info {
				padding: 65rpx 40rpx 30rpx 40rpx;
				display: flex;
				align-items: center;
				position: relative;

				.info__cover {
					width: 130rpx;
					height: 130rpx;
					background: url('@/static/my/my10.png') no-repeat;
					background-size: contain;
					margin-right: 32rpx;

					image {
						width: 130rpx;
						height: 130rpx;
						border-radius: 50%;
					}
				}

				.info__name {
					font-size: 38rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					opacity: 0.96;
					margin-bottom: 28rpx;
				}

				.view__info {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					opacity: 0.96;
					display: flex;
					align-items: center;

					span {
						position: absolute;
						right: 40rpx;

						image {
							width: 16rpx;
							height: 26rpx;
						}
					}
				}
			}

			.ps__shop {
				padding: 0 40rpx;

				.shop__tab {
					padding: 30rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
					border-radius: 20rpx;

					.tab__top {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 20rpx;

						>span {
							font-size: 34rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #333333;
						}

						.tab__all {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;

							image {
								width: 11rpx;
								height: 18rpx;
								padding-left: 20rpx;
							}
						}
					}

					.tab__bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-top: 20rpx;

						.tab__item {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
							width: 25%;
							text-align: center;

							image {
								width: 60rpx;
								height: 49rpx;
								margin-bottom: 10rpx;
							}
						}
					}
				}
			}
		}

		.ps__list {
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
			border-radius: 20rpx;
			// margin-top: 20rpx;
			position: relative;
			top: -20rpx;

			.list__item {
				position: relative;
				padding: 26rpx 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.list__left {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					display: flex;
					align-items: center;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 34rpx;
					}
				}

				.list__right {

					image {
						width: 11rpx;
						height: 18rpx;
					}
				}
			}

			.list__item::before {
				content: '';
				position: absolute;
				right: 0;
				bottom: 0;
				width: 650rpx;
				height: 1rpx;
				background: rgba(0, 0, 0, .1);
			}

			//       .list__item:nth-of-type(2) {
			//           .list__left {
			//               image {
			//                   width: 29rpx;
			//                   height: 25rpx;
			//                   margin-right: 32rpx;
			//               }
			//           }
			//       }

			//       .list__item:nth-of-type(3) {
			//           .list__left {
			//               image {
			//                   width: 28rpx;
			//                   height: 28rpx;
			//                   margin-right: 33rpx;
			//               }
			//           }
			//       }

			//       .list__item:nth-of-type(4) {
			//           .list__left {
			//               image {
			//                   width: 28rpx;
			//                   height: 28rpx;
			//                   margin-right: 33rpx;
			//               }
			//           }
			//       }

			// .list__item:last-child {
			//     .list__left {
			//         image {
			//             width: 28rpx;
			//             height: 28rpx;
			//             margin-right: 33rpx;
			//         }
			//     }
			// }

			.list__item:nth-last-of-type(1)::before {
				content: '';
				background: transparent
			}
		}

		.ps__btn {
			margin-top: 20rpx;
			width: 100%;
			height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
			border-radius: 20rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
	}
</style>
