<template>
	<view class="page-container">
		<view class="header-bg">
			<view class="header-bg-upper"></view>
		</view>
		<view class="status-bar"></view>
		<scroll-view
			scroll-y="true"
			refresher-enabled="true"
			refresher-background="none"
			:refresher-threshold="100"
			:refresher-triggered="refreshTriggered"
			@refresherrefresh="refresh"
		>
			<view class="scroll-container">
				<view v-if="advShow && adv" class="ad-banner" @click="openAD(adv.adv_link)">
					<vodImage :src="adv.adv_image" mode="widthFix"></vodImage>

					<text @click="advShow = false">关闭</text>
				</view>
				<view class="user-header">
					<view class="user-header-setup justify-end">
						<navigator url="/pages/user/setup" hover-class="none">
							<uni-icons type="gear" size="26" color="#8a8a95"></uni-icons>
						</navigator>
					</view>
					<view class="user-info align-center">
						<image :src="user.user_portrait || '/static/avatar/noavatar.png'" mode="aspectFill" class="user-avatar" @click="userInfo" />
						<template v-if="isLogin">
							<view class="user-info-box">
								<view class="user-name align-center" @click="userInfo">
									<text class="name" :class="user.user_vip === 1 ? 'red' : ''">{{ user.user_nick_name || user.user_name }}</text>
									<image v-if="user.user_vip === 1" src="/static/icon/icon-vip.png" class="icon-grade" />
									<template v-else-if="user.group_id">
										<image :src="`/static/icon/v${user.group_id}@2x.png`" class="icon-grade" />
									</template>
								</view>
								<view v-if="user.user_vip == 1" class="user-expire">
									{{ timeDifference + '天后过期' }}
								</view>
								<view v-if="user.user_end_day >= 0" class="user-expire">
									<!-- {{user.user_end_day > 0 ? user.user_end_day + '天后过期' : '即将过期'}} -->
								</view>
								<view v-if="user.group && user.group.group_number > 0" class="user-extend">距离升级还差{{ user.group.group_number - user.user_invite_num }}人</view>
								<view v-if="user.user_invite_code" class="user-extend">邀请码:{{ user.user_invite_code }}</view>
							</view>
							<view class="user-signin flex-row" @click="sign">
								<image src="/static/icon/icon-sign-in.png"></image>
								<text>{{ user.user_sign === 1 ? '已签到' : '签到' }}</text>
							</view>
						</template>
						<template v-else>
							<view class="user-info-box" @click="userInfo">
								<view class="user-name align-center">
									<text class="name">{{ user.user_name || '****' }}</text>
								</view>
								<view class="user-extend">登录解锁更多用户权益</view>
							</view>
							<navigator url="/pages/user/login" class="user-login">登录</navigator>
						</template>
					</view>
				</view>
				<view class="user-integral flex-row">
					<view class="user-integral-box flex-row">
						<view class="integral-item">
							<view class="integral-num">{{ user.user_vip === 1 ? '无限制' : user.user_points }}</view>
							<view class="integral-text">今日剩余观看次数</view>
						</view>
						<!-- <view class="integral-line"></view> -->
						<!-- #ifdef APP-PLUS -->
						<view class="integral-item">
							<view class="integral-num">{{ user.user_vip === 1 ? '无限制' : user.user_down_points }}</view>
							<view class="integral-text">今日剩余下载次数</view>
						</view>
						<!-- #endif -->

						<view class="integral-item" v-if="!isLogin">
							<view class="integral-num">0</view>
							<view class="integral-text">推广人数</view>
						</view>
						<view class="integral-item" v-else>
							<navigator url="/pages/user/share-center">
								<view style="text-align: center; color: #fc4c5c">
									<text class="button-text">立即推广</text>
									<uni-icons type="forward" color="#FC4C5C" size="20"></uni-icons>
								</view>
								<view class="integral-text">推广{{ user.user_invite_num }}人</view>
							</navigator>
						</view>
					</view>
					<!-- <navigator url="/pages/user/share-center" class="user-integral-button">
						<text class="button-text">立即推广</text>
						<uni-icons type="forward" color="#a1cdc0" size="20"></uni-icons>
					</navigator> -->
				</view>
				<navigator url="/pages/user/recharge" class="user-ads" hover-class="none">
					<view class="">
						<view class="align-center">
							<image src="/static/icon/viphengfu.png" mode="widthFix" />
							<text>无限次观看 无限次下载</text>
						</view>
					</view>
					<view class="user-btn">开通会员</view>
				</navigator>
				<view class="user-nav">
					<view class="title">常用功能</view>
					<u-grid :border="false" col="4" class="user-nav-grid">
						<!-- #ifndef H5 -->
						<u-grid-item>
							<navigator url="/pages/user/download" hover-class="none">
								<image src="/static/icon/icon-me-download.png" class="user-nav-icon" />
								<text>下载记录</text>
							</navigator>
						</u-grid-item>
						<!-- #endif -->
						<u-grid-item>
							<navigator url="/pages/user/history" hover-class="none">
								<image src="/static/icon/icon-me-watch.png" class="user-nav-icon" />
								<text>观看记录</text>
							</navigator>
						</u-grid-item>

						<u-grid-item>
							<navigator url="/pages/user/purchase" hover-class="none">
								<image src="/static/icon/icon-gold.png" class="user-nav-icon" />
								<text>已付费视频</text>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator url="/pages/user/favorites" hover-class="none">
								<image src="/static/icon/icon-me-collect.png" class="user-nav-icon" />
								<text>我的收藏</text>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator url="/pages/user/recharge" hover-class="none">
								<image src="/static/icon/icon-me-member.png" class="user-nav-icon" />
								<text>会员充值</text>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator url="/pages/user/bullion" hover-class="none">
								<image src="/static/icon/yuanbao.png" class="user-nav-icon" />
								<text>元宝充值</text>
							</navigator>
						</u-grid-item>
					</u-grid>
				</view>
				<view class="user-nav">
					<view class="title">我的权益</view>
					<u-grid :border="false" col="4" class="user-nav-grid">
						<u-grid-item>
							<navigator url="/pages/user/share" hover-class="none">
								<image src="/static/icon/shareicon.png" class="user-nav-icon" />
								<text>分享赚钱</text>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator url="/pages/user/coin-exchange" hover-class="none">
								<image src="/static/icon/x-icon-coin.png" class="user-nav-icon" />
								<text>金币兑换</text>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator url="/pages/user/coin-wallet" hover-class="none">
								<image src="/static/icon/x-icon-wallet.png" class="user-nav-icon" />
								<text>金币钱包</text>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator url="/pages/user/vip-exchange" hover-class="none">
								<image src="/static/icon/x-icon-vip.png" class="user-nav-icon" />
								<text>会员兑换</text>
							</navigator>
						</u-grid-item>
					</u-grid>
				</view>
				<view class="user-nav">
					<view class="title">任务通知</view>
					<u-grid :border="false" col="4" class="user-nav-grid">
						<u-grid-item>
							<navigator url="/pages/user/task" hover-class="none">
								<image src="/static/icon/x-icon-task.png" class="user-nav-icon" />
								<text>任务中心</text>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator url="/pages/user/notice" hover-class="none">
								<image src="/static/icon/x-icon-notice.png" class="user-nav-icon" />
								<text>通知中心</text>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator url="/pages/feedback/feedback" hover-class="none">
								<image src="/static/icon/x-icon-feedback1.png" class="user-nav-icon" />
								<text>建议反馈</text>
							</navigator>
						</u-grid-item>
					</u-grid>
				</view>
				<!-- <view class="user-ads">
					<navigator url="/pages/user/share-money" hover-class="none">
						<image src="/static/images/me-banner.png" mode="widthFix" />
					</navigator>
				</view> -->
				<view class="user-menu" v-if="false">
					<navigator url="/pages/user/coin-exchange" class="menu-item">
						<uni-icons custom-prefix="xicon" type="x-icon-coin" color="#09a96a" size="24"></uni-icons>
						<text class="menu-title">金币兑换</text>
						<uni-icons type="forward" color="#a2a2a2" size="14"></uni-icons>
					</navigator>
					<navigator url="/pages/user/coin-wallet" class="menu-item">
						<uni-icons custom-prefix="xicon" type="x-icon-wallet" color="#09a96a" size="24"></uni-icons>
						<text class="menu-title">金币钱包</text>
						<uni-icons type="forward" color="#a2a2a2" size="14"></uni-icons>
					</navigator>
					<navigator url="/pages/user/vip-exchange" class="menu-item">
						<uni-icons custom-prefix="xicon" type="x-icon-vip" color="#09a96a" size="24"></uni-icons>
						<text class="menu-title">会员兑换</text>
						<uni-icons type="forward" color="#a2a2a2" size="14"></uni-icons>
					</navigator>
				</view>
				<view class="user-menu" v-if="false">
					<navigator url="/pages/user/task" class="menu-item">
						<uni-icons custom-prefix="xicon" type="x-icon-task" color="#09a96a" size="24"></uni-icons>
						<text class="menu-title">任务中心</text>
						<uni-icons type="forward" color="#a2a2a2" size="14"></uni-icons>
					</navigator>
					<navigator url="/pages/user/notice" class="menu-item">
						<uni-icons custom-prefix="xicon" type="x-icon-notice" color="#09a96a" size="24"></uni-icons>
						<text class="menu-title">通知中心</text>
						<uni-icons type="forward" color="#a2a2a2" size="14"></uni-icons>
					</navigator>
					<navigator url="/pages/feedback/feedback" class="menu-item">
						<uni-icons custom-prefix="xicon" type="x-icon-feedback1" color="#09a96a" size="24"></uni-icons>
						<text class="menu-title">建议反馈</text>
						<uni-icons type="forward" color="#a2a2a2" size="14"></uni-icons>
					</navigator>
				</view>
				<!-- <view v-if="groupLink.length > 0" class="user-menu">
					<view v-for="(item, index) in groupLink" :key="index" class="menu-item" @click="openApp(item.url)">
						<uni-icons custom-prefix="xicon" type="x-icon-bbs" color="#09a96a" size="24"></uni-icons>
						<text class="menu-title">{{item.name}}</text>
						<uni-icons type="forward" color="#a2a2a2" size="14"></uni-icons>
					</view>
				</view> -->
			</view>
		</scroll-view>
		<reward ref="reward" />
	</view>
