<template>
	<view class="my-page">
		<view class="settings">
			<image class="settings-img"
				src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/8d58357d-0bc8-46a1-a964-6acb3e2a7999.png"
				mode="widthFix" @click="navto()"></image>
		</view>
		<view class="topBg">
			<!-- 用户信息区域 -->
			<view class="user-section" v-if="isLogin">
				<view class="user-info">
					<view class="user-info-left" @click="goToProfile">
						<view class="avatar">
							<image :src="!userInfo.head_photo ? baseAvartar : userInfo.head_photo" mode="aspectFill">
							</image>
						</view>
						
						<view class="user-detail">
							<text class="nickname">{{ userInfo.username }}</text>
							<view class="user-identity">
								<text class="identity-text">普通用户</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 用户相关信息 -->
			<view class="user-section" v-else>
				<view class="user-info">
					<view class="user-info-left" @click="goLogin">
						<view class="avatar">
							<image
								src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/5a978961-4871-4ca5-bef8-14b7f6649ead"
								mode="aspectFill"></image>
						</view>

						<view class="user-detail">
							<text class="nickname">请点击登录</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单状态区域 -->
			<view class="order-section">
				<view class="section-header">
					<text class="title">我的订单</text>
					<view class="more" @click="goToOrderList">
						<text class="more-text">更多</text>
						<image
							src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/bcea1de7-56c9-46c4-a3c9-8efe468bd881"
							class="arrow-right" mode="aspectFit"></image>
					</view>
				</view>
				<view class="order-status">
					<view class="status-item" v-for="(item, index) in orderStatus" :key="index"
						@click="goToOrderList(item.type)">
						<image :src="item.icon" class="status-icon" mode="aspectFit"></image>
						<text class="status-text">{{ item.text }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="content_box">


			<!-- 功能列表 -->
			<view class="function-list mb-30">
				<view class="function-title">我的功能</view>
				<view class="function-grid">
					<view class="grid-item" v-for="(item, index) in functionList" :key="index"
						@click="handleFunction(item)">
						<view class="icon-wrapper">
							<image :src="item.icon" class="grid-icon" mode="aspectFit"></image>
							<!-- <view class="badge" v-if="item.badge">{{ item.badge }}</view> -->
						</view>
						<text class="grid-text">{{ item.text }}</text>
					</view>
				</view>
			</view>

			<!-- 功能列表 -->
			<view class="function-list">
				<view class="function-title">我的礼品</view>
				<view class="function-card">
					<view class="flex-row-center-between" @click="goList">
						<view class="function-card-left flex-row-center">
							<image src="/static/images/icons/lottery.png" class="function-card-left-img"></image>
							<text class="function-card-left-text">中奖列表 </text>
						</view>
						<image class="function-card-right" src="/static/images/icons/right_gray6.png"></image>
					</view>

				</view>
			</view>

			<view class="banner">
				<image class="banner_image" mode="aspectFit"
					src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/2ce342ac-fdb3-4939-8b22-44ae64cd0a7b" />
			</view>
			<view class="tip_info">
				<image class="tip_info_image" mode="aspectFit"
					src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/62d50864-ad08-44d8-902c-a43564ffba11" />
			</view>
		</view>
		<TabBar :selected="3"></TabBar>
	</view>
</template>

<script>
	import TabBar from "@/components/tabbar/tabbar.vue"
	import CustomNavbar from "@/components/custom-navbar/custom-navbar.vue";
	import request from "../../utils/request";

	export default {
		components: {
			CustomNavbar,
			TabBar,
		},
		data() {
			return {
				userInfo: {},
				baseAvartar: "https://app.mrrweb.com.cn" + "/public/images/headanimal.png",
				orderStatus: [{
						text: "待支付",
						icon: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/7180744f-d721-4ff0-af54-49172de0af26",
						type: "unpaid",
					},
					{
						text: "待接单",
						icon: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/af37216d-ad6a-4f08-91df-b04ebb331802",
						type: "unaccepted",
					},
					{
						text: "待服务",
						icon: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/6e0fd278-b478-4ca3-b446-1455a3339d30",
						type: "unserved",
					},
					// { text: '待评价', icon: '/static/images/my/unevaluated.png', type: 'unevaluated' },
					{
						text: "已完成",
						icon: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/7a75cbb9-605c-44c7-be82-c387490aff27",
						type: "finnish",
					},
				],
				functionList: [
					// { text: '浏览历史', icon: '/static/images/my/history.png', path: '/pages/my/history' },
					// {
					//   text: "手艺人后台",
					//   icon: "/static/images/my/master.png",
					//   path: "/pages/ruzhu/ruzhu",
					// },
					{
						text: "优惠券",
						icon: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/a6b4cc79-2908-4658-a5da-05cd070e8ee8.png",
						path: "/pages/coupon/myCoupon",
					},
					{
						text: "地址管理",
						icon: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/1fad21ad-71f5-4c20-bd65-a5e0139f21ad",
						path: "/pages/address/list",
					},
					// { text: '我的消息', icon: '/static/images/my/message.png', path: '/pages/my/message', badge: '2' },
					// { text: '分享', icon: '/static/images/my/share.png', path: '/pages/share/usershare' },
					{
						text: "联系平台",
						icon: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/01ead3d9-674d-4467-947f-e6140dcac95a",
						path: "/pages/contact/contact",
					},
					{
						text: "申诉退款",
						icon: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/09d762a3-51f4-4ad6-a7b0-57ddf4209a78",
						path: "/pages/complaint/list",
					},
					// {
					//   text: "邀请",
					//   icon: "/static/images/my/invite_icon.png",
					//   path: "/pages/share/usershare",
					// },
					// {
					// 	text: "设置",
					// 	icon: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/9d2b886b-5a68-46ce-8fee-b6edc13a8833",
					// 	path: "/pages/settings/index",
					// },
				],
				isLogin: false,
			};
		},
		onLoad() {
			//隐藏原生Tabar
			uni.hideTabBar()
		},
		onShow() {
			//清空全局身份
			getApp().globalData.artisanType = "";
			this.isLogin = uni.getStorageSync("accessToken") ? true : false;
			if (!this.isLogin) {} else {
				// 获取用户信息
				this.getUserInfo();
			}
		},
		methods: {
			//跳转到设置页面
			navto(){
				uni.navigateTo({
					url:'/pages/settings/index'
				})
			},
			goList() {
				uni.navigateTo({
					url: `/pages/lottery/list`
				});
			},
			// 点击“跳转小程序”按钮时触发
			jumpToWeixinMiniProgram() {
				// #ifdef APP-PLUS
				plus.share.getServices((services) => {
					let weixin = null;
					// 遍历所有分享服务，找到微信
					services.forEach((item) => {
						if (item.id === "weixin") {
							weixin = item;
						}
					});

					if (weixin) {
						// 调用微信小程序跳转接口
						weixin.launchMiniProgram({
							id: "gh_e44537920294", // 必须填微信小程序的原始AppID
							path: "/pages/home/home", // 要打开的页面路径（可带参数）
							type: 0, // 版本类型：0-正式版；1-测试版；2-体验版（默认0）
							success: () => {
								uni.showToast({
									title: "跳转成功",
									icon: "success",
								});
							},
							fail: (err) => {
								uni.showToast({
									title: "跳转失败：" + err.message,
									icon: "none",
								});
							},
						});
					} else {
						uni.showToast({
							title: "未安装微信，请先安装",
							icon: "none",
						});
					}
				});
				// #endif
			},
			getUserInfo() {
				request.post("/user/getuser", {
					type: 1
				}).then((result) => {
					this.userInfo = result.data;
				});
			},
			goLogin() {
				// uni.navigateTo({
				//   url: "/pages/login/login",
				// });
				// uni.oprPresentLogin()
				uni.navigateTo({
					url: '/pages/blogPopup/blogPopup'
				});
			},
			goToOrderList(type) {
				if (!this.isLogin) {
					uni.showToast({
						title: "您暂未登录，无法使用此功能！",
						icon: "none",
					});
					return;
				}

				// 使用全局变量存储订单类型
				getApp().globalData.selectedOrderType = type;

				uni.switchTab({
					url: `/pages/order/userorder-list?type=${type}`,
				});
			},
			handleFunction(it) {

				let item = it;
				if (item == 1) {
					item = {
						text: "商家后台",
						icon: "/static/images/my/business.png",
						path: "/pages/ruzhu/ruzhu",
					};
				}
				if (item == 2) {
					item = {
						text: "手艺人后台",
						icon: "/static/images/my/master.png",
						path: "/pages/ruzhu/ruzhu",
					};
				}

				if (item == 3) {
					this.jumpToWeixinMiniProgram();
					return;
				}

				if (!this.isLogin) {
					uni.showToast({
						title: "您暂未登录，无法使用此功能！",
						icon: "none",
					});
					return;
				}
				if (it == 2) {
					console.log(1111111, it)
					getApp().globalData.artisanType = 1;
					uni.navigateTo({
						url: "/pages/my/mycoupon"
					});
					return;
				}

				let text = item.text;
				let type = text == "手艺人后台" ? 1 : text == "商家后台" ? 2 : "";
				getApp().globalData.artisanType = type;
				if (text == "手艺人后台" || text == "商家后台") {
					request.post("/user/getsyrorsjstate", {
						type
					}).then((result) => {
						if (result.data.apply_state == 0) {
							uni.navigateTo({
								url: item.path,
							});
						} else if (result.data.apply_state == 1) {
							uni.navigateTo({
								url: "/pages/ruzhu/submitres?applyState=1",
							});
						} else if (result.data.apply_state == 2) {
							uni.navigateTo({
								url: type == 1 ?
									"/pages/syr/home" : type == 2 ?
									// /pages/syr/home /pages/syr/migration
									"/pages/shop/home" : "",
							});
						} else if (result.data.apply_state == 3) {
							uni.navigateTo({
								url: "/pages/ruzhu/submitres?applyState=3",
							});
						} else if (result.data.apply_state == 4) {
							uni.navigateTo({
								url: "/pages/ruzhu/stopuse",
							});
						}
					});
					return;
				} else if (text == "分享") {
					uni.navigateTo({
						url: item.path + "?inviteCode=" + this.userInfo.invite_code,
					});
					return;
				} else {
					uni.navigateTo({
						url: item.path,
					});
				}
			},
			goToProfile() {
				uni.navigateTo({
					url: "/pages/my/profile",
				});
			},
		},
	};
</script>

<style lang="less" scoped>
	.settings{
		position: absolute;
	}
	.settings-img {
		height: 43rpx;
		width: 43rpx;
		position: relative;
		left: 662rpx;
		top: 97rpx;
	}

	.topBg {
		padding: 140rpx 20rpx 26rpx;
		background-position: 0 0;
		background-size: 100%;
		background-repeat: no-repeat;
		background-image: url("https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/d763c59d-5dca-41cb-9c7c-b17137038145");

		/* 用户信息区域 */
		.user-section {
			box-sizing: border-box;
			padding: 0 10rpx;
			margin-bottom: 45rpx;

			.user-info {
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-between;
				align-items: center;

				.user-info-left {
					display: flex;
					flex-flow: row nowrap;
					justify-content: flex-start;
					align-items: center;

					.avatar {
						width: 110rpx;
						height: 110rpx;
						border-radius: 50%;
						margin-right: 18rpx;
						border: 2rpx solid #ffffff;
						overflow: hidden;

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

					.user-detail {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: flex-start;

						.nickname {
							font-weight: 500;
							font-size: 32rpx;
							color: #ffffff;
							line-height: 45rpx;
							margin-bottom: 6rpx;
						}

						.user-identity {
							width: 121rpx;
							height: 38rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							overflow: hidden;
							background: linear-gradient(266deg,
									rgba(255, 255, 255, 0.29) 0%,
									rgba(255, 255, 255, 0.22) 100%);
							border-radius: 19rpx;
							border: 1rpx solid rgba(255, 255, 255, 1);

							.identity-text {
								font-size: 22rpx;
								line-height: 38rpx;
								height: 38rpx;
								color: #ffffff;
							}
						}
					}
				}
			}
		}

		/* 订单状态区域 */
		.order-section {
			padding: 28rpx 24rpx;
			border-radius: 20rpx;
			background-position: 0 0;
			background-size: 100%;
			background-repeat: no-repeat;
			background-image: url("https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/6c1d92b5-cf09-4435-ac1b-c7c2a9ddcd90");

			.section-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 22rpx;
				border-bottom: 2rpx solid #f9f9f9;

				.title {
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}

				.more {
					display: flex;
					flex-flow: row nowrap;
					justify-content: flex-end;
					align-items: center;

					.more-text {
						font-size: 24rpx;
						color: #71757b;
						margin-right: 12rpx;
					}

					.arrow-right {
						width: 9rpx;
						height: 18rpx;
					}
				}
			}

			.order-status {
				margin-top: 30rpx;
				display: flex;
				justify-content: center;
				gap: 104rpx;
				box-sizing: border-box;

				.status-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.status-icon {
						width: 58rpx;
						height: 52rpx;
						margin-bottom: 10rpx;
					}

					.status-text {
						font-size: 26rpx;
						color: #333333;
					}
				}
			}
		}
	}

	.content_box {
		padding: 0 20rpx;

		.management {
			margin-bottom: 26rpx;
			display: flex;
			justify-content: space-between;

			.managementItem {
				width: 345rpx;
				height: 162rpx;

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

		/* 功能列表 */
		.function-list {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 30rpx 0rpx 28rpx;

			.function-title {
				padding-left: 25rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 40rpx;
			}
		}

		.function-grid {
			display: flex;
			padding: 0 56rpx;
			justify-content: space-between;

			.grid-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;

				.icon-wrapper {
					width: 58rpx;
					height: 52rpx;
					position: relative;
					margin-bottom: 10rpx;

					.grid-icon {
						width: 58rpx;
						height: 52rpx;
					}
				}

				.grid-text {
					font-size: 26rpx;
					color: #333333;
					text-align: center;
				}
			}
		}

		.function-card {
			padding: 0 30rpx 0 20rpx;

			.function-card-left {
				.function-card-left-img {
					width: 58rpx;
					height: 52rpx;
					margin-right: 12rpx;
				}

				.function-card-left-text {
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}
			}

			.function-card-right {
				width: 14rpx;
				height: 26rpx;
			}
		}

		.banner {
			width: 100%;
			height: 158rpx;
			margin-top: 30rpx;

			.banner_image {
				width: 100%;
				height: 100%;
			}
		}

		.tip_info {
			width: 100%;
			height: 131rpx;
			margin-top: 80rpx;
			display: flex;
			padding-bottom: 80rpx;
			justify-content: center;

			.tip_info_image {
				width: 664rpx;
				height: 100%;
			}
		}

		.badge {
			position: absolute;
			top: -8rpx;
			right: -8rpx;
			background-color: #ff4d6a;
			color: #fff;
			font-size: 16rpx;
			min-width: 28rpx;
			height: 28rpx;
			border-radius: 14rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 6rpx;
		}
	}

	page {
		background-color: #f5f5f5;
	}

	.my-page {
		/* min-height: 100vh; */
		position: relative;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stat-icon {
		width: 64rpx;
		height: 64rpx;
		margin-bottom: 8rpx;
	}

	.stat-label {
		font-size: 26rpx;
		color: #252525;
		font-weight: 400;
	}

	/* H5适配 */
	/* #ifdef H5 */
	.my-page::before {
		height: 420rpx;
	}

	/* #endif */

	/* APP适配 */
	/* #ifdef APP-PLUS */
	.my-page::before {
		height: 420rpx;
	}

	/* #endif */

	/* 小程序适配 */
	/* #ifdef MP-WEIXIN */
	.my-page::before {
		height: 420rpx;
	}

	/* #endif */
</style>