<script setup>
	/**
	 * 新的朋友
	 */

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

	onLoad(() => {
		getFriendList()
	})

	onPullDownRefresh(() => {
		getFriendList()
	})

	// 同意好友申请
	function agreeFriend(item) {
		api.video.agreeFriend({
			path: [userinfo.value.userId, item.userId],
			query: {

			}
		}).then(rs => {
			if (rs.code === 200) {
				uni.showToast({
					title: '同意成功',
					icon: 'success',
					duration: 1500
				});
			} else {
				uni.showToast({
					title: rs.msg,
					icon: 'error',
					duration: 1500
				});
			}
		}).finally(() => {

		})
	}

	// 拒绝好友申请
	function refuseFriend(item) {
		api.video.refuseFriend({
			path: [userinfo.value.userId, item.userId],
		}).then(rs => {
			if (rs.code === 200) {
				uni.showToast({
					title: '拒绝成功',
					icon: 'success',
					duration: 1500
				});
			} else {
				uni.showToast({
					title: rs.msg,
					icon: 'error',
					duration: 1500
				});
			}
		})
	}

	// 获取朋友列表
	function getFriendList() {
		uni.$chat.getFriendApplicationList().then(rs => {
			if (rs.code === 0) {
				console.log('rs', rs)
				const result = rs.data
				userList.data = result.friendApplicationList
			}
		}).finally(() => {
			uni.stopPullDownRefresh()
		})
	}

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

<template>
	<view class="app">
		<view class="searchBox ptb20 bfff">
			<navigator url="/pages/news/addFriend" hover-class="none">
				<view class="search rows mlr20 ptb10 plr30 bar">
					<uni-icons type="search" />
					<view class="placeholderStyle f1 plr15">添加朋友</view>
					<view class="btn bar sm colourful w120">搜索</view>
				</view>
			</navigator>
		</view>

		<view class="ptb20 plr25 c666 f28">最近添加</view>

		<view class="listArea plr30 bfff">
			<!--  -->
			<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">{{item.name}}</view>
					<view class="time c999 f22">{{item.createTime}}</view>
				</view>

				<view class="btns rows fs0" v-if="item.friendState == 1">
					<view class="btn black plr20" @click.stop="agreeFriend(item)">同意</view>
					<view class="btn cancel plr20 ml20" @click.stop="refuseFriend(item)">拒绝</view>
				</view>

				<view class="result fs0 c999" v-else-if="item.friendState == 2">已拒绝</view>
				<view class="result fs0 c999" v-else-if="item.friendState == 3">已同意</view>

			</view>
		</view>

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

<style lang="scss">
	.search {
		background-color: #eaeaea;
	}

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