<script setup>
	/**
	 * 用户视频主页
	 */
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance,
	} from 'vue';
	import {
		onLoad,
		onReady,
		onUnload,
		onPageScroll,
		onReachBottom,
	} from '@dcloudio/uni-app'
	import {
		useStore,
	} from 'vuex'
	// 工具库
	import util from '@/common/js/util';
	// 代理
	const {
		proxy
	} = getCurrentInstance()
	// vuex
	const store = useStore()

	// 顶部状态栏
	import statusBar from '@/components/header/statusBar.vue'
	// 未登录状态
	import noLogin from '@/components/login/noLogin'
	// 收藏列表
	import collectList from '@/components/index/collectList.vue'
	// 收藏
	import collectAdd from '@/components/index/collectAdd.vue';
	// 底部导航
	import footerMneu from '@/components/footerMenu/footerMenu'
	// 我的作品
	import product from '@/components/mine/product.vue';
	// 我的喜欢
	import like from '@/components/mine/like.vue';
	// 我的历史
	import history from '@/components/mine/history.vue';

	// 是否显示顶部遮罩
	const headerShow = ref(false)

	// 分类列表
	const tabList = reactive([{
			name: '作品',
			ref: 'productRef',
			load: false,
		},
		{
			name: '喜欢',
			ref: 'likeRef',
			load: false,
		},
		{
			name: '收藏',
			ref: 'collectRef',
			load: false,
		},
		{
			name: '历史浏览',
			ref: 'historyRef',
			load: false,
		},
		{
			name: '投流历史',
			load: false,
		}
	])
	// 分类列表下标
	const tabIndex = ref('')
	// tab当前项
	const tabCurrent = computed(() => tabList[tabIndex.value])
	// 用户信息
	const userinfo = computed(() => store.state.userinfo || {})

	onLoad(() => {
		// 初始化
		handleTabIndex(0)
		// 开启监听
		addListener()
	})

	onReady(() => {
		// proxy.$refs.menuRef.open()
		// proxy.$refs.collectAddRef.open()
	})

	onUnload(() => {
		// 移除监听
		removeList()
	})

	// 滚动
	onPageScroll((ev) => {
		headerShow.value = ev.scrollTop > 44 ? true : false
	})

	// 页面滚动到底部
	onReachBottom(() => {
		proxy.$refs[tabCurrent.value.ref].getMoreList()
	})

	// 开启监听
	function addListener() {
		// 开启监听
		uni.$on('focusUser', () => {
			// 更新用户信息
			util.getUserinfo()
		})

		// 开启监听
		uni.$on('deleteVideo', () => {
			proxy.$refs[tabCurrent.value.ref].refreshList()
		})
	}

	// 移除监听
	function removeList() {
		uni.$off('focusUser')
		uni.$off('deleteVideo')
	}

	// 举报
	function handleReport() {
		// 关闭弹窗
		proxy.$refs.menuRef.close()

		// 打开模态弹窗
		uni.showActionSheet({
			itemList: ['举报'],
		}).then(rs => {
			const index = rs.tapIndex
			if (index == 0) {
				uni.navigateTo({
					url: '/pages/index/report',
				})
			}
		})
	}

	// 切换tab下标
	function handleTabIndex(index) {
		if (tabIndex.value === index) return
		tabIndex.value = index
		tabList[tabIndex.value].load = true
	}

	/**
	 * 点击收藏文件夹
	 * @param {Object} item 被点击的当前项
	 */
	function handleCollectsItem(item) {
		uni.navigateTo({
			url: util.setUrl('/pages/mine/collectsVideo', {
				collectId: item.id,
				collectName: item.folderName,
			})
		})
	}

	// 点击扫码
	function scanQRCode() {
		util.scan()
	}

	// 跳转
	function link(path) {
		uni.navigateTo({
			url: path
		});
	}

	// 退出登录
	function handleLogout() {
		util.alert({
			content: '确认退出登录吗？',
		}).then(rs => {
			if (!rs.confirm) return
			// 
			proxy.$refs.menuRef.close()
			// 
			util.logout(() => {
				// #ifdef APP
				plus.runtime.restart()
				// #endif
				api.login.logout({
					query: {
						phoneNumber: userinfo.phoneNumber,
					}
				}).then(rs => {})
			})
		})
	}

	// 验证登录
	function isAuth(url) {
		util.isAuth({
			success() {
				menuLink(url)
			}
		})
	}

	/**
	 * 菜单跳转
	 * @param {Object} url
	 */
	function menuLink(url) {
		link(url)
		// 关闭弹窗
		proxy.$refs.menuRef.close()
	}
