<script setup>
	/**
	 * 添加朋友
	 */

	// 工具库
	import util from '@/common/js/util';
	// api
	import api from '@/api/index.js'
	import {
		useStore,
	} from 'vuex'
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onReady,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	// 代理
	const {
		proxy
	} = getCurrentInstance()
	// 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('')
	// 表单
	const form = reactive({
		Remark: '',
		AddWording: '',
	})
	// 朋友
	const friend = ref({})

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

	onReachBottom(() => {
		// 获取更多列表
		getMoreFriendList()
	})

	onPullDownRefresh(() => {
		refreshFriendList()
	})

	// 获取朋友列表
	function getSearchFriendList() {
		if (!keyword.value) {
			util.alert('请输入你想搜索的内容')
			return
		}

		api.news.searchUsers({
			query: {
				searchValue: keyword.value,
				pageNum: userList.pageNum,
				pageSize: userList.pageSize,
			}
		}).then(rs => {
			if (rs.code == 200) {
				if (userList.pageNum) userList.data.length = 0
				// 追加朋友列表
				userList.data.push(...rs.rows.map(item => {
					item.format_userPortrait = util.format_url(item.userPortrait, 'img')
					return item
				}))
				// 视频列表
				userList.total = rs.total
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		}).finally(() => {
			uni.stopPullDownRefresh()
		})
	}

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

	// 获取更多朋友列表
	function getMoreFriendList() {
		if (userList.data.length >= userList.total) return
		userList.pageNum++
		getSearchFriendList()
	}

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

	/**
	 * 添加好友
	 * @param {Object} item 用户信息
	 */
	function handleAdd(item) {
		friend.value.userId = item.userId
		friend.value.userName = item.userName
		friend.value.AddWording = `你好，我是${userinfo.value.userNickname}`
		proxy.$refs.friendRef.open()
	}

	// 填入对方昵称
	function pushNickname() {
		friend.value.Remark = friend.value.userName
	}

	// 发送好友申请
	function addFriendConfirm() {
		api.news.addFriend({
			data: [{
					toAccount: friend.value.userId,
					addWording: friend.value.AddWording,
					remark: friend.value.Remark,
				}],
		}).then(rs => {
			if (rs.code == 200) {
				util.alert('已发送好友申请，请等待对方同意')
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}
</script>
<template>
	<view class="app">
		<view class="searchBox ptb20 bfff">
			<view class="search rows mlr20 ptb10 plr30 bar">
				<uni-icons type="search" />
				<input type="text" v-model="keyword" placeholder="输入手机号/账号" class="f1 ml10" confirm-type="search" />
				<view class="btn bar sm colourful w120" @click="refreshFriendList">搜索</view>
			</view>
		</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.imageUrl" mode="aspectFill" />
				</view>

				<view class="content f1 mlr20">
					<view class="name">{{item.userName}}</view>
					<!-- <view class="time c999 f22">{{item.createTime}}</view> -->
				</view>

				<template v-if="0">
					<view class="btns rows fs0" v-if="item.friendState == 1">
						<view class="btn black plr20" @click.stop="">同意</view>
						<view class="btn cancel plr20 ml20" @click.stop="">拒绝</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>
				</template>
				<template v-else>
					<view class="btn black plr20" @click.stop="handleAdd(item)">添加好友</view>
				</template>
			</view>
		</view>

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

	<!-- 设置备注 -->
	<uni-popup ref="friendRef" type="bottom">
		<view class="friendAlt popBot plr20 bfff">
			<view class="header rows ptb30 f32">
				<view class="">发送好友申请</view>
				<uni-icons type="closeempty" @click="$refs.friendRef.close()" />
			</view>

			<view class="main mlr30">
				<view class="txtplus inputBox mtb30 ptb20 plr20 br10">
					<input type="text" v-model="friend.AddWording" placeholder="填写招呼语" />
				</view>

				<view class="txtplus inputBox mtb30 ptb20 plr20 br10">
					<input type="text" v-model="friend.Remark" placeholder="设置备注" />
				</view>
				<view class=" mt10 c666 f28" @click="pushNickname">
					<text class="push">填入</text>
					<text>对方昵称</text>
				</view>

				<view class="btn lg bar black mtb30" @click="addFriendConfirm">确定</view>
			</view>
		</view>
	</uni-popup>
</template>

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

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