<script setup>
	/**
	 * 新的关注
	 */

	// 工具库
	import util from '@/common/js/util';
	import api from '@/api/index.js'
	import {
		ref,
		computed,
		reactive,
		onMounted,
		getCurrentInstance,
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useStore,
	} from 'vuex'
	const store = useStore()
	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})
	// 用户列表
	const userList = reactive({
		data: [],
		pageNum: 1,
		pageSize: 10,
		total: 0,
	})
	onLoad(() => {
		getFriendList()
	})

	// 重载朋友列表
	function refreshFriendList() {
		userList.pageNum = 1
		userList.total = 0
		getFriendList()
	}

	// 获取更多朋友列表
	function getMoreFriendList() {
		if (userList.data.length >= userList.total) return
		userList.pageNum++
		getFriendList()
	}
	// 获取朋友列表
	function getFriendList() {
		api.video.getFansList({
			path: [userinfo.value.id],
			query: {
				pageNum: userList.pageNum,
				pageSize: userList.pageSize,
			}
		}).then(rs => {
			console.log(rs)
			if (rs.code == 200) {
				if (userList.pageNum) userList.data.length = 0
				userList.data.push(...rs.rows.map(item => {
					return item
				}))
				console.log(userList.data)
				// 视频列表
				userList.total = rs.total
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		}).finally(() => {
			uni.stopPullDownRefresh()
		})
	}

	// 点击用户
	function handleUser(item) {
		uni.navigateTo({
			url: util.setUrl('/pages/index/videoHome', {
				userId: item.id,
			})
		})
	}
</script>

<template>
	<view class="appbw">
		<!-- 用户列表 -->
		<view class="listArea plr30">
			<view class="item rows ptb30 c333 f32" v-for="(item,index) in userList.data" :key="index"
				@click="handleUser(item)">
				<view class="avatar fs0">
					<image class="wh100 cir" :src="item.avatar" mode="aspectFill" />
				</view>

				<view class="content f1 mlr20">
					<view class="name b">{{item.userNickname}}</view>
					<view class="time mt10 c999 f22">{{item.createTime}} 关注了你</view>
				</view>

				<view class="fs0">
					<uni-icons type="right" color="#999" size="32rpx" />
				</view>

			</view>
		</view>

		<!-- 填充 -->
		<view class="fill" style="height: 60rpx;"></view>
	</view>
</template>

<style lang="scss">
	// 
	.listArea {
		.item+.item {
			border-top: 1rpx solid #ddd;
		}
	}
</style>