<template>
	<view  class="page group-edit">
		<uni-forms ref="form" :modelValue="data.group" :rules="data.rules" validate-trigger="bind" label-position="top"
			label-width="100%">
			<uni-forms-item label="群聊头像:" name="headImage">
				<image-upload v-show="isOwner" :onSuccess="onUnloadImageSuccess">
					<image :src="data.group.headImage" class="group-image"></image>
				</image-upload>
				<head-image  v-show="!isOwner" :name="data.group.remark" 
					:url="data.group.headImage" :size="200"></head-image>
			</uni-forms-item>
			<uni-forms-item label="群聊名称:" name="name" :required="true">
				<uni-easyinput type="text" v-model="data.group.name" :disabled="!isOwner" placeholder="请输入群聊名称" />
			</uni-forms-item>
			<uni-forms-item label="群聊备注:" name="remark">
				<uni-easyinput v-model="data.group.remark" type="text" placeholder="请输入群聊备注" />
			</uni-forms-item>
			<uni-forms-item label="我在本群的昵称:" name="email">
				<uni-easyinput v-model="data.group.aliasName" type="text" placeholder="请输入群聊昵称" />
			</uni-forms-item>
			<uni-forms-item label="群公告:" name="notice">
				<uni-easyinput type="textarea" v-model="data.group.notice" :disabled="!isOwner" placeholder="请输入群公告" />
			</uni-forms-item>
		</uni-forms>
		<button type="primary" class="submit-btn" @click="submit">提交</button>
	</view>
</template>

<script setup>
	import { reactive, nextTick, computed, watch } from "vue";
	import imageUpload from "../components/image-upload.vue";
	import headImage from "../components/head-image.vue";
	import { onLoad } from '@dcloudio/uni-app';
	import { useChatStore } from "@/common/store/im/chatStore.js";
	import { useGroupStore } from '@/common/store/im/groupStore.js';
	import { useIMUserStore } from '@/common/store/im/imUserStore.js';
	import http from '@/common/request/im.js';

	const groupStore = useGroupStore();
	const chatStore = useChatStore();
	const imUserStore = useIMUserStore();
	const data = reactive({
		userIds:[],
		group: {},
		rules: {
			name: {
				rules: [{
					required: true,
					errorMessage: '请输入群聊名称',
				}]
			}

		}
	}) 

	function submit() {
		if (data.group.id) {
			modifyGroup();
		} else {
			createNewGroup();
		}
	}
	function onUnloadImageSuccess(file, res) {
		data.group.headImage = res.data.originUrl;
		data.group.headImageThumb = res.data.thumbUrl;
	}
	function modifyGroup() {
		http({
			url: "/group/modify",
			method: "PUT",
			data: data.group
		}).then((group) => {
			groupStore.updateGroup(group);
			uni.showToast({
				title: "修改群聊信息成功",
				icon: 'none'
			});
			setTimeout(() => {
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.loadGroupInfo();
				uni.navigateBack();
			}, 1000);

		})
	}
	function  createNewGroup() {
		http({
			url: "/group/create",
			method: 'POST',
			data: data.group
		}).then((group) => {
			groupStore.addGroup(group);
			let inviteVo = {
				groupId: group.id,
				friendIds: data.userIds
			}
			http({
				url: "/group/invite",
				method: 'POST',
				data: inviteVo
			}).then(() => {
				uni.showToast({
					title: "群聊添加成功",
					icon: 'none'
				})
				let chat = {
					type: 'GROUP',
					targetId: group.id,
					showName: group.remark,
					headImage: group.headImage,
				};
				chatStore.openChat(chat);
				uni.navigateTo({
					url: "/pages/msg/im/chat/components/chat-box?chatIdx=0"
				})

			})
		})
	}
	function loadGroupInfo(id) {
		http({
			url: `/group/find/${id}`,
			method: 'GET'
		}).then((group) => {
			data.group = group;
			// 更新聊天页面的群聊信息
			chatStore.updateChatFromGroup(group);
			// 更新聊天列表的群聊信息
			groupStore.updateGroup(group);

		});
	}
	function initNewGroup() {
		let userInfo = imUserStore.userInfo;
		data.group = {
			name: `${userInfo.userName}创建的群聊`,
			headImage: userInfo.headImage,
			headImageThumb: userInfo.headImageThumb,
			aliasName: userInfo.nickName,
			ownerId: imUserStore.userInfo.id
		}
	}
	const isOwner = computed(()=> {
		return imUserStore.userInfo.id == data.group.ownerId
	})
	onLoad((options) => {
		if (options.id) {
			// 修改群聊
			loadGroupInfo(options.id);
		} else {
			data.userIds = options.userIds.split(',')
			// 创建群聊
			initNewGroup();
		}
	})
</script>

<style lang="scss" scoped>
	.group-edit {
		padding: 20rpx;

		.group-image {
			width: 200rpx;
			height: 200rpx;
			border: 1px solid #ccc;
			border-radius: 5%;
		}

		.submit-btn{
			background: #5e95ff;
		}
	}
</style>