<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,
		onShow,
		onPageScroll,
		onUnload
	} from "@dcloudio/uni-app"

	const {
		proxy
	} = getCurrentInstance()
	// 群聊id
	const groupId = ref('')
	// 群聊详情
	const detail = reactive({
		selfInfo: {
			role: '',
		}
	})
	// 群成员
	const memberList = reactive([])
	// 当前成员在群聊中的身份
	const role = computed(() => detail?.selfInfo?.role)
	// 群邀请菜单
	const inviteMenu = reactive([{
			id: 'FreeAccess',
			name: '邀请无需审批',
		},
		// {
		// 	id: 'NeedPermission',
		// 	name: '需要验证',
		// },
		{
			id: 'DisableInvite',
			name: '禁止邀请',
		},
	])
	// 邀请下标
	const inviteIndex = ref('')
	// 新群聊名称
	const newGroupName = ref('')

	onLoad((option) => {
		if (option.groupId) groupId.value = option.groupId
	})

	onShow(() => {
		// 获取详情
		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)
				inviteIndex.value = inviteMenu.findIndex(item => item.id == detail.inviteOption)
			}
		}).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,
		})
	}

	/**
	 * 修改群资料
	 * @param {Object} param 需要修改的群资料
	 * https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#updateGroupProfile
	 */
	function updateGroupProfile(param) {
		uni.$chat.updateGroupProfile({
			groupID: groupId.value,
			...param,
		}).then((rs) => {
			console.log('updateGroupProfile then', rs)
			Object.assign(detail, rs.data.group)
		}).catch((imError) => {
			console.log('updateGroupProfile fail', imError)
		});
	}

	/**
	 * 设置群邀请方式
	 * @param {Object} event
	 */
	function handleInvite(event) {
		const index = event.detail.value
		if (inviteIndex.value === index) return
		inviteIndex.value = index

		// 
		updateGroupProfile({
			inviteOption: inviteMenu[inviteIndex.value].id,
		})
	}

	// 上传群头像
	function handleGroupAvatar() {
		if(role.value !== 'Owner') return
		// 
		util.upload_image({
			type: 1,
			success: (res) => {
				// 
				updateGroupProfile({
					avatar: res.value
				})
			}
		})
	}

	// 点击群聊名称
	function handleGroupName() {
		if(role.value !== 'Owner') return
		// 
		newGroupName.value = detail.name
		// 
		proxy.$refs.groupName.open()
	}

	// 修改群聊名称
	function handleGroupNameConfim() {
		// 新群名是否为空
		if (newGroupName.value === '') return
		// 
		updateGroupProfile({
			name: newGroupName.value
		})
		proxy.$refs.groupName.close()
	}

	/**
	 * 退出群聊
	 * https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#quitGroup
	 */
	function handleExit() {
		util.alert({
			content: '确认退出群聊？',
		}).then(rs => {
			if (!rs.confirm) return
			uni.$chat.quitGroup(groupId.value).then((imResponse) => {
				uni.navigateBack({
					delta: 2,
				})
			}).catch(function(imError) {
				console.warn('quitGroup error:', imError); // 退出群组失败的相关信息
			});
		})
	}
</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'"
					@click="link(util.setUrl('/pages/news/group/remove',{'groupId': groupId}))">
					<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" @click="handleGroupAvatar">
				<view class="key">群聊头像</view>
				<view class="value c333">
					<image :src="detail.avatar" mode="aspectFill" class="wh120 br10" />
				</view>
			</view>

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

			<template v-if="0">
				<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>
			</template>

			<view class="line ptb30" v-if="inviteIndex !== ''">
				<picker :range="inviteMenu" range-key="name" :value="inviteIndex" @change="handleInvite"
					:disabled="role !== 'Owner'">
					<view class="rows">
						<view class="key">群邀请</view>
						<view class="value f1 tar c666">{{inviteMenu[inviteIndex].name}}</view>
					</view>
				</picker>
			</view>

			<view class="line rows ptb30" @click="link(util.setUrl('/pages/index/report', {userId: groupId,}))">
				<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" @click="handleExit">退出群聊</view>

		<!-- 修改名称 -->
		<uni-popup ref="groupName" type="center">
			<view class="groupNameAlt popMid plr30 bfff">
				<view class="header rows  mtb20">
					<view class="title f34 c333">修改群聊名称</view>
					<uni-icons type="closeempty" color="#999" size="30rpx" />
				</view>
				<view class="editBox mtb30 ptb10 plr20 bf8f8f8 br10">
					<input type="text" v-model="newGroupName" />
				</view>
				<view class="btn black mtb20" @click="handleGroupNameConfim">确认</view>
			</view>
		</uni-popup>
	</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;
		}
	}

	// 编辑群名称
	.groupNameAlt {
		.editBox {
			background-color: #eee;
		}
	}
</style>