<script setup>
	// 腾讯云聊天
	import TencentCloudChat from '@tencentcloud/chat';
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	// 工具库
	import util from '@/common/js/util.js'

	// 好友添加申请
	class Form {
		to = ''
		// 加好友附言
		wording = ''
		// 好友备注
		remark = ''
	}
	// 表单
	const form = reactive(new Form())
	// 用户昵称
	const nickname = ref('')

	onLoad((option) => {
		// 用户信息
		if (option.userId) form.to = option.userId
		// 用户昵称
		if (option.nickname) nickname.value = option.nickname
	})

	// 提交
	function handleSubmit() {
		const data = {
			...form
		}

		// 添加好友
		uni.$chat.addFriend({
			to: data.to,
			source: 'AddSource_Type_Android',
			remark: data.remark,
			wording: data.wording,
			type: TencentCloudChat.TYPES.SNS_ADD_TYPE_BOTH,
		}).then((res) => {
			console.log('res', res)
			const result = res.data
			// 添加好友的请求发送成功
			if (result.code === 30539) {
				// 30539 说明 user1 设置了【需要经过自己确认对方才能添加自己为好友】，此时 SDK 会触发 TencentCloudChat.EVENT.FRIEND_APPLICATION_LIST_UPDATED 事件
				util.alert(result.message)
			} else if (result.code === 0) {
				// 0 说明 user1 设置了【允许任何人添加自己为好友】，此时 SDK 会触发 TencentCloudChat.EVENT.FRIEND_LIST_UPDATED 事件
				util.alert('添加成功')
			}
			setTimeout(() => {
				uni.navigateBack()
			}, 500)
		}).catch(function(imError) {
			util.alert(imError.toString())
		})
	}

	// 填入对方昵称
	function pushNickname() {
		form.remark = nickname.value
	}
</script>

<template>
	<view class="app">
		<view class="area">
			<view class="title">招呼语</view>
			<view class="value">
				<input type="text" v-model="form.wording" placeholder="请输入招呼语" />
			</view>
		</view>

		<view class="area">
			<view class="title">设置好友备注</view>
			<view class="value">
				<input type="text" v-model="form.remark" placeholder="请输入好友备注" />
			</view>
			<view class=" mt10 c666 f28" @click="pushNickname">
				<text class="push">填入</text>
				<text>对方昵称</text>
			</view>
		</view>

		<view class="mt80 mlr60">
			<view class="btn pro bar black" @click="handleSubmit">发送</view>
		</view>
	</view>
</template>


<style lang="scss" scoped>
	// 
	.area {
		margin: 50rpx 40rpx;

		.title {
			font-size: 34rpx;
			color: #333;
		}

		.value {
			margin-top: 20rpx;
			padding: 30rpx 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
		}

		// 
		.push {
			color: #20D200;
		}
	}
</style>