</template>

<script>
import reward from '@/components/reward';
import { user } from '@/utils/api';
import { app } from '@/utils/api';
import vodImage from '@/components/vod-image.vue';
export default {
	components: {
		reward
	},
	data() {
		return {
			user: {
				user_points: 0,
				user_down_points: 0,
				is_sign: 0
			},
			groupLink: [],
			adv: null,
			advShow: false,
			signed: false,
			isLogin: false,
			refreshTriggered: false,
			timeDifference: ''
		};
	},
	async onShow() {
		await this.$onLaunched;
		const token = getApp().globalData.userToken;
		this.isLogin = token ? true : false;
		this.getInfo();
	},
	methods: {
		async getInfo() {
			await user
				.info()
				.then((res) => {
					if (res.code == 1) {
						this.user = res.data.user;
						if (this.user.user_vip === 1) {
							var timestamp = this.user.user_end_time;
							var date = new Date(timestamp * 1000);
							var currentDate = new Date();
							this.timeDifference = Math.ceil((date - currentDate) / (1000 * 60 * 60 * 24));
						}

						if (res.data.group_link) {
							this.groupLink = res.data.group_link;
						}
						if (res.data.adv) {
							this.adv = res.data.adv;
						}
					}
				})
				.catch((e) => {});
			this.refreshTriggered = false;
		},
		sign() {
			if (this.isLogin) {
				if (this.user.user_sign === 1) {
					uni.showToast({
						icon: 'none',
						title: '今天已签到~!',
						duration: 3000
					});
				} else {
					uni.navigateTo({
						url: '/pages/user/sign'
					});
				}
			} else {
				uni.navigateTo({
					url: '/pages/user/login'
				});
			}
		},
		userInfo() {
			if (this.isLogin) {
				uni.navigateTo({
					url: '/pages/user/info'
				});
			} else {
				uni.navigateTo({
					url: '/pages/user/login'
				});
			}
		},
		refresh() {
			this.advShow = true;
			this.refreshTriggered = true;
			this.getInfo();
		}
	}
};
</script>

