<script setup>
	/**
	 * 分享给朋友
	 */
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance,
		watch,
		defineExpose,
		computed,
		onBeforeUnmount,
	} from 'vue';
	// 工具库
	import util from '@/common/js/util.js'
	// api
	import api from '@/api/index.js'
	const {
		proxy
	} = getCurrentInstance()
	// 好友列表
	const userList = reactive([])
	// 视频详情
	const videoItem = reactive({})
	// 用户信息
	const userinfo = computed(() => uni.$store.state.userinfo)

	const props = defineProps({
		// 是否我自己 0不是 1是
		isMine: {
			type: [String, Number],
			default: 0,
		},
	})
	onMounted(() => {
		util.isLogin(() => {
			// 获取好友列表
			getFriendList()
		})

		// 
		uni.$on('login', () => {
			// 获取好友列表
			getFriendList()
		})

		// 清空
		uni.$on('logout', () => {
			userList.length = 0
		})
	})

	onBeforeUnmount(() => {
		// 
		uni.$off('login')
		// 清空
		uni.$off('logout')
	})

	// 获取好友列表
	function getFriendList() {
		// 验证sdk是否准备完毕
		let isReady = uni.$chat.isReady();

		if (!isReady) {
			setTimeout(function() {
				getFriendList()
			}, 200);
			return
		}

		uni.$chat.getFriendList().then(rs => {
			if (rs.code == 0) {
				const result = rs.data
				// 
				userList.push(...result)
				// console.log('userList.data', userList)
				// console.log('friend list', list)
			}
		})
	}

	/**
	 * 打开弹窗
	 * @param {Object} item 操作的视频信息
	 */
	function open(item) {
		Object.assign(videoItem, item)
		proxy.$refs.firend.open()
	}

	// 关闭弹窗
	function close() {
		proxy.$refs.firend.close()
	}

	// 分享
	function handleShare(item) {
		// 
		api.video.videoShare({
			query: {
				// 分享用户id
				toUserId: item.userID,
			},
			data: {
				// 视频id
				videoId: videoItem.id,
				// 视频标题
				videoTitle: videoItem.title,
				// 视频封面照片
				videoImages: videoItem.coverUrl,
			},
		}).then(rs => {
			if (rs.code == 200) {
				util.alert('分享成功')

				close()
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 不喜欢视频
	function handleDislike() {
		api.video.disLike({
			data: {
				// 视频id
				videoId: videoItem.id,
				// 用户昵称
				userId: userinfo.value.id || '',
				// 是否不喜欢
				isDislike: 0,
			}
		}).then(rs => {
			if (rs.code == 200) {
				util.alert(rs.msg)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 
	defineExpose({
		open,
		close,
	})
</script>

<template>
	<!-- 分享给朋友 -->
	<uni-popup ref="firend" type="bottom">
		<view class="shareBox popBot df fdc plr20 pb20 bfff">
			<view class="header rows fdr">
				<view class="title mt40">
					<text class="f40">分享给朋友</text>
				</view>

				<view class="close" @click="$refs.firend.close()">
					<uni-icons type="close" size="36rpx" color="#333" />
				</view>
			</view>

			<view class="firendBox f1 df fdc">
				<scroll-view scroll-y="true" class="scroll f1" :show-scrollbar="false">
					<view class="list df fdr" v-if="userList[0]">
						<view class="item aic" v-for="(item,index) in userList" :key="index" @click="handleShare(item)">
							<image class="wh100 cir" :src="item.profile.avatar" mode="aspectFill" />
							<view class="txt mt10">
								<text class="c111 f24">{{item.profile.nick}}</text>
							</view>
						</view>
					</view>

					<view class="nomore" v-else>
						<text class="nomore">暂无好友~</text>
					</view>
				</scroll-view>
			</view>

			<view class="menu df fdr mt20" v-if="userinfo.id">
				<view class="item mlr30" @click="handleDislike">
					<image class="icon wh100 cir" src="/static/dislike.png" mode="aspectFit" />
					<text class="text mt10 tac f24">不喜欢</text>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<style lang="scss" scoped>
	// 分享盒子
	.shareBox {

		// 
		.firendBox {

			.scroll {
				height: 450rpx;

				// 
				.list {
					flex-wrap: wrap;

					// 
					.item {
						width: 140rpx;
						margin: 40rpx 0;
					}
				}
			}
		}

		// 菜单
		.menu {
			.item {

				.text {
					// 
				}
			}
		}
	}
</style>