<script setup>
	// 群聊详情

	// 腾讯云聊天
	import TencentCloudChat from '@tencentcloud/chat';
	import {
		ref,
		reactive,
		nextTick,
		onUnmounted,
		onMounted,
		computed,
		getCurrentInstance,
		watch,
	} from 'vue'
	// 工具库
	import util from '@/common/js/util.js'
	import {
		onLoad,
		onReady,
		onPageScroll,
		onUnload
	} from "@dcloudio/uni-app"

	// 群聊id
	const groupId = ref('')
	// 群聊详情
	const detail = reactive({
		selfInfo: {
			role: '',
		}
	})
	// 群成员
	const memberList = reactive([])
	// 当前成员在群聊中的身份
	const role = computed(() => detail?.selfInfo?.role)

	onLoad((option) => {
		if (option.groupId) groupId.value = option.groupId
		// 获取详情
		getDetail()
		// 获取群成员列表
		getGroupMemberList()
	})

	/**
	 * 获取群详细资料
	 * https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#getGroupProfile
	 */
	function getDetail() {
		uni.$chat.getGroupProfile({
			groupID: groupId.value,
		}).then((rs) => {
			if (rs.code == 0) {
				Object.assign(detail, rs.data.group)
			}
		}).catch(function(imError) {
			console.warn('getGroupProfile error:', imError); // 获取群详细资料失败的相关信息
		});
	}

	/**
	 * 获取群成员列表
	 * https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#getGroupMemberList
	 */
	function getGroupMemberList() {
		uni.$chat.getGroupMemberList({
			groupID: groupId.value,
			count: 20,
		}).then(function(rs) {
			memberList.length = 0
			memberList.push(...rs.data.memberList)
		})
	}

	/**
	 * 跳转
	 * @param {Object} url 跳转路径
	 */
	function link(url) {
		uni.navigateTo({
			url,
		})
	}
</script>

<template>
	<view class="app">
		<!-- 群成员列表 -->
		<view class="member container mtb20 plr20 c333 f26 bfff">

			<view class="header rows ptb20">
				<view class="title f32">群聊成员({{detail.memberCount}})</view>
			</view>

			<view class="list ptb20">
				<view class="item ver" v-for="(item,index) in memberList" :key="item.userID">
					<image :src="item.avatar" mode="aspectFill" class="wh80 br10" />
					<view class="name thd mt10 c999 f26">{{item.nick}}</view>
				</view>

				<view class="item ver" @click="link(util.setUrl('/pages/news/group/invite',{'groupId': groupId}))">
					<view class="add fmid wh80 br10">
						<uni-icons type="plus" color="#999" size="80rpx" />
					</view>
					<view class="name thd mt10 c999 f26">邀请</view>
				</view>

				<view class="item ver" v-if="role == 'Owner'">
					<view class="add fmid wh80 br10">
						<uni-icons type="minus" color="#999" size="80rpx" />
					</view>
					<view class="name thd mt10 c999 f26">移除</view>
				</view>
			</view>
		</view>

		<!-- 群信息 -->
		<view class="container plr20 c333 f34 bfff">

			<view class="line rows ptb30">
				<view class="key">群聊头像</view>
				<view class="value c333">
					<image :src="detail.avatar" mode="aspectFill" class="wh120" />
				</view>
			</view>

			<view class="line rows ptb30">
				<view class="key">群聊名称</view>
				<view class="value c666">{{detail.name}}</view>
			</view>

			<view class="line ptb30">
				<view class="key">群聊公告</view>
				<view class="value c666">{{detail.notification}}</view>
			</view>

			<view class="line ptb30">
				<view class="key">群聊介绍</view>
				<view class="value c666">{{detail.introduction}}</view>
			</view>

			<view class="line rows ptb30">
				<view class="key">举报</view>
				<view class="value c666">
					<uni-icons type="right" color="#999" />
				</view>
			</view>
		</view>

		<!-- 退出群聊 -->
		<view class="mtb20 ptb20 tac f34 cFF4242 bfff">退出群聊</view>
	</view>
</template>

<style lang="scss">
	// 群成员
	.member {
		.list {
			display: grid;
			grid-template-columns: repeat(5, 1fr);

			// 添加
			.add,
			// 删除
			.remove {
				box-sizing: border-box;
				// border: 4rpx dashed #ddd;
			}
		}
	}

	// 
	.container {
		.line+.line {
			border-top: 1rpx solid #eee;
		}
	}
</style>