<template>
	<view class="container">
		<view class="u-status-bar"></view>
		<view class="top-bg"></view>
		<view class="content">
			<view class="user-info">
				<view class="logo-wrap">
					<view class="logo">
						<image class="img" src="/static/logo.png" mode="widthFix"></image>
					</view>
					<view class="quick-menu">
						<image class="icon" src="/static/me/logo_btn1.png" mode="aspectFit" @click="linkTo('/pages/share/index', true)"></image>
						<image class="icon" src="/static/me/logo_btn2.png" mode="aspectFit" @click="linkTo('/pages/me/message', true)"></image>
						<image class="icon" src="/static/me/logo_btn3.png" mode="aspectFit" @click="linkTo('/pages/me/contact', true)"></image>
					</view>
				</view>
				<view class="top" @click="linkTo(userInfo.phone ? '/pages/me/userInfo' : '/pages/login/login')">
					<image class="avatar" :src="userInfo.avatar || '/static/default_avatar.png'" mode="aspectFill"></image>
					<view class="info-wrap">
						<view class="name">{{ userInfo.phone || '请登录' }}</view>
					</view>
				</view>
				<view class="btm">
					<navigator class="item" hover-class="none" url="/pages/watching_history/watching_history?type=2">
						<view class="title">我的喜欢</view>
						<view class="num">{{ likeData.likeCount }}</view>
					</navigator>
					<navigator class="item" hover-class="none" url="/pages/watching_history/watching_history?type=1">
						<view class="title">我的追剧</view>
						<view class="num">{{ likeData.collectCount }}</view>
					</navigator>
					<view class="item" v-if="$common.isIosExamine" @click="linkTo('/pages/me/withdraw/index', true)">
						<view class="title">我的红包</view>
						<view class="num">{{ amount || 0 }}</view>
					</view>
				</view>
			</view>
			<view class="card-wrap">
				<view class="gold-wrap">
					<view class="left">
						<image class="icon" src="/static/me/gold_icon.png" mode="aspectFit"></image>
						<view class="num">{{ gold }}</view>
					</view>
					<div @click="linkTo('/pages/me/gold_record', true)">
						<view class="btn">金币明细</view>
					</div>
				</view>
				<div class="title-wrap" @click="linkTo('/pages/watching_history/watching_history?type=3', true)">
					<view class="a">
						<view class="t">观看历史</view>
						<up-icon name="arrow-right"></up-icon>
					</view>
				</div>

				<view class="history-list">
					<view
						class="item"
						v-for="item in recordThree"
						:key="item.id"
						@click="linkTo(`/pages/video/detail?courseId=${item.courseId}&courseDetailsId=${item.courseDetailsId}`)"
					>
						<image class="cover" :src="item.titleImg" mode="aspectFill"></image>
						<view class="name">{{ item.title }}</view>
						<view class="t">看到{{ item.courseDetailsName }}</view>
					</view>
				</view>
				<view class="empty" style="padding-bottom: 20px" v-if="!recordThree.length">
					<emprty-card></emprty-card>
				</view>
			</view>
			<view class="card-wrap">
				<view class="menu-list">
					<view class="item" @click="toTask">
						<image class="icon" src="/static/me/Frame.png" mode="aspectFit"></image>
						<view class="name">邀请好友</view>
					</view>
					<view class="item" @click="linkTo('/pages/me/setting')">
						<image class="icon" src="/static/me/menu_icon2.png" mode="aspectFit"></image>
						<view class="name">设置中心</view>
					</view>
					<view class="item" @click="linkTo('/pages/me/feedback', true)">
						<image class="icon" src="/static/me/menu_icon3.png" mode="aspectFit"></image>
						<view class="name">意见反馈</view>
					</view>
					<view class="item" @click="linkTo('/pages/me/help_center')">
						<image class="icon" src="/static/me/menu_icon4.png" mode="aspectFit"></image>
						<view class="name">帮助中心</view>
					</view>
					<view class="item" @click="linkTo('/pages/login/download')">
						<image class="icon" src="/static/me/menu_icon5.png" mode="aspectFit"></image>
						<view class="name">检查更新</view>
					</view>
					<view class="item" @click="linkTo('/pages/me/agreement')">
						<image class="icon" src="/static/me/menu_icon6.png" mode="aspectFit"></image>
						<view class="name">用户协议</view>
					</view>
					<!-- <view class="item">
						<image class="icon" src="/static/me/menu_icon7.png" mode="aspectFit"></image>
						<view class="name">关于我们</view>
					</view> -->
					<!-- #ifndef H5 -->
					<view class="item" @click="bindwx" v-if="!isBindWx">
						<image class="icon" src="/static/me/bind_wx.png" mode="aspectFit"></image>
						<view class="name">绑定微信</view>
					</view>
					<!-- #endif -->

					<view class="item" @click="linkTo('/pages/me/privacy')">
						<image class="icon" src="/static/me/menu_icon8.png" mode="aspectFit"></image>
						<view class="name">隐私政策</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<disable-mask v-if="disableShow"></disable-mask>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onShow, onPullDownRefresh } from '@dcloudio/uni-app';
import { selectByUserId, collectVideoSummary, selectUserMoney } from '@/api/me/me.js';
import { linkTo } from '@/utils/app.js';
import { useCommonStore } from '@/store/common.js';
import { toBindWx, bindStatus } from '@/utils/wx.js';

const disableShow = ref(false);

const $common = useCommonStore();
const userInfo = ref({});