<style lang="scss">
.fs12 {
	font-size: 12px;
}

.page-container {
	height: 100%;
	background-color: #0c0c16;

	uni-scroll-view {
		height: calc(100% - var(--safe-top));
	}

	.scroll-container {
		padding-bottom: 20px;
	}
	.ad-banner {
		width: 100%;
		padding: 15px 15px 0;
		position: relative;
		uni-image {
			width: 100%;
			border-radius: 8px;
		}
		uni-text {
			padding: 5px 10px;
			font-size: 12px;
			color: #fff;
			border-radius: 13px;
			background-color: rgba(0, 0, 0, 0.7);
			position: absolute;
			top: 20px;
			right: 20px;
		}
	}
	.user-header {
		position: relative;
		z-index: 1;

		.user-header-setup {
			padding: 10px 15px 5px;
		}

		.user-info {
			padding: 0 15px;

			.user-avatar {
				width: 70px;
				height: 70px;
				margin-right: 15px;
				border-radius: 50%;
			}

			.user-signin {
				height: 26px;
				margin-left: 15px;
				padding: 20rpx 0;
				background: linear-gradient(131deg, #f7c890 0%, #ff4f4f 100%);
				border-radius: 14px;
				align-items: center;

				uni-image {
					width: 18px;
					height: 18px;
					margin: 0 4px 0 10px;
				}

				uni-text {
					margin-right: 15px;
					overflow-wrap: break-word;
					color: #fff;
					font-size: 13px;
					font-weight: 700;
				}
			}

			.user-login {
				height: 26px;
				line-height: 26px;
				margin-left: 15px;
				padding: 0 20rpx;
				color: #fff;
				font-size: 13px;
				font-weight: 700;
				background: linear-gradient(131deg, #f7c890 0%, #ff4f4f 100%);
				border-radius: 14px;
			}

			.user-info-box {
				flex: 1 1 0%;
				display: flex;
				flex-direction: column;
				overflow: hidden;

				.user-name {
					.name {
						max-width: 100%;
						margin-right: 10px;
						color: #fff;
						// #f65449
						font-size: 18px;
						font-weight: 700;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.red {
						color: #f65449 !important;
					}
					.icon-grade {
						width: 25px;
						height: 24px;
					}

					.grade {
						color: #fb5b14;
						font-size: 10px;
						font-weight: 700;
						line-height: 10px;
						margin-top: 7px;
						margin-left: -4px;
					}
				}

				.user-expire {
					width: 70px;
					margin: 2px 0;
					background-image: linear-gradient(270deg, #fde39e, #fff3d4);
					border-radius: 10px;
					// border: 1px solid #ff8d42;
					height: 20px;
					line-height: 20px;
					text-align: center;
					color: #fb5b14;
					font-size: 10px;
				}

				.user-extend {
					margin-top: 2px;
					color: #8a8a95;
					font-size: 11px;
				}
			}
		}
	}

	.user-integral {
		margin-top: 20px;
		padding: 0 15px;
		position: relative;
		z-index: 1;

		.user-integral-box {
			flex: 1 1 0%;
			border-radius: 8px;
			padding: 10px 7px 12px;
			align-items: center;
			justify-content: center;

			.integral-item {
				flex: 1 1 0%;

				.integral-num {
					color: #fff;
					font-size: 24px;
					font-weight: 700;
					text-align: center;
					height: 25px;
					line-height: 25px;
				}

				.integral-text {
					font-weight: 400;
					color: #8a8a95;
					font-size: 12px;
					text-align: center;
					line-height: 20px;
				}
			}

			.integral-line {
				width: 1px;
				height: 20px;
				margin: 0 8px;
				background-color: #e8e8e8;
			}
		}

		.user-integral-button {
			width: 30%;
			min-width: 100px;
			margin-left: 15px;
			background: #fff;
			border-radius: 8px;
			padding: 0 0 0 10px;
			display: flex;
			align-items: center;
			justify-content: center;

			.button-text {
				font-size: 16px;
				font-weight: 700;
			}
		}
	}

	.user-ads {
		margin: 15px 15px 0;
		background: linear-gradient(90deg, #fada9f 0%, #e0af74 100%);
		padding: 10px;
		display: flex;
		justify-content: space-between;
		border-radius: 5px;
		uni-text {
			margin-left: 8px;
			font-size: 14px;
			color: #4a2c00;
		}
		uni-image {
			width: 26px;
			height: 24px;
			border-radius: 16px;
		}
		.user-btn {
			width: 80px;
			text-align: center;
			padding: 5px 0;
			background: #4a2c00;
			border-radius: 16px;
			font-size: 14px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #ffffff;
			line-height: 20px;
		}
	}

	.user-nav {
		margin: 10px 15px 0;
		background-color: #fff;
		background-color: #101023;
		border-radius: 8px;

		// box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		.title {
			font-size: 16px;
			padding-top: 24rpx;
			padding-left: 24rpx;
			margin-bottom: 5px;
			font-weight: 500;
			color: #fff;
		}

		.user-nav-grid {
			padding: 5px;

			.u-grid-item {
				uni-navigator {
					width: 100%;
					padding: 10px 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}

				.user-nav-icon {
					width: 28px;
					height: 28px;
				}

				uni-text {
					color: #fff;
					font-size: 14px;
					white-space: nowrap;
					line-height: 14px;
					margin-top: 10px;
				}
			}
		}
	}

	.user-menu {
		margin: 15px 15px 0;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		overflow: hidden;

		.menu-item {
			width: 100%;
			padding: 14px 15px;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #f5f5f5;

			&:last-child {
				border: none;
			}

			.menu-title {
				flex: 1 1 0%;
				margin: 0 10px 0 5px;
				color: #1a1a2a;
				font-size: 15px;
			}
		}
	}
}
</style>