</script>

<template>
	<view class="page" v-if="!userinfo.id">
		<statusBar />
		<view class="head rows plr30">
			<view class="side"></view>
			<view class="f1"></view>
			<view class="side">
				<uni-icons type="gear" size="40rpx" color="#333" @click="link('/pages/mine/setting/setting')" />
			</view>
		</view>

		<noLogin class="f1" />
	</view>

	<view class="appbw" v-else>
		<!-- 页面顶部 -->
		<view class="apex pr" :class="{ 'active': headerShow }">
			<!-- 用户自定义背景图 -->
			<view class="bg pfull">
				<image :src="userinfo.background" mode="aspectFill" />
				<view class="window pfull"></view>
			</view>

			<statusBar />
			<view class="head"></view>

			<!-- 头部导航 -->
			<view class="header pf t0 l0 r0">
				<statusBar />
				<view class="head rows plr30 f40">
					<view class="back" @click="scanQRCode">
						<uni-icons type="scan" size="50rpx" color="#fff" />
					</view>

					<view class="name f32">{{userinfo.userNickname}}</view>

					<view class="menuIcon plr5" @click="$refs.menuRef.open()">
						<uni-icons type="bars" size="50rpx" color="#fff" />
					</view>
				</view>
			</view>

			<!-- 用户信息 -->
			<view class="userinfo rows pr pt20 plr30 pb60 cfff">
				<navigator url="/pages/mine/userinfo" class="avatar pr cir">
					<image class="wh200 cir" :src="userinfo.avatar" mode="aspectFill" />

					<image class="wh55 pa r0 b0" src="/static/shop.png" mode="aspectFit" v-if="userinfo.isShop == 1" />
				</navigator>

				<navigator url="/pages/mine/userinfo" class="user f1 ml20">
					<view class="f36 b">{{userinfo.userNickname}}</view>
					<view class="f24">账号：{{userinfo.account}}</view>
				</navigator>

				<view class="tac" v-if="userinfo.isShop == 1">
					<uni-icons type="shop" color="" size="60rpx" />
					<view class="f24">我的产品</view>
				</view>
			</view>
		</view>

		<!-- 内容 -->
		<view class="container oh pr plr30 c333 bfff">
			<!-- 统计数字 -->
			<view class="number mtb30 tac f1">
				<view class="option">
					<view class="value fmid f36 br10">{{userinfo.publicPraised}}</view>
					<view class="key ml10 c666 f24">公开赞</view>
				</view>

				<view class="option">
					<view class="value fmid f36 br10">{{userinfo.privacyPraised}}</view>
					<view class="key ml10 c666 f24">隐私赞</view>
				</view>

				<view class="option" @click="link('/pages/news/newAttention')">
					<view class="value fmid f36 br10">{{userinfo.userAttention}}</view>
					<view class="key ml10 c666 f24">关注</view>
				</view>

				<view class="option" @click="link('/pages/news/newFans')">
					<view class="value fmid f36 br10">{{userinfo.userFans}}</view>
					<view class="key ml10 c666 f24">粉丝</view>
				</view>
			</view>

			<!-- 个人介绍 -->
			<view class="rows mt30">
				<view class="desc f1 c333 f28">{{userinfo.personalSignature || '暂无个签~'}}</view>

				<view class="option" @click="link('/pages/mine/myComment')">
					<view class="value fmid f36 br10">
						<uni-icons type="chat" size="40rpx" />
					</view>
					<view class="key ml10 c666 f24">我的评论</view>
				</view>
			</view>
		</view>

		<!-- 作品 -->
		<view class="product mt30">
			<view class="tab">
				<scroll-view scroll-x="true" class="scroll">
					<view class="item tac" :class="{ 'active': tabIndex == index }" v-for="(item, index) in tabList"
						:key="index" @click="handleTabIndex(index)">
						<view class="txt ptb10 plr35">{{ item.name }}</view>
						<view class="line"></view>
					</view>
				</scroll-view>
			</view>

			<!-- 我发布的作品 -->
			<view v-show="tabIndex === 0" v-if="tabList[0].load">
				<product ref="productRef" />
			</view>

			<!-- 我的喜欢 -->
			<view class="like" v-show="tabIndex === 1" v-if="tabList[1].load">
				<like ref="likeRef" />
			</view>

			<!-- 我的收藏 -->
			<view class="collect" v-show="tabIndex === 2" v-if="tabList[2].load">
				<!-- 添加收藏按钮 -->
				<view class="btn bd1s fmid mtb20 mlr20 c333 f32" @click="$refs.collectAddRef.open()">
					<uni-icons type="plus" size="30rpx" />
					<view>添加收藏</view>
				</view>

				<!-- 收藏列表按钮 -->
				<collectList ref="collectRef" @handleItem="handleCollectsItem" />
			</view>

			<view class="history" v-show="tabIndex === 3" v-if="tabList[3].load">
				<history ref="historyRef" />
			</view>
		</view>
	</view>

	<!-- 底部导航 -->
	<footerMenu ref="footerMneuRef" page="homepage" />

	<!-- 新增收藏 -->
	<collectAdd ref="collectAddRef" />

	<!-- 列表菜单 -->
	<uni-popup ref="menuRef" type="right">
		<view class="menuAlt df fdc ptb50 plr40 bfff">
			<view class="f1">

				<statusBar />
				<view class="head rows">
					<uni-icons type="left" size="40rpx" @click="$refs.menuRef.close()" />
				</view>

				<!-- 菜单列表 -->
				<view class="list mt30 c000 f32">
					<view @click="menuLink('/pages/mine/setting/setting')">
						<view class="item rows ptb20">
							<image class="wh50" src="/static/userMenu.png" mode="aspectFit" />
							<view class="txt ml20 f1">账户与安全</view>
						</view>
					</view>
					<view @click="menuLink('/pages/index/wallet/wallet')">
						<view class="item rows ptb20">
							<image class="wh50" src="/static/userMenu.png" mode="aspectFit" />
							<view class="txt ml20 f1">我的钱包</view>
						</view>
					</view>
					<!-- <view class="item rows ptb20">
						<image class="wh50" src="/static/userMenu.png" mode="aspectFit" />
						<view class="txt ml20 f1">我的客服</view>
					</view> -->
					<view @click="isAuth('/pages/index/myQrCode')">
						<view class="item rows ptb20">
							<image class="wh50" src="/static/userMenu.png" mode="aspectFit" />
							<view class="txt ml20 f1">我的分享</view>
						</view>
					</view>
					<view @click="menuLink('/pages/mine/userinfo')">
						<view class="item rows ptb20">
							<image class="wh50" src="/static/userMenu.png" mode="aspectFit" />
							<view class="txt ml20 f1">个人资料</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btn cancel" @click="handleLogout">退出登录</view>
		</view>
	</uni-popup>