let isBindWx = ref(false);
async function bindwx() {
	if (isBindWx.value) {
		uni.showToast({
			title: '已绑定微信，请勿重复绑定',
			icon: 'none'
		});
		return;
	}
	isBindWx.value = await bindStatus();
	console.log(isBindWx.value);
	if (isBindWx.value) {
		uni.showToast({
			title: '已绑定微信，请勿重复绑定',
			icon: 'none'
		});
		return;
	} else {
		toBindWx();
	}
}

// 获取最近的三条观看历史
const recordThree = ref([]);
onShow(() => {
	// 判断ios是否审核
	$common.init();
});
async function selectByUserIdAjax() {
	try {
		const res = await selectByUserId({
			page: 1,
			limit: 3,
			classify: 3
		});
		recordThree.value = res.records;
	} catch (error) {
		if (error.code == 702) {
			disableShow.value = true;
		} else {
			disableShow.value = false;
		}
		console.log(error);
	}
}
// 我的喜欢 我的追剧
const likeData = reactive({
	likeCount: 0,
	collectCount: 0
});
async function collectVideoSummaryAjax() {
	try {
		const res = await collectVideoSummary();
		likeData.likeCount = res.likeCount;
		likeData.collectCount = res.collectCount;
	} catch (error) {
		console.log(error);
	}
}

// 金币
const gold = ref(0);
const amount = ref(0);
async function selectUserMoneyAjax() {
	try {
		const res = await selectUserMoney();
		gold.value = res.money;
		amount.value = res.amount;
	} catch (error) {
		console.log(error);
	}
}

// 跳转任务中心
function toTask() {
	linkTo('/pages/share/index');
}

onPullDownRefresh(async () => {
	await selectByUserIdAjax();
	await collectVideoSummaryAjax();
	await selectUserMoneyAjax();
	userInfo.value = uni.getStorageSync('userInfo');
	setTimeout(() => {
		uni.stopPullDownRefresh();
	}, 500);
});

onShow(() => {
	if (uni.getStorageSync('token')) {
		selectByUserIdAjax();
		collectVideoSummaryAjax();
		selectUserMoneyAjax();
		userInfo.value = uni.getStorageSync('userInfo');
	}
});
</script>

<style>
page {
	background: #f5f7ff;
}
</style>
<style scoped lang="scss">
$bgColor: #f5f7ff;

.container {
	font-size: 28upx;
	color: #333;
}

.top-bg {
	width: 100%;
	height: 50%;
	position: fixed;
	top: 0;
	left: 0;
	background: linear-gradient(90deg, #ffe5ea 0, #e4f5fb 49%, #fff0ee);

	&::after {
		content: '';
		height: 50%;
		width: 100%;
		background: linear-gradient(to bottom, transparent, $bgColor);
		position: absolute;
		bottom: 0;
		left: 0;
	}
}

.content {
	padding: 28upx;
	position: relative;

	.user-info {
		.logo-wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.logo {
				width: 160upx;

				.img {
					width: 100%;
					display: block;
				}
			}

			.quick-menu {
				display: flex;
				gap: 20upx;

				.icon {
					$size: 60upx;
					width: $size;
					height: $size;
				}
			}
		}

		.top {
			display: flex;
			align-items: center;
			padding-top: 40upx;

			.avatar {
				$size: 94upx;
				width: $size;
				height: $size;
				border-radius: 50%;
				margin-right: 12upx;
			}

			.info-wrap {
				flex: 1;
				display: flex;
				flex-direction: column;
				font-size: 32upx;
			}
		}

		.btm {
			display: flex;
			padding: 40upx 0;

			.item {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.title {
					font-size: 28upx;
				}

				.num {
					font-weight: bold;
					display: flex;
					justify-content: center;
				}
			}
		}
	}
}

.card-wrap {
	background: #fff;
	border-radius: 16upx;
	overflow: hidden;
	margin-bottom: 28upx;

	.gold-wrap {
		background: #f2b5b5;
		display: flex;
		justify-content: space-between;
		padding: 20upx 28upx;
		position: relative;

		// &::after {
		// 	$size: 40upx;
		// 	content: '';
		// 	width: $size;
		// 	height: $size;
		// 	border-radius: 8upx;
		// 	transform: rotate(45deg);
		// 	position: absolute;
		// 	left: 50%;
		// 	margin-left: $size * 0.5 * -1;
		// 	bottom: $size * 0.3 * -1;
		// 	background: inherit;
		// }
		.left {
			display: flex;
			align-items: center;

			.icon {
				$size: 52upx;
				width: $size;
				height: $size;
				margin-right: 20upx;
			}

			.num {
				color: #fff;
				font-size: 32upx;
			}
		}

		.btn {
			color: #977641;
			background: linear-gradient(90deg, #fee7bc 0%, #fdcc89 100%);
			width: 144upx;
			height: 56upx;
			border-radius: 56upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24upx;
		}
	}

	.title-wrap {
		padding: 28upx;

		.a {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.t {
				font-size: 28upx;
			}
		}
	}

	.history-list {
		padding: 0 28upx 28upx;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: 1fr;
		grid-column-gap: 28upx;
		grid-row-gap: 28upx;

		.item {
			.cover {
				width: 100%;
				height: 280upx;
				border-radius: 20upx;
			}

			.name {
				font-size: 28upx;
				width: 160upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.t {
				color: #999;
				font-size: 24upx;
			}
		}
	}

	.menu-list {
		display: flex;
		flex-wrap: wrap;
		padding: 28upx 0 0;

		.item {
			flex: 0 0 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-bottom: 32upx;

			.icon {
				$size: 56upx;
				width: $size;
				height: $size;
			}

			.name {
				font-size: 24upx;
				margin-top: 8upx;
				color: #333;
			}
		}
	}
}
</style>