</template>

<style lang="scss">
	// 顶部
	.apex {

		.header {
			color: #fff;
			transition: .3s;
			z-index: 10;
		}

		.name {
			opacity: 0;
			transition: .3s;
		}

		&.active {
			.header {
				color: #333;
				background-color: #fff;
			}

			.name {
				opacity: 1;
			}
		}
	}

	// 内容
	.container {
		margin-top: -30rpx;
		border-radius: 15rpx 15rpx 0 0;

		// 
		.number {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-gap: 25rpx;
		}

		.value {
			height: 68rpx;
			background-color: #F3F3F5;
		}
	}

	// 头部
	.menuAlt {
		box-sizing: border-box;
		width: 65vw;
		height: 100vh;
	}

	// 产品
	.product {

		// 
		.tab {

			.scroll {
				white-space: nowrap;
			}

			// 列表项
			.item {
				display: inline-block;
				color: #666666;
				transition: .3s;

				// 线
				.line {
					height: 4rpx;
					opacity: 0;
					background-color: #272727;
				}

				// 激活的
				&.active {
					color: #272727;

					.line {
						opacity: 1;
					}
				}
			}
		}

		// 视频列表
		.list {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 5rpx;

			.item {
				height: 360rpx;
			}

			.window {
				background-color: rgba(0, 0, 0, .1);
			}

			// 播放量
			.amount {
				.txt {
					opacity: .5;
				}
			}
		}
	}
</style>